Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yungshenglu/booking-demo
Simple demo of room allocation in React 17 ! 🚀
https://github.com/yungshenglu/booking-demo
babel emotion react webpack
Last synced: about 1 month ago
JSON representation
Simple demo of room allocation in React 17 ! 🚀
- Host: GitHub
- URL: https://github.com/yungshenglu/booking-demo
- Owner: yungshenglu
- License: wtfpl
- Created: 2022-06-30T03:13:43.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2022-07-05T03:29:31.000Z (over 2 years ago)
- Last Synced: 2024-11-13T23:09:21.598Z (3 months ago)
- Topics: babel, emotion, react, webpack
- Language: JavaScript
- Homepage:
- Size: 810 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
Awesome Lists containing this project
README
# Booking Demo in React
![](assets/img/Demo.png)
This repository is a simple demo for implementing booking function in React 17. 🚀
> HINT: If you have any questions, please feel free to ask me.
---
## Description
### Execution
1. To run this demo, you need to clone the project first.
```bash
$ git clone https://github.com/yungshenglu/Booking-Demo
```
2. After cloning, change the your current directory into the repository and setup the project
```bash
$ cd Booking-Demo/ & yarn install
```
- The command `yarn install` will install some necessary packages for this project
- It will take few second for running above command
3. Compiles and hot-reloads for development
```bash
$ yarn start
```
- It will take few second for running above command
- You won't get any error messages if running successful
4. Congratulation! you can open your browser to `http://localhost:9527` and see our Booking-Demo---
## Implementation
### Components
- All components are implemented without any third-party UI library.
- The styles of components are implemented with [Emotion](https://emotion.sh/docs/introduction) which is a library designed for writing css styles with JavaScript. In short, it is an styled-component design.### Long-Press Function in Button
- The long-press function is implemented via `setInterval` to detect whether the action of clicking button in long-press in `CustomButton`.
- You can adjust the interval of long-press arbitrary.
- To implement long-press action, we also need these **synthetic events** as follow in React:
- `onMouseDown`
- `onMouseUp`
- `onMouseLeave`
- `onTouchStart`
- `onTouchEnd`### Factory Design
![](assets/img/Factory-Design.png)
- Data: `/src/constants/RoomFormInfo.js`
- Components: `/src/components/`
- Factory: `/src/containers/FormFactory.js`---
## Contributor
> NOTICE: You can follow the contributing process [CONTRIBUTING.md](CONTRIBUTING.md) to join me. I am very welcome for any issue!
- [David Lu](https://github.com/yungshenglu)
---
## License
[WTFPL](LICENSE)