Skip to content

Commit 5e68161

Browse files
mohit23xmohit23x
authored
Merge pull request #57 from mohit23x/minor-refactor
minor ts refactor with reverse support
2 parents 7533fd8 + a37ad7b commit 5e68161

14 files changed

Lines changed: 9784 additions & 14898 deletions

‎.github/dependabot.yml‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
version: 2
2-
updates:
3-
- package-ecosystem: npm
4-
directory: "/"
5-
schedule:
6-
interval: monthly
7-
time: "23:30"
8-
open-pull-requests-limit: 10
1+
version: 2
2+
updates:
3+
- package-ecosystem: npm
4+
directory: "/"
5+
schedule:
6+
interval: monthly
7+
time: "23:30"
8+
open-pull-requests-limit: 10

‎.gitignore‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
1-
node_modules
1+
node_modules
2+
example

‎README.md‎

Lines changed: 124 additions & 131 deletions
Original file line numberDiff line numberDiff line change
@@ -1,131 +1,124 @@
1-
# ActionSheet-React
2-
3-
[![Size](https://badgen.net/bundlephobia/minzip/actionsheet-react)](https://bundlephobia.com/result?p=actionsheet-react)
4-
[![npm](https://badgen.net//npm/v/actionsheet-react)](https://www.npmjs.com/package/actionsheet-react)
5-
6-
An action sheet component for react.
7-
8-
#### What is an action sheet ?
9-
Action Sheet is a component that slides in from bottom and has some list of action for the user. Mostly action sheets are used in native mobile application, but action sheet is a very helpful UI element which can be also be used in websites and PWA.
10-
11-
### 📺 Demo
12-
13-
![demo gif](https://s7.gifyu.com/images/demo_action_sheet.gif)
14-
15-
[code-sandbox simple example](https://codesandbox.io/s/actionsheet-react-2s5zf)
16-
17-
[code-sandbox complex example](https://codesandbox.io/s/actionsheet-react-example-1-0nok0)
18-
19-
### 📦 Installation
20-
21-
##### using npm
22-
23-
```bash
24-
npm i actionsheet-react
25-
```
26-
27-
##### using yarn
28-
29-
```bash
30-
yarn add actionsheet-react
31-
```
32-
33-
34-
### 👨‍💻 Usage
35-
36-
##### Sample code using Javascript
37-
38-
39-
```javascript
40-
import React, {useRef, Fragment} from 'react'
41-
import ActionSheet from 'actionsheet-react'
42-
43-
const MyComponent = () => {
44-
const ref = useRef();
45-
46-
const handleOpen = () => {
47-
ref.current.open();
48-
}
49-
50-
const handleClose = () => {
51-
ref.current.close();
52-
}
53-
54-
return(
55-
<Fragment>
56-
<button onClick={handleOpen}>
57-
Open
58-
</button>
59-
<button onClick={handleClose}>
60-
Close
61-
</button>
62-
<ActionSheet ref={ref}>
63-
<div style={style.content}>
64-
🙂 Hi React Devs!
65-
</div>
66-
</ActionSheet>
67-
</Fragment>
68-
)
69-
}
70-
71-
const style = {
72-
content: {
73-
height: 300,
74-
display: 'flex',
75-
justifyContent: 'center',
76-
alignItems: 'center'
77-
}
78-
}
79-
80-
```
81-
82-
##### Sample code using Typescript
83-
84-
85-
```typescript
86-
import ActionSheet, {ActionSheetRef} from 'actionsheet-react';
87-
88-
const MyComponent = () => {
89-
const ref = useRef<ActionSheetRef>();
90-
91-
// ...rest same as above code
92-
93-
```
94-
95-
### 🌮 Props
96-
97-
##### all props are optional
98-
99-
| property name | type | more info |
100-
| --- | --- | --- |
101-
| onClose | callback function | called when the actionsheet is closed |
102-
| children | React Children | all the fancy HTML elements that you want to show in the menu |
103-
| bgStyle | css styles object | these styles are applied to the background black overlay|
104-
|sheetStyle | css styles object | these styles are applied to the sheet component |
105-
| mouseEnable | boolean | if true, the sheet can be dragged down using mouse |
106-
| touchEnable | boolean | if true, the sheet can be swiped down on touch devices |
107-
| threshold | number | the minimum distance dragged, so that sheet will slide down. Threshold is measured in **px** , default value is 50 |
108-
| zIndex | number | the default value is **999** |
109-
| closeOnBgTap | boolean | if true, the sheet is closed when the backgroud overlay is tapped |
110-
| sheetTransition | string | css transition shorthand, default value `all 0.3s ease-in-out` |
111-
| bgTransition | string | css transition shorthand, default value `all 0.5s ease-in-out` |
112-
113-
### 👾 Misc
114-
115-
1. The logic to stop the backgroud from scrolling is not implemented in this package just to keep it simple. To avoid the background from scrolling you can toggle the overflow property of the body tag, or you can also use some other way of your choice
116-
117-
```javascript
118-
document.body.style.overflow = 'hidden'
119-
document.body.style.overflow = 'auto'
120-
```
121-
122-
2. Mobile browsers generally have pull-to-refresh and when action sheet is open and when user drags the sheet down the pull-to-refresh is triggered. To control this behavior either you can disable swipe in action sheet `touchEnable={false}` or you can disable pull-to-refresh.
123-
124-
```css
125-
body{
126-
overscroll-behavior: contain;
127-
}
128-
```
129-
130-
### ⛳ Issues/Feature Request/Pull Request
131-
The github repo is always there for you.
1+
# ActionSheet-React
2+
3+
[![Size](https://badgen.net/bundlephobia/minzip/actionsheet-react)](https://bundlephobia.com/result?p=actionsheet-react)
4+
[![npm](https://badgen.net//npm/v/actionsheet-react)](https://www.npmjs.com/package/actionsheet-react)
5+
6+
An action sheet component for react.
7+
8+
#### What is an action sheet ?
9+
10+
Action Sheet is a component that slides in from bottom and has some list of action for the user. Mostly action sheets are used in native mobile application, but action sheet is a very helpful UI element which can be also be used in websites and PWA.
11+
12+
### 📺 Demo
13+
14+
![demo gif](https://s7.gifyu.com/images/demo_action_sheet.gif)
15+
16+
[code-sandbox simple example](https://codesandbox.io/s/actionsheet-react-2s5zf)
17+
18+
[code-sandbox complex example](https://codesandbox.io/s/actionsheet-react-example-1-0nok0)
19+
20+
### 📦 Installation
21+
22+
##### using npm
23+
24+
```bash
25+
npm i actionsheet-react
26+
```
27+
28+
##### using yarn
29+
30+
```bash
31+
yarn add actionsheet-react
32+
```
33+
34+
### 👨‍💻 Usage
35+
36+
##### Sample code using Javascript
37+
38+
```javascript
39+
import React, { useRef, Fragment } from "react";
40+
import ActionSheet from "actionsheet-react";
41+
42+
const MyComponent = () => {
43+
const ref = useRef();
44+
45+
const handleOpen = () => {
46+
ref.current.open();
47+
};
48+
49+
const handleClose = () => {
50+
ref.current.close();
51+
};
52+
53+
return (
54+
<Fragment>
55+
<button onClick={handleOpen}>Open</button>
56+
<button onClick={handleClose}>Close</button>
57+
<ActionSheet ref={ref}>
58+
<div style={style.content}>🙂 Hi React Devs!</div>
59+
</ActionSheet>
60+
</Fragment>
61+
);
62+
};
63+
64+
const style = {
65+
content: {
66+
height: 300,
67+
display: "flex",
68+
justifyContent: "center",
69+
alignItems: "center",
70+
},
71+
};
72+
```
73+
74+
##### Sample code using Typescript
75+
76+
```typescript
77+
import ActionSheet, {ActionSheetRef} from 'actionsheet-react';
78+
79+
const MyComponent = () => {
80+
const ref = useRef<ActionSheetRef>();
81+
82+
// ...rest same as above code
83+
84+
```
85+
86+
### 🌮 Props
87+
88+
##### all props are optional
89+
90+
| property name | type | more info |
91+
| --------------- | ----------------- | ------------------------------------------------------------------------------------------------------------------ |
92+
| onClose | callback function | called when the actionsheet is closed |
93+
| children | React Children | all the fancy HTML elements that you want to show in the menu |
94+
| bgStyle | css styles object | these styles are applied to the background black overlay |
95+
| sheetStyle | css styles object | these styles are applied to the sheet component |
96+
| mouseEnable | boolean | if true, the sheet can be dragged down using mouse |
97+
| touchEnable | boolean | if true, the sheet can be swiped down on touch devices |
98+
| threshold | number | the minimum distance dragged, so that sheet will slide down. Threshold is measured in **px** , default value is 50 |
99+
| zIndex | number | the default value is **999** |
100+
| closeOnBgTap | boolean | if true, the sheet is closed when the background overlay is tapped |
101+
| reverse | boolean | open the sheet in reverse direction |
102+
| sheetTransition | string | css transition shorthand, default value `transform 0.3s ease-in-out` |
103+
| bgTransition | string | css transition shorthand, default value `opacity 0.5s ease-in-out, z-index 0.5s ease-in-out` |
104+
105+
### 👾 Misc
106+
107+
1. The logic to stop the backgroud from scrolling is not implemented in this package just to keep it simple. To avoid the background from scrolling you can toggle the overflow property of the body tag, or you can also use some other way of your choice
108+
109+
```javascript
110+
document.body.style.overflow = "hidden";
111+
document.body.style.overflow = "auto";
112+
```
113+
114+
2. Mobile browsers generally have pull-to-refresh and when action sheet is open and when user drags the sheet down the pull-to-refresh is triggered. To control this behavior either you can disable swipe in action sheet `touchEnable={false}` or you can disable pull-to-refresh.
115+
116+
```css
117+
body {
118+
overscroll-behavior: contain;
119+
}
120+
```
121+
122+
### ⛳ Issues/Feature Request/Pull Request
123+
124+
The github repo is always there for you.

‎build/index.d.ts‎

Lines changed: 23 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,23 @@
1-
import * as React from 'react';
2-
import { ReactNode } from 'react';
3-
export interface ActionSheetProps {
4-
onClose?: () => void;
5-
children?: ReactNode;
6-
bgStyle?: React.CSSProperties;
7-
sheetStyle?: React.CSSProperties;
8-
mouseEnable?: boolean;
9-
touchEnable?: boolean;
10-
threshold?: number;
11-
opacity?: number;
12-
zIndex?: number;
13-
closeOnBgTap?: boolean;
14-
bgTransition?: string;
15-
sheetTransition?: string;
16-
}
17-
export interface ActionSheetRef {
18-
open(): void;
19-
close(): void;
20-
}
21-
declare const ActionSheet: React.ForwardRefExoticComponent<ActionSheetProps & React.RefAttributes<ActionSheetRef>>;
22-
export default ActionSheet;
1+
import * as React from "react";
2+
import { ReactNode } from "react";
3+
export interface ActionSheetProps {
4+
onClose?: () => void;
5+
children?: ReactNode;
6+
bgStyle?: React.CSSProperties;
7+
sheetStyle?: React.CSSProperties;
8+
mouseEnable?: boolean;
9+
touchEnable?: boolean;
10+
threshold?: number;
11+
opacity?: number;
12+
zIndex?: number;
13+
closeOnBgTap?: boolean;
14+
bgTransition?: string;
15+
sheetTransition?: string;
16+
reverse?: boolean;
17+
}
18+
export interface ActionSheetRef {
19+
open(): void;
20+
close(): void;
21+
}
22+
declare const ActionSheet: React.ForwardRefExoticComponent<ActionSheetProps & React.RefAttributes<ActionSheetRef | undefined>>;
23+
export default ActionSheet;

0 commit comments

Comments
 (0)