v2.1.0

Author: flamecommit

package/CHANGE.md

@@ -1,3 +1,7 @@
+## 2.1.0
+
+- hourStep, minuteStep, secondStep 옵션이 사라지고 timeStep 옵션으로 합쳐집니다.
+
 ## 2.0.0
 
 - Datepicker와 Rangepicker에 키보드 입력 기능이 추가되었습니다.

package/src/components/Datepicker.tsx

@@ -4,6 +4,7 @@ import { Fragment, useEffect, useMemo, useRef, useState } from 'react';
 import { NAME_SPACE } from '../constants/core';
 import {
   IDateValue,
+  ITimeStep,
   ITimeValue,
   ITimeselector,
   TIsVisible,
@@ -33,6 +34,7 @@ interface IProps {
   placeholder?: string;
   disabled?: boolean;
   timeselector?: false | ITimeselector;
+  timeStep?: ITimeStep;
   hourStep?: number;
   minuteStep?: number;
   secondStep?: number;
@@ -54,9 +56,7 @@ function Datepicker({
   placeholder = '',
   disabled = false,
   timeselector = false,
-  hourStep = 1,
-  minuteStep = 1,
-  secondStep = 1,
+  timeStep = { hour: 1, minute: 1, second: 1 },
   onChange,
 }: IProps) {
   const initialValueFormat = timeselector
@@ -241,9 +241,7 @@ function Datepicker({
               timeValue={timeValue}
               setTimeValue={setTimeValue}
               timeselector={timeselector}
-              hourStep={hourStep}
-              minuteStep={minuteStep}
-              secondStep={secondStep}
+              timeStep={timeStep}
             />
           </div>
         )}

package/src/components/timeselector/Selector.tsx

@@ -2,25 +2,21 @@
 
 import { Fragment } from 'react';
 import { NAME_SPACE } from '../../constants/core';
-import { ITimeValue, ITimeselector } from '../../types/props';
+import { ITimeStep, ITimeValue, ITimeselector } from '../../types/props';
 import TimeselectorSelectorList from './SelectorList';
 
 interface IProps {
   timeValue: ITimeValue;
   setTimeValue: (value: ITimeValue) => void;
   timeselector: ITimeselector;
-  hourStep: number;
-  minuteStep: number;
-  secondStep: number;
+  timeStep: ITimeStep;
 }
 
 function TimeselectorSelector({
   timeValue,
   setTimeValue,
   timeselector,
-  hourStep,
-  minuteStep,
-  secondStep,
+  timeStep,
 }: IProps) {
   const generateArray = (step: number, max: number) => {
     const hours = [];
@@ -32,13 +28,13 @@ function TimeselectorSelector({
 
   const selectors = {
     hour: {
-      items: generateArray(hourStep, 23),
+      items: generateArray(timeStep.hour || 1, 23),
     },
     minute: {
-      items: generateArray(minuteStep, 59),
+      items: generateArray(timeStep.minute || 1, 59),
     },
     second: {
-      items: generateArray(secondStep, 59),
+      items: generateArray(timeStep.second || 1, 59),
     },
   };
 

package/src/types/props.d.ts

@@ -16,4 +16,10 @@ export interface IDateValue {
   date: number | null;
 }
 
+export interface ITimeStep {
+  hour?: number;
+  minute?: number;
+  second?: number;
+}
+
 export type TIsVisible = boolean | 'start' | 'end';

test/src/App.tsx

@@ -41,16 +41,18 @@ function App() {
         />
       </section>
       <section>
-        <h3>Timeselector</h3>
+        <h3>Timeselector timeStep</h3>
         <Datepicker
           timeselector={{
             hour: true,
             minute: true,
             second: true,
           }}
-          hourStep={1}
-          minuteStep={10}
-          secondStep={10}
+          timeStep={{
+            hour: 1,
+            minute: 15,
+            second: 10,
+          }}
         />
       </section>
       <section>