From de281b5565489a6eb8f9e48ca6db280a894790fb Mon Sep 17 00:00:00 2001 From: LeeMir Date: Wed, 3 Aug 2022 15:05:31 +0900 Subject: [PATCH] =?UTF-8?q?[Docs]=20=EC=98=81=EC=96=B4=20=EB=A6=AC?= =?UTF-8?q?=EB=93=9C=EB=AF=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README-EN.md | 192 +++++++++++++++++++++++++++++++++++++++++++++++++++ README.md | 11 ++- package.json | 2 +- 3 files changed, 203 insertions(+), 2 deletions(-) create mode 100644 README-EN.md diff --git a/README-EN.md b/README-EN.md new file mode 100644 index 0000000..505fce4 --- /dev/null +++ b/README-EN.md @@ -0,0 +1,192 @@ +# react-holiday-time-bar πŸ–οΈ + +
+ + + + + +
+ +
+ + +
+ +![image](https://user-images.githubusercontent.com/42960217/180602981-e30cc35a-f9c3-4b56-8cb4-093ff9e9f568.png) + +
+ +
+ +## Introduction + +Hello! This is react holiday time bar component. πŸ“… ⏰ + +In Korea, we can take annual leave / half-day leave / half-half day leave. + +It can help to select your leave and work time. + +## Get Started + +```bash +npm i react-holiday-time-bar +``` + +or + +```bash +yarn add react-holiday-time-bar +``` + +## Type + +This component use next type. + +```typescript +interface TimeValue { + hour: number; + minute: number; +} + +type TimeCellMode = 'none' | 'lunch' | 'holi' | 'work'; + +interface TimeCellValue { + mode: TimeCellMode; + hoverMode: TimeCellMode; +} +``` + +## Usage + +- **Cursor**'s position is always **Leave(Off) Start Time**. +- You can preview the results through the hover effect. +- If you click the cell, you can see the cell's background painted. +- `duration`: 2(half-half day) | 4(half-day) | 8(a day) + +```React +import React from 'react'; +import { HolidayTimeBar } from 'react-holiday-time-bar'; + +const App = () => { + return ( +
+ +
+ ); +}; + +export default App; +``` + +## Constant + +- Have to work: 9 hours (include lunch) +- Lunch time: 11:30 ~ 13:00 +- Time to min: 07:00 +- Time to max: 19:00 + +## Customize + +### useState + +- `times`, `setTimes` properties are operated when onClick. + - `times = { startWorkTime, endWorkTime, startHoliTime, endHoliTime }` + - *It must be useState* + +```React +import React, { useState } from 'react'; +import { HolidayTimeBar } from 'react-holiday-time-bar'; + +const App = () => { + const [times, setTimes] = useState({}); // { startWorkTime, endWorkTime, startHoliTime, endHoliTime } + console.log(times.startWorkTime); // { hour: 9, minute: 15 } + return ( +
+ + +
+ ); +}; + +export default App; +``` + +### viewText + +- `viewText={true}` shows time you chose. + - Refer to the below image. + +```React +import React from 'react'; +import { HolidayTimeBar } from 'react-holiday-time-bar'; + +const App = () => { + return ( +
+ +
+ ); +}; + +export default App; +``` + +![image](https://i.imgur.com/ic6hMHg.png) + +### Color + +```React +import React from 'react'; +import { HolidayTimeBar } from 'react-holiday-time-bar'; + +const App = () => { + return ( +
+ + +
+ ); +}; + +export default App; +``` + +### className + +- If you want to customize css, use `className`. + - `cellClassName`: cell's `className` + +```React +import React from 'react'; +import { HolidayTimeBar } from 'react-holiday-time-bar'; + +const App = () => { + return ( +
+ + +
+ ); +}; + +export default App; +``` diff --git a/README.md b/README.md index 4befa9c..b55840d 100644 --- a/README.md +++ b/README.md @@ -23,6 +23,8 @@ μ•ˆλ…•ν•˜μ„Έμš”! νœ΄κ°€(반차, 반반차) μ‹œκ°„ 선택 λ°” λ¦¬μ•‘νŠΈ μ»΄ν¬λ„ŒνŠΈμž…λ‹ˆλ‹€. πŸ“… ⏰ +[View In English](https://github.com/LeeMir/react-holiday-time-bar/blob/main/README-EN.md) + ## Get Started ```bash @@ -75,6 +77,13 @@ const App = () => { export default App; ``` +## Constant + +- μΌν•˜λŠ” μ‹œκ°„: 9μ‹œκ°„ (점심 μ‹œκ°„ 포함) +- 점심 μ‹œκ°„: 11:30 ~ 13:00 +- μ΅œμ†Œ μ‹œκ°„: 07:00 +- μ΅œλŒ€ μ‹œκ°„: 19:00 + ## Customize ### useState @@ -131,7 +140,7 @@ export default App; ### Color -- 색깔 props둜 μˆ˜μ • κ°€λŠ₯ +- props둜 색깔을 지정할 수 μžˆμŠ΅λ‹ˆλ‹€. ```React import React from 'react'; diff --git a/package.json b/package.json index ec54e32..f5a0888 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-holiday-time-bar", - "version": "0.0.21", + "version": "0.0.22", "description": "simple holiday time bar with react", "keywords" : ["react", "typescript", "parcel", "component", "time", "hover"], "source": "src/lib/index.ts",