명칭 변경 : timeselector => timepicker

Author: flamecommit

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shinyongjun/react-datepicker",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
   "source": "./src/index.tsx",

package/src/assets/global.css

@@ -185,40 +185,40 @@
   color: #bbb;
 }
 
-/* timeselector */
-.react-datepicker__timeselector-container {
+/* timepicker */
+.react-datepicker__timepicker-container {
   display: flex;
   flex-flow: column;
   position: relative;
   border-left: 1px solid #ddd;
 }
-.react-datepicker__timeselector-header {
+.react-datepicker__timepicker-header {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 36px;
   flex-shrink: 0;
   border-bottom: 1px solid #ddd;
 }
-.react-datepicker__timeselector-selector {
+.react-datepicker__timepicker-selector {
   overflow: hidden;
   display: flex;
 }
-.react-datepicker__timeselector-list {
+.react-datepicker__timepicker-list {
   overflow-y: auto;
   width: 40px;
   /* -ms-overflow-style: none;
   scrollbar-width: none; */
   scrollbar-width: thin;
 }
-/* .react-datepicker__timeselector-selector
-  .react-datepicker__timeselector-list::-webkit-scrollbar {
+/* .react-datepicker__timepicker-selector
+  .react-datepicker__timepicker-list::-webkit-scrollbar {
   scrollbar-width: thin;
 } */
-.react-datepicker__timeselector-list-item {
+.react-datepicker__timepicker-list-item {
   display: block;
 }
-.react-datepicker__timeselector-list-button {
+.react-datepicker__timepicker-list-button {
   display: block;
   width: 100%;
   height: 36px;

package/src/components/Datepicker.tsx

@@ -6,7 +6,7 @@ import {
   IDateValue,
   ITimeStep,
   ITimeValue,
-  ITimeselector,
+  ITimepicker,
   TIsVisible,
 } from '../types/props';
 import { formatDate } from '../utils/datetime';
@@ -18,8 +18,8 @@ import DatepickerDecade from './datepicker/Decade';
 import DatepickerMonth from './datepicker/Month';
 import DatepickerYear from './datepicker/Year';
 import DatepickerInput from './input/DatepickerInput';
-import TimeselectorHeader from './timeselector/Header';
-import TimeselectorSelector from './timeselector/Selector';
+import TimepickerHeader from './timepicker/Header';
+import TimepickerSelector from './timepicker/Selector';
 
 interface IProps {
   initValue?: Date | null;
@@ -33,7 +33,7 @@ interface IProps {
   className?: string;
   placeholder?: string;
   disabled?: boolean;
-  timeselector?: false | ITimeselector;
+  timepicker?: false | ITimepicker;
   timeStep?: ITimeStep;
   hourStep?: number;
   minuteStep?: number;
@@ -55,13 +55,11 @@ function Datepicker({
   className = '',
   placeholder = '',
   disabled = false,
-  timeselector = false,
+  timepicker = false,
   timeStep = { hour: 1, minute: 1, second: 1 },
   onChange,
 }: IProps) {
-  const initialValueFormat = timeselector
-    ? 'YYYY-MM-DD hh:mm:ss'
-    : 'YYYY-MM-DD';
+  const initialValueFormat = timepicker ? 'YYYY-MM-DD hh:mm:ss' : 'YYYY-MM-DD';
   const comValueFormat = valueFormat ? valueFormat : initialValueFormat;
   const [value, setValue] = useState<Date | null>(initValue);
   const [timeValue, setTimeValue] = useState<ITimeValue>({
@@ -194,7 +192,7 @@ function Datepicker({
                       weekdayLabels={weekdayLabels}
                       timeValue={timeValue}
                       closesAfterChange={closesAfterChange}
-                      timeselector={timeselector}
+                      timepicker={timepicker}
                       setIsVisible={setIsVisible}
                     />
                   )}
@@ -226,21 +224,18 @@ function Datepicker({
             )}
           </div>
         </div>
-        {timeselector && (
+        {timepicker && (
           <div
-            className={`${NAME_SPACE}__timeselector-container`}
+            className={`${NAME_SPACE}__timepicker-container`}
             style={{
               height: containerHeight,
             }}
           >
-            <TimeselectorHeader
-              timeValue={timeValue}
-              timeselector={timeselector}
-            />
-            <TimeselectorSelector
+            <TimepickerHeader timeValue={timeValue} timepicker={timepicker} />
+            <TimepickerSelector
               timeValue={timeValue}
               setTimeValue={setTimeValue}
-              timeselector={timeselector}
+              timepicker={timepicker}
               timeStep={timeStep}
             />
           </div>

package/src/components/Rangepicker.tsx

@@ -6,7 +6,7 @@ import {
   IDateValue,
   ITimeStep,
   ITimeValue,
-  ITimeselector,
+  ITimepicker,
   TIsVisible,
 } from '../types/props';
 import { formatDate } from '../utils/datetime';
@@ -18,8 +18,8 @@ import DatepickerDecade from './datepicker/Decade';
 import DatepickerYear from './datepicker/Year';
 import RangepickerInput from './input/RangepickerInput';
 import RangepickerMonth from './rangepicker/Month';
-import TimeselectorHeader from './timeselector/Header';
-import TimeselectorSelector from './timeselector/Selector';
+import TimepickerHeader from './timepicker/Header';
+import TimepickerSelector from './timepicker/Selector';
 
 interface IProps {
   initStartValue?: Date | null;
@@ -34,7 +34,7 @@ interface IProps {
   placeholder?: string;
   disabled?: boolean;
   /** 시간선택기 사용 여부를 결정합니다. */
-  timeselector?: false | ITimeselector;
+  timepicker?: false | ITimepicker;
   timeStep?: ITimeStep;
   /** value의 변화를 감지하여 Callback함수를 실행합니다. */
   onChange?: (startDate: Date | null, endDate: Date | null) => void;
@@ -54,13 +54,11 @@ export default function Rangepicker({
   className = '',
   placeholder = '',
   disabled = false,
-  timeselector = false,
+  timepicker = false,
   timeStep = { hour: 1, minute: 1, second: 1 },
   onChange,
 }: IProps) {
-  const initialValueFormat = timeselector
-    ? 'YYYY-MM-DD hh:mm:ss'
-    : 'YYYY-MM-DD';
+  const initialValueFormat = timepicker ? 'YYYY-MM-DD hh:mm:ss' : 'YYYY-MM-DD';
   const comValueFormat = valueFormat ? valueFormat : initialValueFormat;
   const [startValue, setStartValue] = useState<Date | null>(initStartValue);
   const [endValue, setEndValue] = useState<Date | null>(initEndValue);
@@ -112,7 +110,7 @@ export default function Rangepicker({
   }, [isVisible, viewStartDate, viewEndDate]);
 
   useEffect(() => {
-    // if (closesAfterChange && !timeselector && endValue !== null) {
+    // if (closesAfterChange && !timepicker && endValue !== null) {
     //   setIsVisible(false);
     // }
     if (onChange && isMounted) {
@@ -348,23 +346,23 @@ export default function Rangepicker({
             )}
           </div>
         </div>
-        {timeselector && (
+        {timepicker && (
           <div
-            className={`${NAME_SPACE}__timeselector-container`}
+            className={`${NAME_SPACE}__timepicker-container`}
             style={{
               height: containerHeight,
             }}
           >
-            <TimeselectorHeader
+            <TimepickerHeader
               timeValue={isVisible === 'start' ? timeStartValue : timeEndValue}
-              timeselector={timeselector}
+              timepicker={timepicker}
             />
-            <TimeselectorSelector
+            <TimepickerSelector
               timeValue={isVisible === 'start' ? timeStartValue : timeEndValue}
               setTimeValue={
                 isVisible === 'start' ? setTimeStartValue : setTimeEndValue
               }
-              timeselector={timeselector}
+              timepicker={timepicker}
               timeStep={timeStep}
             />
           </div>

package/src/components/datepicker/Month.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { NAME_SPACE } from '../../constants/core';
-import { IDateValue, ITimeValue, ITimeselector } from '../../types/props';
+import { IDateValue, ITimeValue, ITimepicker } from '../../types/props';
 import { formatDate, formatDateValue } from '../../utils/datetime';
 
 interface Iprops {
@@ -12,7 +12,7 @@ interface Iprops {
   setDateValue: (value: IDateValue) => void;
   timeValue: ITimeValue;
   closesAfterChange: boolean;
-  timeselector: false | ITimeselector;
+  timepicker: false | ITimepicker;
   setIsVisible: (value: boolean) => void;
 }
 
@@ -24,7 +24,7 @@ function DatepicerMonth({
   weekdayLabels,
   timeValue,
   closesAfterChange,
-  timeselector,
+  timepicker,
   setIsVisible,
 }: Iprops) {
   const year = Math.ceil(monthPage / 12);
@@ -53,7 +53,7 @@ function DatepicerMonth({
     const formatedThisValue = formatDate(buttonDate, valueFormat);
 
     const handleClick = () => {
-      if (closesAfterChange && !timeselector) {
+      if (closesAfterChange && !timepicker) {
         setIsVisible(false);
       }
       setDateValue({

…e/src/components/timeselector/Header.tsx …age/src/components/timepicker/Header.tsxpackage/src/components/timeselector/Header.tsx renamed to package/src/components/timepicker/Header.tsx package/src/components/timeselector/Header.tsx renamed to package/src/components/timepicker/Header.tsx

@@ -1,34 +1,32 @@
 'use client';
 
 import { NAME_SPACE } from '../../constants/core';
-import { ITimeValue, ITimeselector } from '../../types/props';
+import { ITimeValue, ITimepicker } from '../../types/props';
 import { addLeadingZero } from '../../utils/string';
 
 interface IProps {
   timeValue: ITimeValue;
-  timeselector: ITimeselector;
+  timepicker: ITimepicker;
 }
 
-function TimeselectorHeader({ timeValue, timeselector }: IProps) {
+export default function TimepickerHeader({ timeValue, timepicker }: IProps) {
   return (
-    <div className={`${NAME_SPACE}__timeselector-header`}>
-      {timeselector.hour && (
+    <div className={`${NAME_SPACE}__timepicker-header`}>
+      {timepicker.hour && (
         <div className="hour">{addLeadingZero(timeValue.hour)}</div>
       )}
-      {timeselector.hour && timeselector.minute && (
+      {timepicker.hour && timepicker.minute && (
         <div className="delimiter">:</div>
       )}
-      {timeselector.minute && (
+      {timepicker.minute && (
         <div className="minute">{addLeadingZero(timeValue.minute)}</div>
       )}
-      {timeselector.minute && timeselector.second && (
+      {timepicker.minute && timepicker.second && (
         <div className="delimiter">:</div>
       )}
-      {timeselector.second && (
+      {timepicker.second && (
         <div className="second">{addLeadingZero(timeValue.second)}</div>
       )}
     </div>
   );
 }
-
-export default TimeselectorHeader;

…src/components/timeselector/Selector.tsx …e/src/components/timepicker/Selector.tsxpackage/src/components/timeselector/Selector.tsx renamed to package/src/components/timepicker/Selector.tsx package/src/components/timeselector/Selector.tsx renamed to package/src/components/timepicker/Selector.tsx

@@ -2,20 +2,20 @@
 
 import { Fragment } from 'react';
 import { NAME_SPACE } from '../../constants/core';
-import { ITimeStep, ITimeValue, ITimeselector } from '../../types/props';
-import TimeselectorSelectorList from './SelectorList';
+import { ITimeStep, ITimeValue, ITimepicker } from '../../types/props';
+import TimepickerSelectorList from './SelectorList';
 
 interface IProps {
   timeValue: ITimeValue;
   setTimeValue: (value: ITimeValue) => void;
-  timeselector: ITimeselector;
+  timepicker: ITimepicker;
   timeStep: ITimeStep;
 }
 
-function TimeselectorSelector({
+export default function TimepickerSelector({
   timeValue,
   setTimeValue,
-  timeselector,
+  timepicker,
   timeStep,
 }: IProps) {
   const generateArray = (step: number, max: number) => {
@@ -39,12 +39,12 @@ function TimeselectorSelector({
   };
 
   return (
-    <div className={`${NAME_SPACE}__timeselector-selector`}>
+    <div className={`${NAME_SPACE}__timepicker-selector`}>
       {Object.entries(selectors).map(([key, { items }]) => (
         <Fragment key={key}>
-          {timeselector[key as keyof ITimeselector] && (
-            <TimeselectorSelectorList
-              timeKey={key as keyof ITimeselector}
+          {timepicker[key as keyof ITimepicker] && (
+            <TimepickerSelectorList
+              timeKey={key as keyof ITimepicker}
               items={items}
               timeValue={timeValue}
               setTimeValue={setTimeValue}
@@ -55,5 +55,3 @@ function TimeselectorSelector({
     </div>
   );
 }
-
-export default TimeselectorSelector;

…components/timeselector/SelectorList.tsx …c/components/timepicker/SelectorList.tsxpackage/src/components/timeselector/SelectorList.tsx renamed to package/src/components/timepicker/SelectorList.tsx package/src/components/timeselector/SelectorList.tsx renamed to package/src/components/timepicker/SelectorList.tsx

@@ -2,17 +2,17 @@
 
 import { useEffect, useRef } from 'react';
 import { NAME_SPACE } from '../../constants/core';
-import { ITimeValue, ITimeselector } from '../../types/props';
+import { ITimeValue, ITimepicker } from '../../types/props';
 import { addLeadingZero } from '../../utils/string';
 
 interface IProps {
-  timeKey: keyof ITimeselector;
+  timeKey: keyof ITimepicker;
   items: number[];
   timeValue: ITimeValue;
   setTimeValue: (value: ITimeValue) => void;
 }
 
-function TimeselectorSelectorList({
+export default function TimepickerSelectorList({
   timeKey,
   items,
   timeValue,
@@ -34,12 +34,12 @@ function TimeselectorSelectorList({
   }, [items, timeKey, timeValue]);
 
   return (
-    <div className={`${NAME_SPACE}__timeselector-list`} ref={listRef}>
+    <div className={`${NAME_SPACE}__timepicker-list`} ref={listRef}>
       {items.map((item, index) => (
-        <div key={index} className={`${NAME_SPACE}__timeselector-list-item`}>
+        <div key={index} className={`${NAME_SPACE}__timepicker-list-item`}>
           <button
             type="button"
-            className={`${NAME_SPACE}__timeselector-list-button`}
+            className={`${NAME_SPACE}__timepicker-list-button`}
             data-active={item === timeValue[timeKey]}
             onClick={() =>
               setTimeValue({
@@ -55,5 +55,3 @@ function TimeselectorSelectorList({
     </div>
   );
 }
-
-export default TimeselectorSelectorList;