Skip to content

Commit a7a940b

Browse files
runjuurunjuu
authored
Merge pull request #3 from LeetCode-OpenSource/feature/readme
Update README
2 parents 051e94f + 061a8dc commit a7a940b

File tree

1 file changed

+204
-1
lines changed

1 file changed

+204
-1
lines changed

‎README.md

Lines changed: 204 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,204 @@
1-
# [WIP]react-simple-resizer
1+
# react-simple-resizer · [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/LeetCode-OpenSource/react-simple-resizer/blob/master/LICENSE) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](#contributing) [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat)](https://github.com/prettier/prettier) [![npm version](https://img.shields.io/npm/v/react-simple-resizer.svg?style=flat)](https://www.npmjs.com/package/react-simple-resizer)
2+
3+
4+
An intuitive React component set for multi-column resizing. It is easy to use and it also can [customize the behavior of resizing](#customize-resize-behavior) in a very simple way. Working on every modern browser [which](https://caniuse.com/#feat=flexbox) support [flexible box layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout).
5+
6+
#### Table of Contents
7+
- [Installation](#installation)
8+
- [Examples](#examples)
9+
- [Components](#components)
10+
- [Container](#container-)
11+
- [Section](#section-)
12+
- [Bar](#bar-)
13+
- [Customize resize behavior](#customize-resize-behavior)
14+
- [Demos](#demos)
15+
- [Contributing](#contributing)
16+
17+
## Installation
18+
Using [yarn](https://yarnpkg.com/):
19+
```bash
20+
yarn add react-simple-resizer
21+
```
22+
23+
Or via [npm](https://docs.npmjs.com):
24+
```bash
25+
npm install react-simple-resizer
26+
```
27+
28+
## Examples
29+
We have create several demos on CodeSandbox, check the [Demos](#demos) to see more. Here is the minimal example for two column layout:
30+
```jsx
31+
import React from 'react';
32+
import { Container, Section, Bar } from 'react-simple-resizer';
33+
34+
export default () => (
35+
<Container style={{ height: '500px' }}>
36+
<Section style={{ background: '#d3d3d3' }} minSize={100}/>
37+
<Bar size={10} style={{ background: '#888888', cursor: 'col-resize' }} />
38+
<Section style={{ background: '#d3d3d3' }} minSize={100} />
39+
</Container>
40+
);
41+
```
42+
43+
## Components
44+
45+
### \<Container \/\>
46+
Literally, as the container of the other components.
47+
48+
#### Props
49+
```typescript
50+
import { HTMLAttributes } from 'react';
51+
52+
interface ContainerProps extends HTMLAttributes<HTMLDivElement> {
53+
vertical?: boolean;
54+
onActivate?: () => void;
55+
beforeApplyResizer?: (resizer: Resizer) => void;
56+
afterResizing?: () => void;
57+
}
58+
```
59+
##### vertical
60+
> Determine that whether using vertical layout or not, default is `false`.
61+
62+
##### onActivate
63+
> Triggered when any [`Bar`](#bar) activated. i.e, [onMouseDown](https://developer.mozilla.org/en/docs/Web/Events/mousedown) or [onTouchStart](https://developer.mozilla.org/en-US/docs/Web/Events/touchstart).
64+
65+
##### beforeApplyResizer
66+
> Used to [customize resize behavior](#customize-resize-behavior). In this method, you __don't__ need to call [`applyResizer`](#applyresizer) to apply the resize result. Please note that you should not do any side effect on this method. If you want to do something after the resizing, see [`afterResizing`](#afterresizing) below.
67+
68+
##### afterResizing
69+
> Triggered after a <a name="resizing-section">__resizing section__</a> is completed. Which means that it will be triggered after the [onMouseUp](https://developer.mozilla.org/en-US/docs/Web/Events/mouseup) and [onTouchEnd](https://developer.mozilla.org/en-US/docs/Web/Events/touchend) events. If you want to do something after each time the size of section has changed, using the [`onSizeChanged`](#onsizechanged) props on the [`Section`](#section-) instead.
70+
71+
#### Instance properties
72+
```typescript
73+
import React from 'react';
74+
75+
class Container extends React.PureComponent<ContainerProps> {
76+
public getResizer(): Resizer
77+
public applyResizer(resizer: Resizer): void
78+
}
79+
```
80+
##### getResizer
81+
> Used to get the newest [`Resizer`](#customize-resize-behavior). But any change won't apply unless you pass the `Resizer` to `applyResizer`.
82+
83+
##### applyResizer
84+
> Apply the passed `Resizer` to `Container`.
85+
86+
---
87+
### \<Section \/\>
88+
#### Props
89+
```typescript
90+
import { HTMLAttributes, RefObject } from 'react';
91+
92+
interface SectionProps extends HTMLAttributes<HTMLDivElement> {
93+
size?: number;
94+
defaultSize?: number;
95+
maxSize?: number;
96+
minSize?: number;
97+
disableResponsive?: boolean;
98+
onSizeChanged?: () => void;
99+
innerRef?: RefObject<HTMLDivElement>;
100+
}
101+
```
102+
##### size
103+
> Used to set the `Section`'s size. If `size` exists, `Section` will ignore the value of `defaultSize`, `maxSize` and `minSize`.
104+
105+
##### defaultSize
106+
> Used to set the default size of `Section`.
107+
108+
##### maxSize
109+
> Used to set the max size of `Section`.
110+
111+
##### minSize
112+
> Used to set the min size of `Section`.
113+
114+
##### disableResponsive
115+
> Each `Section` is responsive as default, unless `size` is exists. the responsive means that the `Section`'s size is related with `Container`'s size, if `Container`'s size turn smaller, the `Section`'s size also turn smaller automatically. Otherwise, the changes of `Container` size won't affect the `Section` that `disableResponsive` is `true`.
116+
117+
##### onSizeChanged
118+
> Will be triggered each time the size has changed.
119+
120+
##### innerRef
121+
> Used to get the actual DOM ref of `Section`.
122+
123+
---
124+
### \<Bar \/\>
125+
#### Props
126+
```typescript
127+
import { HTMLAttributes, RefObject } from 'react';
128+
129+
interface ExpandInteractiveArea {
130+
top?: number;
131+
left?: number;
132+
right?: number;
133+
bottom?: number;
134+
}
135+
136+
interface BarProps extends HTMLAttributes<HTMLDivElement> {
137+
size: number;
138+
expandInteractiveArea?: ExpandInteractiveArea;
139+
onStatusChanged?: (isActive: boolean) => void;
140+
innerRef?: RefObject<HTMLDivElement>;
141+
}
142+
```
143+
##### size
144+
> Required, used to set the size of the `Bar`.
145+
146+
##### expandInteractiveArea
147+
> Used to expanding the interactive area of the `Bar`.
148+
149+
##### onStatusChanged
150+
> Triggered when the state of the `Bar` has changed.
151+
152+
##### innerRef
153+
> Used to get the actual DOM ref of `Bar`.
154+
155+
## Customize resize behavior
156+
If you want to customize the behavior of resizing, then the `Resizer` is what you need to know.
157+
158+
> There is two ways to get the `Resizer`. One is the method [`beforeApplyResizer`](#beforeapplyresizer) defined on the __props__ of `Container`, and the other is the method [`getResizer`](#getresizer) defined on the __instance__ of `Container`
159+
160+
```typescript
161+
interface Resizer {
162+
resizeSection: (indexOfSection: number, config: { toSize: number; preferMoveLeftBar?: boolean }) => void;
163+
moveBar: (indexOfBar: number, config: { withOffset: number; }) => void;
164+
discard: () => void;
165+
isSectionResized: (indexOfSection: number) => boolean;
166+
isBarActivated: (indexOfBar: number) => boolean;
167+
getSectionSize: (indexOfSection: number) => number | -1;
168+
getTotalSize: () => number;
169+
}
170+
```
171+
172+
##### resizeSection
173+
> Used to set the size of the nth `Section`.
174+
> In multi-column layout, there is not only one `Bar` could change the `Section`'s size. Therefor, you could use `preferMoveLeftBar` to try to use the left side `Bar` to resizing.
175+
176+
##### moveBar
177+
> Used to move the nth `Bar` to resizing.
178+
> If the value of A is negative, move `Bar` to the left. Once [`vertical`](#vertical) is `true`, move up.
179+
180+
##### discard
181+
> Discard resizing at this time.
182+
183+
##### isSectionResized
184+
> Used to determine whether the nth `Section`'s size is changed at current [resizing section](#user-content-resizing-section) or not.
185+
186+
##### isBarActivated
187+
> Used to determine whether the nth `Bar` is active or not.
188+
189+
##### getSectionSize
190+
> Used to get the size of the nth `Section`. if there is no nth `Section`, return `-1`.
191+
192+
##### getTotalSize
193+
> Used to get the total size of the `Section`.
194+
195+
## Demos
196+
- [Simple demo](https://codesandbox.io/s/qkw1rxxq29)
197+
- [Make Section collapsible](https://codesandbox.io/s/1vpy7kz5j3)
198+
- [Multiple Section linkage effects](https://codesandbox.io/s/r51pv3qzpm)
199+
200+
## Contributing
201+
The main purpose of this repository is to continue to evolve react-simple-resizer core, making it faster, smaller and easier to use. We are grateful to the community for contributing bugfixes and improvements.
202+
203+
#### About Demo
204+
Feel free to let us know that you have create some new customized resize behavior. If you want, you could make a PR to let more people see your works. Also, if you find some behavior that you can not create, let us know too.

0 commit comments

Comments
 (0)