@owp/core 2.5.21 → 2.5.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/dayjs.d.ts +4 -0
- package/dayjs.js +2 -0
- package/dist/_virtual/index16.js +4 -4
- package/dist/_virtual/index17.js +4 -4
- package/dist/_virtual/index18.js +4 -4
- package/dist/_virtual/index19.js +4 -4
- package/dist/_virtual/isBetween.js +8 -0
- package/dist/_virtual/isBetween.js.map +1 -0
- package/dist/_virtual/isBetween2.js +5 -0
- package/dist/_virtual/isBetween2.js.map +1 -0
- package/dist/components/OwpPageContent/OwpPageContent.js +20 -19
- package/dist/components/OwpPageContent/OwpPageContent.js.map +1 -1
- package/dist/components/OwpPicker/OwpDatePicker.js +31 -32
- package/dist/components/OwpPicker/OwpDatePicker.js.map +1 -1
- package/dist/components/OwpPicker/OwpDateRangePicker.js +21 -21
- package/dist/components/OwpPicker/OwpDateRangePicker.js.map +1 -1
- package/dist/components/OwpPicker/OwpTimePicker.js +29 -30
- package/dist/components/OwpPicker/OwpTimePicker.js.map +1 -1
- package/dist/components/OwpPicker/OwpWeekDatePicker.js +28 -29
- package/dist/components/OwpPicker/OwpWeekDatePicker.js.map +1 -1
- package/dist/components/OwpPicker/OwpYearRangePicker.js +1 -1
- package/dist/components/OwpPicker/OwpYearRangePicker.js.map +1 -1
- package/dist/components/OwpPicker/internal/DatePickerInput.js +5 -5
- package/dist/components/OwpPicker/internal/DatePickerInput.js.map +1 -1
- package/dist/components/OwpSection/OwpSection.js +118 -111
- package/dist/components/OwpSection/OwpSection.js.map +1 -1
- package/dist/components/OwpTable/OwpFieldTable.js +67 -70
- package/dist/components/OwpTable/OwpFieldTable.js.map +1 -1
- package/dist/components/OwpTable/internal/OwpTableBase.js +85 -60
- package/dist/components/OwpTable/internal/OwpTableBase.js.map +1 -1
- package/dist/components/OwpTable/internal/defaultTableStyle.js +1 -1
- package/dist/components/OwpTable/internal/defaultTableStyle.js.map +1 -1
- package/dist/components/OwpTreeGrid/OwpTreeGrid.js +1 -1
- package/dist/components/OwpTreeGrid/OwpTreeGrid.js.map +1 -1
- package/dist/components/OwpTreeGrid/internal/hooks/useOwpTreeGridDatePickerEditor.js +21 -22
- package/dist/components/OwpTreeGrid/internal/hooks/useOwpTreeGridDatePickerEditor.js.map +1 -1
- package/dist/components/OwpTreeGrid/internal/treeGridTheme.js +10 -10
- package/dist/components/OwpTreeGrid/internal/treeGridTheme.js.map +1 -1
- package/dist/dayjs.js +18 -0
- package/dist/dayjs.js.map +1 -0
- package/dist/features/themePreview/components/ThemePreviewCanvas.js +22 -22
- package/dist/features/themePreview/components/ThemePreviewCanvas.js.map +1 -1
- package/dist/features/themePreview/hooks/useThemePreview.js +16 -16
- package/dist/features/themePreview/hooks/useThemePreview.js.map +1 -1
- package/dist/hooks/{useInitCommonCodes.js → internal/useInitCommonCodes.js} +6 -6
- package/dist/hooks/internal/useInitCommonCodes.js.map +1 -0
- package/dist/hooks/internal/useMinimumVisibleState.js +31 -0
- package/dist/hooks/internal/useMinimumVisibleState.js.map +1 -0
- package/dist/hooks/useInitApp.js +17 -14
- package/dist/hooks/useInitApp.js.map +1 -1
- package/dist/hooks.js +49 -51
- package/dist/hooks.js.map +1 -1
- package/dist/layout/components/toggles/NavigationSearchToggle.js +3 -3
- package/dist/node_modules/.pnpm/dayjs@1.11.18/node_modules/dayjs/plugin/isBetween.js +23 -0
- package/dist/node_modules/.pnpm/dayjs@1.11.18/node_modules/dayjs/plugin/isBetween.js.map +1 -0
- package/dist/node_modules/.pnpm/jsbarcode@3.12.1/node_modules/jsbarcode/bin/barcodes/CODE128/constants.js +1 -1
- package/dist/node_modules/.pnpm/jsbarcode@3.12.1/node_modules/jsbarcode/bin/barcodes/EAN_UPC/constants.js +1 -1
- package/dist/node_modules/.pnpm/jsbarcode@3.12.1/node_modules/jsbarcode/bin/barcodes/ITF/constants.js +1 -1
- package/dist/node_modules/.pnpm/react-overlays@5.2.1_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/react-overlays/esm/Portal.js +1 -1
- package/dist/types/components/OwpPicker/OwpTimePicker.d.ts +1 -1
- package/dist/types/components/OwpSection/OwpSection.d.ts +9 -3
- package/dist/types/components/OwpTable/internal/defaultTableStyle.d.ts +1 -1
- package/dist/types/dayjs.d.ts +18 -0
- package/dist/types/hooks/index.d.ts +0 -1
- package/dist/types/hooks/internal/useMinimumVisibleState.d.ts +7 -0
- package/dist/types/utils/dayjsBrowser.d.ts +1 -7
- package/dist/types/utils/formatDateToYmd.d.ts +1 -1
- package/dist/utils/formatDateToYmd.js +3 -3
- package/dist/utils/formatDateToYmd.js.map +1 -1
- package/dist/utils/treeGridExportExcelUtil.js +1 -1
- package/dist/utils/treeGridExportExcelUtil.js.map +1 -1
- package/dist/utils/zipUtil.js +3 -3
- package/dist/utils/zipUtil.js.map +1 -1
- package/package.json +3 -1
- package/dist/hooks/useInitCommonCodes.js.map +0 -1
- package/dist/utils/dayjsBrowser.js +0 -16
- package/dist/utils/dayjsBrowser.js.map +0 -1
- /package/dist/types/hooks/{useInitCommonCodes.d.ts → internal/useInitCommonCodes.d.ts} +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OwpWeekDatePicker.js","sources":["../../../src/components/OwpPicker/OwpWeekDatePicker.tsx"],"sourcesContent":["import { DatePickerValue } from '@/components/OwpPicker/OwpDatePicker';\nimport { ensureDayjsBrowserSetup } from '@/utils/dayjsBrowser';\nimport { TextFieldProps } from '@mui/material';\nimport clsx from 'clsx';\nimport dayjs from 'dayjs';\nimport { useMemo } from 'react';\nimport ReactDatePicker, { DatePickerProps } from 'react-datepicker';\nimport { CalendarContainer } from './internal/CalendarContainer';\nimport { DatePickerInput } from './internal/DatePickerInput';\nimport { VALUE_DATE_FORMATTER } from './constants';\n\nensureDayjsBrowserSetup();\n\nconst WEEK_SUFFIX = 'ᵗʰ ';\n\ninterface WeekPickerProps {\n className?: string;\n label?: string;\n variant?: TextFieldProps['variant'];\n sx?: TextFieldProps['sx'];\n value?: DatePickerValue;\n disabledClearButton?: boolean;\n disabledFutureDates?: boolean;\n showMonthPicker?: boolean;\n fullWidth?: boolean;\n onChange?: (value?: DatePickerValue) => void;\n textFieldProps?: Omit<TextFieldProps, 'value' | 'defaultValue' | 'onChange'>;\n}\n\ntype OwpDatePickerProps = WeekPickerProps & DatePickerProps;\n\n/**\n * OwpWeekDatePicker 컴포넌트\n * @param label 입력 라벨\n * @param variant variant 값\n * @param sx sx 값\n * @param value 현재 값\n * @param onChange onChange 핸들러\n * @param fullWidth 전체 너비 사용 여부\n */\nexport const OwpWeekDatePicker = ({\n label,\n variant = 'standard',\n sx,\n value,\n onChange,\n fullWidth,\n showWeekNumbers,\n textFieldProps,\n disabledClearButton,\n ...datePickerProps\n}: OwpDatePickerProps) => {\n const {\n selectsMultiple,\n selectsRange,\n selected,\n startDate,\n endDate,\n ...resolvedDatePickerProps\n } = datePickerProps;\n void [selectsMultiple, selectsRange, selected, startDate, endDate];\n const [selectedDate, selectedWeekNumberStr] = useMemo(() => {\n if (!value) return [null, ''];\n\n if (typeof value === 'string') {\n const [weekNumber, dateStr] = value.split(WEEK_SUFFIX);\n return [new Date(dateStr || value), weekNumber ? `${weekNumber}${WEEK_SUFFIX}` : ''];\n }\n\n return [dayjs(value)?.startOf('isoWeek')?.toDate(), ''];\n }, [value]);\n\n const handleSelect = (date: Date | null) => {\n if (!date) return onChange?.(undefined);\n\n const currentDate = dayjs(date);\n const weekNumber = currentDate.startOf('isoWeek').isoWeek();\n const formatted = `${weekNumber}${WEEK_SUFFIX}${currentDate.format(VALUE_DATE_FORMATTER)}`;\n\n onChange?.(formatted);\n };\n\n return (\n <ReactDatePicker\n popperPlacement=\"bottom-start\"\n popperContainer={CalendarContainer}\n {...resolvedDatePickerProps}\n selected={selectedDate}\n onChange={handleSelect}\n showWeekNumbers={showWeekNumbers}\n calendarStartDay={1}\n customInput={\n <DatePickerInput\n className={clsx(showWeekNumbers && 'w-[184px]')}\n label={label}\n variant={variant}\n sx={sx}\n {...textFieldProps}\n fullWidth={fullWidth}\n disabledClearButton={disabledClearButton}\n reset={() => onChange?.('')}\n valueFormatter={`${selectedWeekNumberStr}${VALUE_DATE_FORMATTER}`}\n />\n }\n />\n );\n};\n"],"names":["ensureDayjsBrowserSetup","WEEK_SUFFIX","OwpWeekDatePicker","__name","label","variant","sx","value","onChange","fullWidth","showWeekNumbers","textFieldProps","disabledClearButton","datePickerProps","selectsMultiple","selectsRange","selected","startDate","endDate","resolvedDatePickerProps","selectedDate","selectedWeekNumberStr","useMemo","weekNumber","dateStr","
|
|
1
|
+
{"version":3,"file":"OwpWeekDatePicker.js","sources":["../../../src/components/OwpPicker/OwpWeekDatePicker.tsx"],"sourcesContent":["import { DatePickerValue } from '@/components/OwpPicker/OwpDatePicker';\nimport { ensureDayjsBrowserSetup } from '@/utils/dayjsBrowser';\nimport { TextFieldProps } from '@mui/material';\nimport clsx from 'clsx';\nimport dayjs from '@/dayjs';\nimport { useMemo } from 'react';\nimport ReactDatePicker, { DatePickerProps } from 'react-datepicker';\nimport { CalendarContainer } from './internal/CalendarContainer';\nimport { DatePickerInput } from './internal/DatePickerInput';\nimport { VALUE_DATE_FORMATTER } from './constants';\n\nensureDayjsBrowserSetup();\n\nconst WEEK_SUFFIX = 'ᵗʰ ';\n\ninterface WeekPickerProps {\n className?: string;\n label?: string;\n variant?: TextFieldProps['variant'];\n sx?: TextFieldProps['sx'];\n value?: DatePickerValue;\n disabledClearButton?: boolean;\n disabledFutureDates?: boolean;\n showMonthPicker?: boolean;\n fullWidth?: boolean;\n onChange?: (value?: DatePickerValue) => void;\n textFieldProps?: Omit<TextFieldProps, 'value' | 'defaultValue' | 'onChange'>;\n}\n\ntype OwpDatePickerProps = WeekPickerProps & DatePickerProps;\n\n/**\n * OwpWeekDatePicker 컴포넌트\n * @param label 입력 라벨\n * @param variant variant 값\n * @param sx sx 값\n * @param value 현재 값\n * @param onChange onChange 핸들러\n * @param fullWidth 전체 너비 사용 여부\n */\nexport const OwpWeekDatePicker = ({\n label,\n variant = 'standard',\n sx,\n value,\n onChange,\n fullWidth,\n showWeekNumbers,\n textFieldProps,\n disabledClearButton,\n ...datePickerProps\n}: OwpDatePickerProps) => {\n const {\n selectsMultiple,\n selectsRange,\n selected,\n startDate,\n endDate,\n ...resolvedDatePickerProps\n } = datePickerProps;\n void [selectsMultiple, selectsRange, selected, startDate, endDate];\n const [selectedDate, selectedWeekNumberStr] = useMemo(() => {\n if (!value) return [null, ''];\n\n if (typeof value === 'string') {\n const [weekNumber, dateStr] = value.split(WEEK_SUFFIX);\n return [new Date(dateStr || value), weekNumber ? `${weekNumber}${WEEK_SUFFIX}` : ''];\n }\n\n return [dayjs(value)?.startOf('isoWeek')?.toDate(), ''];\n }, [value]);\n\n const handleSelect = (date: Date | null) => {\n if (!date) return onChange?.(undefined);\n\n const currentDate = dayjs(date);\n const weekNumber = currentDate.startOf('isoWeek').isoWeek();\n const formatted = `${weekNumber}${WEEK_SUFFIX}${currentDate.format(VALUE_DATE_FORMATTER)}`;\n\n onChange?.(formatted);\n };\n\n return (\n <ReactDatePicker\n popperPlacement=\"bottom-start\"\n popperContainer={CalendarContainer}\n {...resolvedDatePickerProps}\n selected={selectedDate}\n onChange={handleSelect}\n showWeekNumbers={showWeekNumbers}\n calendarStartDay={1}\n customInput={\n <DatePickerInput\n className={clsx(showWeekNumbers && 'w-[184px]')}\n label={label}\n variant={variant}\n sx={sx}\n {...textFieldProps}\n fullWidth={fullWidth}\n disabledClearButton={disabledClearButton}\n reset={() => onChange?.('')}\n valueFormatter={`${selectedWeekNumberStr}${VALUE_DATE_FORMATTER}`}\n />\n }\n />\n );\n};\n"],"names":["ensureDayjsBrowserSetup","WEEK_SUFFIX","OwpWeekDatePicker","__name","label","variant","sx","value","onChange","fullWidth","showWeekNumbers","textFieldProps","disabledClearButton","datePickerProps","selectsMultiple","selectsRange","selected","startDate","endDate","resolvedDatePickerProps","selectedDate","selectedWeekNumberStr","useMemo","weekNumber","dateStr","dayjs","jsx","ReactDatePicker","CalendarContainer","date","currentDate","formatted","VALUE_DATE_FORMATTER","DatePickerInput","clsx"],"mappings":";;;;;;;;;;AAWAA,EAAA;AAEA,MAAMC,IAAc,OA2BPC,IAAoB,gBAAAC,EAAA,CAAC;AAAA,EAChC,OAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,GAAGC;AACL,MAA0B;AACxB,QAAM;AAAA,IACJ,iBAAAC;AAAA,IACA,cAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,SAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDN,GAEE,CAACO,GAAcC,CAAqB,IAAIC,EAAQ,MAAM;;AAC1D,QAAI,CAACf,EAAO,QAAO,CAAC,MAAM,EAAE;AAE5B,QAAI,OAAOA,KAAU,UAAU;AAC7B,YAAM,CAACgB,GAAYC,CAAO,IAAIjB,EAAM,MAAMN,CAAW;AACrD,aAAO,CAAC,IAAI,KAAKuB,KAAWjB,CAAK,GAAGgB,IAAa,GAAGA,CAAU,GAAGtB,CAAW,KAAK,EAAE;AAAA,IACrF;AAEA,WAAO,EAACwB,KAAAA,IAAAA,EAAMlB,CAAK,MAAXkB,gBAAAA,EAAc,QAAQ,eAAtBA,gBAAAA,EAAkC,UAAU,EAAE;AAAA,EACxD,GAAG,CAAClB,CAAK,CAAC;AAYV,SACE,gBAAAmB;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,iBAAgB;AAAA,MAChB,iBAAiBC;AAAA,MAChB,GAAGT;AAAA,MACJ,UAAUC;AAAA,MACV,UAhBiB,gBAAAjB,EAAA,CAAC0B,MAAsB;AAC1C,YAAI,CAACA,EAAM,QAAOrB,KAAA,gBAAAA,EAAW;AAE7B,cAAMsB,IAAcL,EAAMI,CAAI,GAExBE,IAAY,GADCD,EAAY,QAAQ,SAAS,EAAE,QAAA,CACnB,GAAG7B,CAAW,GAAG6B,EAAY,OAAOE,CAAoB,CAAC;AAExF,QAAAxB,KAAA,QAAAA,EAAWuB;AAAA,MACb,GARqB;AAAA,MAiBjB,iBAAArB;AAAA,MACA,kBAAkB;AAAA,MAClB,aACE,gBAAAgB;AAAA,QAACO;AAAA,QAAA;AAAA,UACC,WAAWC,EAAKxB,KAAmB,WAAW;AAAA,UAC9C,OAAAN;AAAA,UACA,SAAAC;AAAA,UACA,IAAAC;AAAA,UACC,GAAGK;AAAA,UACJ,WAAAF;AAAA,UACA,qBAAAG;AAAA,UACA,OAAO,gBAAAT,EAAA,MAAMK,KAAA,gBAAAA,EAAW,KAAjB;AAAA,UACP,gBAAgB,GAAGa,CAAqB,GAAGW,CAAoB;AAAA,QAAA;AAAA,MAAA;AAAA,IACjE;AAAA,EAAA;AAIR,GAlEiC;"}
|
|
@@ -5,7 +5,7 @@ import { useOwpTranslation as _ } from "../../hooks/useOwpTranslation.js";
|
|
|
5
5
|
import { clsx as d } from "../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js";
|
|
6
6
|
import { enUS as b } from "../../node_modules/.pnpm/date-fns@4.1.0/node_modules/date-fns/locale/en-US.js";
|
|
7
7
|
import { ko as H } from "../../node_modules/.pnpm/date-fns@4.1.0/node_modules/date-fns/locale/ko.js";
|
|
8
|
-
import i from "dayjs";
|
|
8
|
+
import { owpDayjs as i } from "../../dayjs.js";
|
|
9
9
|
import { useMemo as Y } from "react";
|
|
10
10
|
import { DatePicker as q, registerLocale as j, setDefaultLocale as z } from "../../node_modules/.pnpm/react-datepicker@8.7.0_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/react-datepicker/dist/index.es.js";
|
|
11
11
|
import { CalendarContainer as B } from "./internal/CalendarContainer.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OwpYearRangePicker.js","sources":["../../../src/components/OwpPicker/OwpYearRangePicker.tsx"],"sourcesContent":["import { useOwpTranslation } from '@/hooks/useOwpTranslation';\nimport { TextFieldProps } from '@mui/material';\nimport clsx from 'clsx';\nimport { enUS } from 'date-fns/locale/en-US';\nimport { ko } from 'date-fns/locale/ko';\nimport dayjs from 'dayjs';\nimport { isEmpty, isNil, isNull } from 'es-toolkit/compat';\nimport { useMemo } from 'react';\nimport ReactDatePicker, {\n DatePickerProps,\n registerLocale,\n setDefaultLocale,\n} from 'react-datepicker';\nimport { CalendarContainer } from './internal/CalendarContainer';\nimport { DatePickerInput } from './internal/DatePickerInput';\nimport { VALUE_MONTH_FORMATTER } from './constants';\n\nregisterLocale('ko', ko);\nregisterLocale('en', enUS);\nsetDefaultLocale('ko');\n\nconst isNill = (v: Date | string | number | undefined | null) => isNull(v) && isNil(v);\n\ntype DatePickerValue = string | Date;\n\ninterface OwnProps {\n className?: string;\n label?: string;\n variant?: TextFieldProps['variant'];\n sx?: TextFieldProps['sx'];\n value?: DatePickerValue;\n fullWidth?: boolean;\n disabledClearButton?: boolean;\n disabledFutureDates?: boolean;\n onChange?: (value?: DatePickerValue) => void;\n textFieldProps?: Omit<TextFieldProps, 'value' | 'defaultValue' | 'onChange'>;\n}\n\ntype OwpDatePickerProps = OwnProps & DatePickerProps;\n\n/**\n * OwpYearRangePicker 컴포넌트\n * @param className CSS 클래스명\n * @param label 입력 라벨\n * @param variant variant 값\n * @param sx sx 값\n * @param value 현재 값\n * @param fullWidth 전체 너비 사용 여부\n */\nconst OwpYearRangePicker = ({\n className,\n label,\n variant = 'standard',\n sx,\n value,\n fullWidth,\n disabledClearButton,\n disabledFutureDates,\n onChange,\n textFieldProps,\n ...datePickerProps\n}: OwpDatePickerProps) => {\n const { i18n } = useOwpTranslation();\n const {\n selectsMultiple,\n selectsRange,\n selected,\n startDate: passedStartDate,\n endDate: passedEndDate,\n ...resolvedDatePickerProps\n } = datePickerProps;\n void [selectsMultiple, selectsRange, selected, passedStartDate, passedEndDate];\n const languageId = i18n.resolvedLanguage ?? i18n.language ?? 'kr';\n const datePickerLocale = languageId === 'kr' ? 'ko' : 'en';\n const [startDate, endDate] = useMemo(() => {\n if (!value) return [null, null];\n return value\n .split(',')\n .map((v: string) => (!v || isNill(v) ? null : dayjs(v, VALUE_MONTH_FORMATTER)));\n }, [value]);\n\n const handleSelect = (dates: Date[] | null) => {\n if (!dates || isEmpty(dates)) {\n onChange?.(undefined);\n return;\n }\n\n const [start] = dates;\n if (!start || isNill(start)) {\n onChange?.(undefined);\n return;\n }\n\n const year = dayjs(start).year();\n const startDate = dayjs().year(year).month(9).startOf('month');\n const endDate = dayjs()\n .year(year + 1)\n .month(8)\n .endOf('month');\n\n if (!startDate.isValid() || !endDate.isValid()) {\n onChange?.(undefined);\n return;\n }\n\n const displayValue = [startDate, endDate].map((d) => d.format(VALUE_MONTH_FORMATTER)).join(',');\n\n onChange?.(displayValue);\n };\n\n return (\n <ReactDatePicker\n {...resolvedDatePickerProps}\n locale={datePickerLocale}\n popperContainer={CalendarContainer}\n className={clsx(fullWidth && 'w-full')}\n wrapperClassName={clsx(fullWidth && 'w-full', datePickerProps?.wrapperClassName)}\n selectsRange\n startDate={startDate?.toDate?.()}\n endDate={endDate?.toDate?.()}\n maxDate={disabledFutureDates ? new Date() : undefined}\n showPopperArrow={false}\n popperPlacement=\"bottom-start\"\n onChange={handleSelect}\n onCalendarClose={() => {\n if (!isNil(startDate) && isNil(endDate)) {\n const year = startDate.year();\n const endDate = dayjs()\n .year(year + 1)\n .month(8)\n .endOf('month');\n onChange?.([startDate, endDate].map((d) => d.format(VALUE_MONTH_FORMATTER)).join(','));\n }\n }}\n customInput={\n <DatePickerInput\n className={clsx('w-224', className)}\n label={label}\n variant={variant}\n sx={sx}\n {...textFieldProps}\n useRange\n disabledClearButton={disabledClearButton}\n reset={() => onChange?.('')}\n valueFormatter={VALUE_MONTH_FORMATTER}\n />\n }\n />\n );\n};\n\nexport { OwpYearRangePicker };\n"],"names":["registerLocale","ko","enUS","setDefaultLocale","isNill","__name","v","isNull","isNil","OwpYearRangePicker","className","label","variant","sx","value","fullWidth","disabledClearButton","disabledFutureDates","onChange","textFieldProps","datePickerProps","i18n","useOwpTranslation","selectsMultiple","selectsRange","selected","passedStartDate","passedEndDate","resolvedDatePickerProps","datePickerLocale","startDate","endDate","useMemo","dayjs","VALUE_MONTH_FORMATTER","handleSelect","dates","isEmpty","start","year","displayValue","d","jsx","ReactDatePicker","CalendarContainer","clsx","_a","_b","DatePickerInput"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"OwpYearRangePicker.js","sources":["../../../src/components/OwpPicker/OwpYearRangePicker.tsx"],"sourcesContent":["import { useOwpTranslation } from '@/hooks/useOwpTranslation';\nimport { TextFieldProps } from '@mui/material';\nimport clsx from 'clsx';\nimport { enUS } from 'date-fns/locale/en-US';\nimport { ko } from 'date-fns/locale/ko';\nimport dayjs from '@/dayjs';\nimport { isEmpty, isNil, isNull } from 'es-toolkit/compat';\nimport { useMemo } from 'react';\nimport ReactDatePicker, {\n DatePickerProps,\n registerLocale,\n setDefaultLocale,\n} from 'react-datepicker';\nimport { CalendarContainer } from './internal/CalendarContainer';\nimport { DatePickerInput } from './internal/DatePickerInput';\nimport { VALUE_MONTH_FORMATTER } from './constants';\n\nregisterLocale('ko', ko);\nregisterLocale('en', enUS);\nsetDefaultLocale('ko');\n\nconst isNill = (v: Date | string | number | undefined | null) => isNull(v) && isNil(v);\n\ntype DatePickerValue = string | Date;\n\ninterface OwnProps {\n className?: string;\n label?: string;\n variant?: TextFieldProps['variant'];\n sx?: TextFieldProps['sx'];\n value?: DatePickerValue;\n fullWidth?: boolean;\n disabledClearButton?: boolean;\n disabledFutureDates?: boolean;\n onChange?: (value?: DatePickerValue) => void;\n textFieldProps?: Omit<TextFieldProps, 'value' | 'defaultValue' | 'onChange'>;\n}\n\ntype OwpDatePickerProps = OwnProps & DatePickerProps;\n\n/**\n * OwpYearRangePicker 컴포넌트\n * @param className CSS 클래스명\n * @param label 입력 라벨\n * @param variant variant 값\n * @param sx sx 값\n * @param value 현재 값\n * @param fullWidth 전체 너비 사용 여부\n */\nconst OwpYearRangePicker = ({\n className,\n label,\n variant = 'standard',\n sx,\n value,\n fullWidth,\n disabledClearButton,\n disabledFutureDates,\n onChange,\n textFieldProps,\n ...datePickerProps\n}: OwpDatePickerProps) => {\n const { i18n } = useOwpTranslation();\n const {\n selectsMultiple,\n selectsRange,\n selected,\n startDate: passedStartDate,\n endDate: passedEndDate,\n ...resolvedDatePickerProps\n } = datePickerProps;\n void [selectsMultiple, selectsRange, selected, passedStartDate, passedEndDate];\n const languageId = i18n.resolvedLanguage ?? i18n.language ?? 'kr';\n const datePickerLocale = languageId === 'kr' ? 'ko' : 'en';\n const [startDate, endDate] = useMemo(() => {\n if (!value) return [null, null];\n return value\n .split(',')\n .map((v: string) => (!v || isNill(v) ? null : dayjs(v, VALUE_MONTH_FORMATTER)));\n }, [value]);\n\n const handleSelect = (dates: Date[] | null) => {\n if (!dates || isEmpty(dates)) {\n onChange?.(undefined);\n return;\n }\n\n const [start] = dates;\n if (!start || isNill(start)) {\n onChange?.(undefined);\n return;\n }\n\n const year = dayjs(start).year();\n const startDate = dayjs().year(year).month(9).startOf('month');\n const endDate = dayjs()\n .year(year + 1)\n .month(8)\n .endOf('month');\n\n if (!startDate.isValid() || !endDate.isValid()) {\n onChange?.(undefined);\n return;\n }\n\n const displayValue = [startDate, endDate].map((d) => d.format(VALUE_MONTH_FORMATTER)).join(',');\n\n onChange?.(displayValue);\n };\n\n return (\n <ReactDatePicker\n {...resolvedDatePickerProps}\n locale={datePickerLocale}\n popperContainer={CalendarContainer}\n className={clsx(fullWidth && 'w-full')}\n wrapperClassName={clsx(fullWidth && 'w-full', datePickerProps?.wrapperClassName)}\n selectsRange\n startDate={startDate?.toDate?.()}\n endDate={endDate?.toDate?.()}\n maxDate={disabledFutureDates ? new Date() : undefined}\n showPopperArrow={false}\n popperPlacement=\"bottom-start\"\n onChange={handleSelect}\n onCalendarClose={() => {\n if (!isNil(startDate) && isNil(endDate)) {\n const year = startDate.year();\n const endDate = dayjs()\n .year(year + 1)\n .month(8)\n .endOf('month');\n onChange?.([startDate, endDate].map((d) => d.format(VALUE_MONTH_FORMATTER)).join(','));\n }\n }}\n customInput={\n <DatePickerInput\n className={clsx('w-224', className)}\n label={label}\n variant={variant}\n sx={sx}\n {...textFieldProps}\n useRange\n disabledClearButton={disabledClearButton}\n reset={() => onChange?.('')}\n valueFormatter={VALUE_MONTH_FORMATTER}\n />\n }\n />\n );\n};\n\nexport { OwpYearRangePicker };\n"],"names":["registerLocale","ko","enUS","setDefaultLocale","isNill","__name","v","isNull","isNil","OwpYearRangePicker","className","label","variant","sx","value","fullWidth","disabledClearButton","disabledFutureDates","onChange","textFieldProps","datePickerProps","i18n","useOwpTranslation","selectsMultiple","selectsRange","selected","passedStartDate","passedEndDate","resolvedDatePickerProps","datePickerLocale","startDate","endDate","useMemo","dayjs","VALUE_MONTH_FORMATTER","handleSelect","dates","isEmpty","start","year","displayValue","d","jsx","ReactDatePicker","CalendarContainer","clsx","_a","_b","DatePickerInput"],"mappings":"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"}
|
|
@@ -5,7 +5,7 @@ import L from "../../../node_modules/.pnpm/@mui_icons-material@7.3.9_@mui_materi
|
|
|
5
5
|
import Q from "../../../node_modules/.pnpm/@mui_icons-material@7.3.9_@mui_material@7.3.9_@emotion_react@11.14.0_@types_react@19.2._dc2be6bc014bebdac88a574e3e02c144/node_modules/@mui/icons-material/esm/CalendarMonth.js";
|
|
6
6
|
import U from "../../../node_modules/.pnpm/@mui_icons-material@7.3.9_@mui_material@7.3.9_@emotion_react@11.14.0_@types_react@19.2._dc2be6bc014bebdac88a574e3e02c144/node_modules/@mui/icons-material/esm/Clear.js";
|
|
7
7
|
import { IconButton as b, InputAdornment as W, TextField as X } from "@mui/material";
|
|
8
|
-
import z from "dayjs";
|
|
8
|
+
import { owpDayjs as z } from "../../../dayjs.js";
|
|
9
9
|
import { forwardRef as Y } from "react";
|
|
10
10
|
const P = /* @__PURE__ */ a((t, m) => {
|
|
11
11
|
if (t) {
|
|
@@ -29,8 +29,8 @@ const P = /* @__PURE__ */ a((t, m) => {
|
|
|
29
29
|
inputElementRef: B,
|
|
30
30
|
onClick: i,
|
|
31
31
|
onFocus: g,
|
|
32
|
-
onKeyDown:
|
|
33
|
-
onInputFocus:
|
|
32
|
+
onKeyDown: o,
|
|
33
|
+
onInputFocus: l,
|
|
34
34
|
onInputKeyDown: h,
|
|
35
35
|
inputRef: R,
|
|
36
36
|
...x
|
|
@@ -39,9 +39,9 @@ const P = /* @__PURE__ */ a((t, m) => {
|
|
|
39
39
|
const T = N || d, V = /* @__PURE__ */ a((r) => {
|
|
40
40
|
p == null || p(), i == null || i(r);
|
|
41
41
|
}, "handleInputClick"), q = /* @__PURE__ */ a((r) => {
|
|
42
|
-
|
|
42
|
+
l == null || l(r), g == null || g(r);
|
|
43
43
|
}, "handleInputFocus"), E = /* @__PURE__ */ a((r) => {
|
|
44
|
-
h == null || h(r),
|
|
44
|
+
h == null || h(r), o == null || o(r);
|
|
45
45
|
}, "handleInputKeyDown"), G = /* @__PURE__ */ a((r) => {
|
|
46
46
|
r.stopPropagation(), e == null || e(), i == null || i(r);
|
|
47
47
|
}, "handleIconClick");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePickerInput.js","sources":["../../../../src/components/OwpPicker/internal/DatePickerInput.tsx"],"sourcesContent":["import AccessTimeIcon from '@mui/icons-material/AccessTime';\nimport CalendarMonthIcon from '@mui/icons-material/CalendarMonth';\nimport ClearIcon from '@mui/icons-material/Clear';\nimport { IconButton, InputAdornment, TextField, TextFieldProps } from '@mui/material';\nimport dayjs from 'dayjs';\nimport { type MouseEventHandler, type Ref, forwardRef } from 'react';\n\ntype DatePickerValue = string | Date;\ntype TextFieldClickEvent = Parameters<NonNullable<TextFieldProps['onClick']>>[0];\ntype TextFieldFocusEventHandler = NonNullable<TextFieldProps['onFocus']>;\ntype TextFieldKeyDownEventHandler = NonNullable<TextFieldProps['onKeyDown']>;\n\ninterface OwnProps {\n valueFormatter?: string;\n value?: DatePickerValue;\n useRange?: boolean;\n showTimeSelect?: boolean;\n showTimeSelectOnly?: boolean;\n disabledClearButton?: boolean;\n reset?: () => void;\n onInputAreaClick?: VoidFunction;\n onIconClick?: VoidFunction;\n inputElementRef?: Ref<HTMLInputElement>;\n onInputFocus?: TextFieldFocusEventHandler;\n onInputKeyDown?: TextFieldKeyDownEventHandler;\n}\n\n/** input ref 값 할당 */\nconst assignInputRef = (\n inputRef: Ref<HTMLInputElement> | undefined,\n value: HTMLInputElement | null,\n) => {\n if (!inputRef) {\n return;\n }\n\n if (typeof inputRef === 'function') {\n inputRef(value);\n return;\n }\n\n (inputRef as { current: HTMLInputElement | null }).current = value;\n};\n\n/**\n * DatePickerInput 컴포넌트\n * @param value 현재 값\n * @param valueFormatter valueFormatter 값\n * @param useRange useRange 값\n * @param showTimeSelect showTimeSelect 값\n * @param showTimeSelectOnly showTimeSelectOnly 값\n * @param disabledClearButton disabledClearButton 값\n * @param reset reset 값\n * @param onInputAreaClick 입력 영역 클릭 핸들러\n * @param onIconClick 아이콘 클릭 핸들러\n * @param ref forwardRef 참조\n */\nexport const DatePickerInput = forwardRef(\n (\n {\n value,\n valueFormatter,\n useRange,\n showTimeSelect,\n showTimeSelectOnly,\n disabledClearButton,\n reset,\n onInputAreaClick,\n onIconClick,\n inputElementRef,\n onClick,\n onFocus,\n onKeyDown,\n onInputFocus,\n onInputKeyDown,\n inputRef: inputRefProp,\n ...restProps\n }: TextFieldProps & OwnProps,\n ref,\n ) => {\n const isTimePickerMode = showTimeSelect || showTimeSelectOnly;\n\n const handleInputClick: MouseEventHandler<HTMLDivElement> = (event) => {\n onInputAreaClick?.();\n onClick?.(event);\n };\n\n const handleInputFocus: TextFieldFocusEventHandler = (event) => {\n onInputFocus?.(event);\n onFocus?.(event);\n };\n\n const handleInputKeyDown: TextFieldKeyDownEventHandler = (event) => {\n onInputKeyDown?.(event);\n onKeyDown?.(event);\n };\n\n const handleIconClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n event.stopPropagation();\n onIconClick?.();\n onClick?.(event as unknown as TextFieldClickEvent);\n };\n\n return (\n <TextField\n variant=\"standard\"\n {...restProps}\n inputRef={(input) => {\n assignInputRef(ref as Ref<HTMLInputElement>, input);\n assignInputRef(inputElementRef, input);\n assignInputRef(inputRefProp, input);\n }}\n onClick={handleInputClick}\n onFocus={handleInputFocus}\n onKeyDown={handleInputKeyDown}\n value={\n value\n ? useRange\n ? typeof value === 'string'\n ? value\n .split(' - ')\n .map((v: string) => (dayjs(v).isValid() ? dayjs(v).format(valueFormatter) : ''))\n .join(' ~ ')\n : ''\n : showTimeSelectOnly && typeof value === 'string'\n ? value\n : dayjs(value).format(valueFormatter)\n : ''\n }\n slotProps={{\n ...restProps.slotProps,\n input: {\n readOnly: true,\n endAdornment: (\n <InputAdornment position=\"end\">\n {!disabledClearButton && (\n <IconButton\n className=\"m-0 p-0\"\n size=\"small\"\n tabIndex={-1}\n onClick={(evt) => {\n evt.stopPropagation();\n reset?.();\n }}\n >\n <ClearIcon fontSize=\"small\" />\n </IconButton>\n )}\n <IconButton\n className=\"m-0 p-0\"\n size=\"small\"\n tabIndex={-1}\n aria-label={isTimePickerMode ? 'time-picker-trigger' : 'date-picker-trigger'}\n onClick={handleIconClick}\n >\n {showTimeSelectOnly ? (\n <AccessTimeIcon fontSize=\"small\" />\n ) : (\n <CalendarMonthIcon fontSize=\"small\" />\n )}\n </IconButton>\n </InputAdornment>\n ),\n ...restProps.slotProps?.input,\n },\n }}\n />\n );\n },\n);\n"],"names":["assignInputRef","__name","inputRef","value","DatePickerInput","forwardRef","valueFormatter","useRange","showTimeSelect","showTimeSelectOnly","disabledClearButton","reset","onInputAreaClick","onIconClick","inputElementRef","onClick","onFocus","onKeyDown","onInputFocus","onInputKeyDown","inputRefProp","restProps","ref","isTimePickerMode","handleInputClick","event","handleInputFocus","handleInputKeyDown","handleIconClick","jsx","TextField","input","v","dayjs","jsxs","InputAdornment","IconButton","evt","ClearIcon","AccessTimeIcon","CalendarMonthIcon","_a"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"DatePickerInput.js","sources":["../../../../src/components/OwpPicker/internal/DatePickerInput.tsx"],"sourcesContent":["import AccessTimeIcon from '@mui/icons-material/AccessTime';\nimport CalendarMonthIcon from '@mui/icons-material/CalendarMonth';\nimport ClearIcon from '@mui/icons-material/Clear';\nimport { IconButton, InputAdornment, TextField, TextFieldProps } from '@mui/material';\nimport dayjs from '@/dayjs';\nimport { type MouseEventHandler, type Ref, forwardRef } from 'react';\n\ntype DatePickerValue = string | Date;\ntype TextFieldClickEvent = Parameters<NonNullable<TextFieldProps['onClick']>>[0];\ntype TextFieldFocusEventHandler = NonNullable<TextFieldProps['onFocus']>;\ntype TextFieldKeyDownEventHandler = NonNullable<TextFieldProps['onKeyDown']>;\n\ninterface OwnProps {\n valueFormatter?: string;\n value?: DatePickerValue;\n useRange?: boolean;\n showTimeSelect?: boolean;\n showTimeSelectOnly?: boolean;\n disabledClearButton?: boolean;\n reset?: () => void;\n onInputAreaClick?: VoidFunction;\n onIconClick?: VoidFunction;\n inputElementRef?: Ref<HTMLInputElement>;\n onInputFocus?: TextFieldFocusEventHandler;\n onInputKeyDown?: TextFieldKeyDownEventHandler;\n}\n\n/** input ref 값 할당 */\nconst assignInputRef = (\n inputRef: Ref<HTMLInputElement> | undefined,\n value: HTMLInputElement | null,\n) => {\n if (!inputRef) {\n return;\n }\n\n if (typeof inputRef === 'function') {\n inputRef(value);\n return;\n }\n\n (inputRef as { current: HTMLInputElement | null }).current = value;\n};\n\n/**\n * DatePickerInput 컴포넌트\n * @param value 현재 값\n * @param valueFormatter valueFormatter 값\n * @param useRange useRange 값\n * @param showTimeSelect showTimeSelect 값\n * @param showTimeSelectOnly showTimeSelectOnly 값\n * @param disabledClearButton disabledClearButton 값\n * @param reset reset 값\n * @param onInputAreaClick 입력 영역 클릭 핸들러\n * @param onIconClick 아이콘 클릭 핸들러\n * @param ref forwardRef 참조\n */\nexport const DatePickerInput = forwardRef(\n (\n {\n value,\n valueFormatter,\n useRange,\n showTimeSelect,\n showTimeSelectOnly,\n disabledClearButton,\n reset,\n onInputAreaClick,\n onIconClick,\n inputElementRef,\n onClick,\n onFocus,\n onKeyDown,\n onInputFocus,\n onInputKeyDown,\n inputRef: inputRefProp,\n ...restProps\n }: TextFieldProps & OwnProps,\n ref,\n ) => {\n const isTimePickerMode = showTimeSelect || showTimeSelectOnly;\n\n const handleInputClick: MouseEventHandler<HTMLDivElement> = (event) => {\n onInputAreaClick?.();\n onClick?.(event);\n };\n\n const handleInputFocus: TextFieldFocusEventHandler = (event) => {\n onInputFocus?.(event);\n onFocus?.(event);\n };\n\n const handleInputKeyDown: TextFieldKeyDownEventHandler = (event) => {\n onInputKeyDown?.(event);\n onKeyDown?.(event);\n };\n\n const handleIconClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n event.stopPropagation();\n onIconClick?.();\n onClick?.(event as unknown as TextFieldClickEvent);\n };\n\n return (\n <TextField\n variant=\"standard\"\n {...restProps}\n inputRef={(input) => {\n assignInputRef(ref as Ref<HTMLInputElement>, input);\n assignInputRef(inputElementRef, input);\n assignInputRef(inputRefProp, input);\n }}\n onClick={handleInputClick}\n onFocus={handleInputFocus}\n onKeyDown={handleInputKeyDown}\n value={\n value\n ? useRange\n ? typeof value === 'string'\n ? value\n .split(' - ')\n .map((v: string) => (dayjs(v).isValid() ? dayjs(v).format(valueFormatter) : ''))\n .join(' ~ ')\n : ''\n : showTimeSelectOnly && typeof value === 'string'\n ? value\n : dayjs(value).format(valueFormatter)\n : ''\n }\n slotProps={{\n ...restProps.slotProps,\n input: {\n readOnly: true,\n endAdornment: (\n <InputAdornment position=\"end\">\n {!disabledClearButton && (\n <IconButton\n className=\"m-0 p-0\"\n size=\"small\"\n tabIndex={-1}\n onClick={(evt) => {\n evt.stopPropagation();\n reset?.();\n }}\n >\n <ClearIcon fontSize=\"small\" />\n </IconButton>\n )}\n <IconButton\n className=\"m-0 p-0\"\n size=\"small\"\n tabIndex={-1}\n aria-label={isTimePickerMode ? 'time-picker-trigger' : 'date-picker-trigger'}\n onClick={handleIconClick}\n >\n {showTimeSelectOnly ? (\n <AccessTimeIcon fontSize=\"small\" />\n ) : (\n <CalendarMonthIcon fontSize=\"small\" />\n )}\n </IconButton>\n </InputAdornment>\n ),\n ...restProps.slotProps?.input,\n },\n }}\n />\n );\n },\n);\n"],"names":["assignInputRef","__name","inputRef","value","DatePickerInput","forwardRef","valueFormatter","useRange","showTimeSelect","showTimeSelectOnly","disabledClearButton","reset","onInputAreaClick","onIconClick","inputElementRef","onClick","onFocus","onKeyDown","onInputFocus","onInputKeyDown","inputRefProp","restProps","ref","isTimePickerMode","handleInputClick","event","handleInputFocus","handleInputKeyDown","handleIconClick","jsx","TextField","input","v","dayjs","jsxs","InputAdornment","IconButton","evt","ClearIcon","AccessTimeIcon","CalendarMonthIcon","_a"],"mappings":"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"}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
var
|
|
2
|
-
var t = (
|
|
3
|
-
import { jsxs as
|
|
4
|
-
import
|
|
5
|
-
import { CircularProgress as
|
|
6
|
-
import { useHeaderWrapState as
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
const
|
|
10
|
-
switch (
|
|
1
|
+
var H = Object.defineProperty;
|
|
2
|
+
var t = (l, r) => H(l, "name", { value: r, configurable: !0 });
|
|
3
|
+
import { jsxs as n, jsx as e } from "../../node_modules/.pnpm/@emotion_react@11.14.0_@types_react@19.2.14_react@19.2.4/node_modules/@emotion/react/jsx-runtime/dist/emotion-react-jsx-runtime.browser.esm.js";
|
|
4
|
+
import V from "../../node_modules/.pnpm/@mui_icons-material@7.3.9_@mui_material@7.3.9_@emotion_react@11.14.0_@types_react@19.2._dc2be6bc014bebdac88a574e3e02c144/node_modules/@mui/icons-material/esm/Fitbit.js";
|
|
5
|
+
import { CircularProgress as W, Divider as _ } from "@mui/material";
|
|
6
|
+
import { useHeaderWrapState as z } from "../../hooks/useHeaderWrapState.js";
|
|
7
|
+
import { useMinimumVisibleState as F } from "../../hooks/internal/useMinimumVisibleState.js";
|
|
8
|
+
import { clsx as s } from "../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js";
|
|
9
|
+
const g = /* @__PURE__ */ t((l) => {
|
|
10
|
+
switch (l) {
|
|
11
11
|
case "inherit":
|
|
12
12
|
return "1em";
|
|
13
13
|
case "small":
|
|
@@ -19,120 +19,127 @@ const h = /* @__PURE__ */ t((m) => {
|
|
|
19
19
|
default:
|
|
20
20
|
return 24;
|
|
21
21
|
}
|
|
22
|
-
}, "getTitleIconSize"),
|
|
23
|
-
className:
|
|
24
|
-
title:
|
|
22
|
+
}, "getTitleIconSize"), J = /* @__PURE__ */ t(({
|
|
23
|
+
className: l,
|
|
24
|
+
title: r,
|
|
25
25
|
disableTitleIcon: u,
|
|
26
|
-
headerProps:
|
|
27
|
-
|
|
28
|
-
|
|
26
|
+
headerProps: m,
|
|
27
|
+
titleContainerClassName: x,
|
|
28
|
+
titleIconClassName: d,
|
|
29
|
+
titleTextClassName: p,
|
|
30
|
+
actions: f,
|
|
29
31
|
leftSlot: a,
|
|
30
|
-
centerSlot:
|
|
32
|
+
centerSlot: i,
|
|
31
33
|
children: N,
|
|
32
|
-
iconSize:
|
|
33
|
-
loading:
|
|
34
|
+
iconSize: o,
|
|
35
|
+
loading: y,
|
|
36
|
+
showDivider: h = !1
|
|
34
37
|
}) => {
|
|
35
|
-
const w =
|
|
36
|
-
s,
|
|
37
|
-
a,
|
|
38
|
+
const w = r != null && r !== "", j = !!(a || i), v = F(y), { containerRef: R, titleRef: b, slotsRef: k, actionsRef: O, isWrapped: c } = z([
|
|
38
39
|
r,
|
|
39
|
-
|
|
40
|
+
a,
|
|
41
|
+
i,
|
|
42
|
+
f,
|
|
40
43
|
u,
|
|
44
|
+
o,
|
|
45
|
+
v,
|
|
46
|
+
x,
|
|
41
47
|
d,
|
|
42
|
-
|
|
43
|
-
]),
|
|
44
|
-
return /* @__PURE__ */
|
|
45
|
-
|
|
46
|
-
/* @__PURE__ */
|
|
47
|
-
|
|
48
|
+
p
|
|
49
|
+
]), B = !!(w || f || a || i);
|
|
50
|
+
return /* @__PURE__ */ n("div", { className: s("OwpSection-root flex h-full w-full flex-col", l), children: [
|
|
51
|
+
B && /* @__PURE__ */ n("div", { className: s("OwpSection-header min-h-36 w-full", !h && "mb-12"), children: [
|
|
52
|
+
/* @__PURE__ */ n(
|
|
53
|
+
"div",
|
|
48
54
|
{
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
55
|
+
ref: R,
|
|
56
|
+
...m,
|
|
57
|
+
className: s(
|
|
58
|
+
"min-h-36 w-full",
|
|
59
|
+
c ? "flex flex-col gap-8" : "grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-x-8 gap-y-8",
|
|
60
|
+
m == null ? void 0 : m.className
|
|
61
|
+
),
|
|
62
|
+
children: [
|
|
63
|
+
w && /* @__PURE__ */ n(
|
|
64
|
+
"div",
|
|
65
|
+
{
|
|
66
|
+
ref: b,
|
|
67
|
+
className: s(
|
|
68
|
+
"flex shrink-0 items-center gap-8 whitespace-nowrap",
|
|
69
|
+
c ? "order-1 self-start" : "col-start-1",
|
|
70
|
+
x
|
|
71
|
+
),
|
|
72
|
+
children: [
|
|
73
|
+
!u && (v ? /* @__PURE__ */ e(
|
|
74
|
+
W,
|
|
75
|
+
{
|
|
76
|
+
className: s("shrink-0", d),
|
|
77
|
+
size: g(o),
|
|
78
|
+
sx: { color: "secondary.main" }
|
|
79
|
+
}
|
|
80
|
+
) : /* @__PURE__ */ e(
|
|
81
|
+
V,
|
|
82
|
+
{
|
|
83
|
+
className: s("shrink-0", d),
|
|
84
|
+
sx: { fontSize: g(o), color: "secondary.main" }
|
|
85
|
+
}
|
|
86
|
+
)),
|
|
87
|
+
/* @__PURE__ */ e(
|
|
88
|
+
"div",
|
|
89
|
+
{
|
|
90
|
+
className: s(
|
|
91
|
+
"shrink-0 whitespace-nowrap text-2xl font-medium",
|
|
92
|
+
p
|
|
93
|
+
),
|
|
94
|
+
children: r
|
|
95
|
+
}
|
|
96
|
+
)
|
|
97
|
+
]
|
|
98
|
+
}
|
|
99
|
+
),
|
|
100
|
+
j && /* @__PURE__ */ e(
|
|
101
|
+
"div",
|
|
102
|
+
{
|
|
103
|
+
ref: k,
|
|
104
|
+
className: s(
|
|
105
|
+
"flex max-w-full",
|
|
106
|
+
c ? "order-2 self-end justify-end" : "col-start-2 justify-self-center"
|
|
107
|
+
),
|
|
108
|
+
children: /* @__PURE__ */ n(
|
|
109
|
+
"div",
|
|
86
110
|
{
|
|
87
|
-
className:
|
|
88
|
-
|
|
111
|
+
className: s(
|
|
112
|
+
"flex max-w-full items-center gap-8",
|
|
113
|
+
c ? "flex-wrap justify-end" : "flex-nowrap justify-center"
|
|
114
|
+
),
|
|
115
|
+
children: [
|
|
116
|
+
a && /* @__PURE__ */ e("div", { className: "max-w-full", children: a }),
|
|
117
|
+
i && /* @__PURE__ */ e("div", { className: "max-w-full", children: i })
|
|
118
|
+
]
|
|
89
119
|
}
|
|
90
|
-
)
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
),
|
|
110
|
-
children: [
|
|
111
|
-
a && /* @__PURE__ */ e("div", { className: "max-w-full", children: a }),
|
|
112
|
-
r && /* @__PURE__ */ e("div", { className: "max-w-full", children: r })
|
|
113
|
-
]
|
|
114
|
-
}
|
|
115
|
-
)
|
|
116
|
-
}
|
|
117
|
-
),
|
|
118
|
-
c && /* @__PURE__ */ e(
|
|
119
|
-
"div",
|
|
120
|
-
{
|
|
121
|
-
ref: j,
|
|
122
|
-
className: i(
|
|
123
|
-
"flex max-w-full justify-end",
|
|
124
|
-
n ? "order-3 self-end" : "col-start-3 justify-self-end"
|
|
125
|
-
),
|
|
126
|
-
children: /* @__PURE__ */ e("div", { className: "flex max-w-full flex-wrap items-center gap-8", children: c })
|
|
127
|
-
}
|
|
128
|
-
)
|
|
129
|
-
]
|
|
130
|
-
}
|
|
131
|
-
) })),
|
|
120
|
+
)
|
|
121
|
+
}
|
|
122
|
+
),
|
|
123
|
+
f && /* @__PURE__ */ e(
|
|
124
|
+
"div",
|
|
125
|
+
{
|
|
126
|
+
ref: O,
|
|
127
|
+
className: s(
|
|
128
|
+
"flex max-w-full justify-end",
|
|
129
|
+
c ? "order-3 self-end" : "col-start-3 justify-self-end"
|
|
130
|
+
),
|
|
131
|
+
children: /* @__PURE__ */ e("div", { className: "flex max-w-full flex-wrap items-center gap-8", children: f })
|
|
132
|
+
}
|
|
133
|
+
)
|
|
134
|
+
]
|
|
135
|
+
}
|
|
136
|
+
),
|
|
137
|
+
h && /* @__PURE__ */ e(_, { className: "my-12" })
|
|
138
|
+
] }),
|
|
132
139
|
/* @__PURE__ */ e("div", { className: "OwpSection-body flex min-h-0 flex-1 flex-col", children: N })
|
|
133
140
|
] });
|
|
134
141
|
}, "OwpSection");
|
|
135
142
|
export {
|
|
136
|
-
|
|
143
|
+
J as OwpSection
|
|
137
144
|
};
|
|
138
145
|
//# sourceMappingURL=OwpSection.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OwpSection.js","sources":["../../../src/components/OwpSection/OwpSection.tsx"],"sourcesContent":["import FitbitIcon from '@mui/icons-material/Fitbit';\nimport { CircularProgress, Divider, type IconProps } from '@mui/material';\nimport { useHeaderWrapState } from '@/hooks/useHeaderWrapState';\nimport clsx from 'clsx';\nimport type { HTMLAttributes, ReactNode } from 'react';\
|
|
1
|
+
{"version":3,"file":"OwpSection.js","sources":["../../../src/components/OwpSection/OwpSection.tsx"],"sourcesContent":["import FitbitIcon from '@mui/icons-material/Fitbit';\nimport { CircularProgress, Divider, type IconProps } from '@mui/material';\nimport { useHeaderWrapState } from '@/hooks/useHeaderWrapState';\nimport { useMinimumVisibleState } from '@/hooks/internal/useMinimumVisibleState';\nimport clsx from 'clsx';\nimport type { HTMLAttributes, ReactNode } from 'react';\n\n/**\n * 제목 아이콘 크기\n * @param iconSize MUI 아이콘 크기\n */\nconst getTitleIconSize = (iconSize?: IconProps['fontSize']) => {\n switch (iconSize) {\n case 'inherit':\n return '1em';\n case 'small':\n return '1.25rem';\n case 'large':\n return '2.1875rem';\n case 'medium':\n return '1.5rem';\n default:\n return 24;\n }\n};\n\ninterface OwpSectionProps {\n className?: string;\n headerProps?: HTMLAttributes<HTMLDivElement>;\n titleContainerClassName?: string;\n titleIconClassName?: string;\n titleTextClassName?: string;\n disableTitleIcon?: boolean;\n title?: ReactNode;\n actions?: ReactNode;\n leftSlot?: ReactNode;\n centerSlot?: ReactNode;\n children?: ReactNode;\n iconSize?: IconProps['fontSize'];\n loading?: boolean;\n showDivider?: boolean;\n}\n\n/**\n * OwpSection 컴포넌트\n * @param className CSS 클래스명\n * @param title 제목\n * @param disableTitleIcon disableTitleIcon 값\n * @param headerProps headerProps props\n * @param titleContainerClassName 제목 영역 CSS 클래스명\n * @param titleIconClassName 제목 아이콘 CSS 클래스명\n * @param titleTextClassName 제목 텍스트 CSS 클래스명\n * @param leftSlot leftSlot 값\n * @param centerSlot centerSlot 값\n * @param actions 액션 영역\n * @param loading 로딩 상태\n * @param showDivider 구분선 표시 여부\n */\nconst OwpSection = ({\n className,\n title,\n disableTitleIcon,\n headerProps,\n titleContainerClassName,\n titleIconClassName,\n titleTextClassName,\n actions,\n leftSlot,\n centerSlot,\n children,\n iconSize,\n loading,\n showDivider = false,\n}: OwpSectionProps) => {\n const hasTitle = title !== undefined && title !== null && title !== '';\n const hasSlots = Boolean(leftSlot || centerSlot);\n const isLoadingVisible = useMinimumVisibleState(loading);\n const { containerRef, titleRef, slotsRef, actionsRef, isWrapped } = useHeaderWrapState([\n title,\n leftSlot,\n centerSlot,\n actions,\n disableTitleIcon,\n iconSize,\n isLoadingVisible,\n titleContainerClassName,\n titleIconClassName,\n titleTextClassName,\n ]);\n const shouldRenderHeader = Boolean(hasTitle || actions || leftSlot || centerSlot);\n\n return (\n <div className={clsx('OwpSection-root flex h-full w-full flex-col', className)}>\n {shouldRenderHeader && (\n <div className={clsx('OwpSection-header min-h-36 w-full', !showDivider && 'mb-12')}>\n <div\n ref={containerRef}\n {...headerProps}\n className={clsx(\n 'min-h-36 w-full',\n isWrapped\n ? 'flex flex-col gap-8'\n : 'grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-x-8 gap-y-8',\n headerProps?.className,\n )}\n >\n {hasTitle && (\n <div\n ref={titleRef}\n className={clsx(\n 'flex shrink-0 items-center gap-8 whitespace-nowrap',\n isWrapped ? 'order-1 self-start' : 'col-start-1',\n titleContainerClassName,\n )}\n >\n {!disableTitleIcon &&\n (isLoadingVisible ? (\n <CircularProgress\n className={clsx('shrink-0', titleIconClassName)}\n size={getTitleIconSize(iconSize)}\n sx={{ color: 'secondary.main' }}\n />\n ) : (\n <FitbitIcon\n className={clsx('shrink-0', titleIconClassName)}\n sx={{ fontSize: getTitleIconSize(iconSize), color: 'secondary.main' }}\n />\n ))}\n <div\n className={clsx(\n 'shrink-0 whitespace-nowrap text-2xl font-medium',\n titleTextClassName,\n )}\n >\n {title}\n </div>\n </div>\n )}\n {hasSlots && (\n <div\n ref={slotsRef}\n className={clsx(\n 'flex max-w-full',\n isWrapped ? 'order-2 self-end justify-end' : 'col-start-2 justify-self-center',\n )}\n >\n <div\n className={clsx(\n 'flex max-w-full items-center gap-8',\n isWrapped ? 'flex-wrap justify-end' : 'flex-nowrap justify-center',\n )}\n >\n {leftSlot && <div className=\"max-w-full\">{leftSlot}</div>}\n {centerSlot && <div className=\"max-w-full\">{centerSlot}</div>}\n </div>\n </div>\n )}\n {actions && (\n <div\n ref={actionsRef}\n className={clsx(\n 'flex max-w-full justify-end',\n isWrapped ? 'order-3 self-end' : 'col-start-3 justify-self-end',\n )}\n >\n <div className=\"flex max-w-full flex-wrap items-center gap-8\">{actions}</div>\n </div>\n )}\n </div>\n {showDivider && <Divider className=\"my-12\" />}\n </div>\n )}\n <div className=\"OwpSection-body flex min-h-0 flex-1 flex-col\">{children}</div>\n </div>\n );\n};\n\nexport { OwpSection };\n"],"names":["getTitleIconSize","__name","iconSize","OwpSection","className","title","disableTitleIcon","headerProps","titleContainerClassName","titleIconClassName","titleTextClassName","actions","leftSlot","centerSlot","children","loading","showDivider","hasTitle","hasSlots","isLoadingVisible","useMinimumVisibleState","containerRef","titleRef","slotsRef","actionsRef","isWrapped","useHeaderWrapState","shouldRenderHeader","clsx","jsxs","jsx","CircularProgress","FitbitIcon","Divider"],"mappings":"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"}
|