Prettifying

`yarn run prettify` command prettifying.
This commit is contained in:
Marko Kuosmanen 2020-08-18 23:04:48 +03:00
parent 50e38a884b
commit 6c5e6d663e
4 changed files with 38 additions and 22 deletions

View File

@ -27,18 +27,18 @@ render() {
#### Dock Props
| Prop Name | Description |
|-----------|-------------|
| position | Side to dock (`left`, `right`, `top` or `bottom`). Default is `left`. |
| fluid | If `true`, resize dock proportionally on window resize. |
| size | Size of dock panel (width or height, depending on `position`). If this prop is set, `Dock` is considered as a controlled component, so you need to use `onSizeChange` to track dock resizing. Value is a fraction of window width/height, if `fluid` is true, or pixels otherwise |
| defaultSize | Default size of dock panel (used for uncontrolled `Dock` component) |
| isVisible | If `true`, dock is visible |
| dimMode | If `none` - content is not dimmed, if `transparent` - pointer events are disabled (so you can click through it), if `opaque` - click on dim area closes the dock. Default is `opaque` |
| duration | Animation duration. Should be synced with transition animation in style properties |
| dimStyle | Style for dim area |
| dockStyle | Style for dock |
| zIndex | Z-index for wrapper |
| onVisibleChange | Fires when `Dock` wants to change `isVisible` (when opaque dim is clicked, in particular) |
| onSizeChange | Fires when `Dock` wants to change `size` |
| children | Dock content - react elements or function that returns an element. Function receives an object with these state values: `{ position, isResizing, size, isVisible }` |
| Prop Name | Description |
| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| position | Side to dock (`left`, `right`, `top` or `bottom`). Default is `left`. |
| fluid | If `true`, resize dock proportionally on window resize. |
| size | Size of dock panel (width or height, depending on `position`). If this prop is set, `Dock` is considered as a controlled component, so you need to use `onSizeChange` to track dock resizing. Value is a fraction of window width/height, if `fluid` is true, or pixels otherwise |
| defaultSize | Default size of dock panel (used for uncontrolled `Dock` component) |
| isVisible | If `true`, dock is visible |
| dimMode | If `none` - content is not dimmed, if `transparent` - pointer events are disabled (so you can click through it), if `opaque` - click on dim area closes the dock. Default is `opaque` |
| duration | Animation duration. Should be synced with transition animation in style properties |
| dimStyle | Style for dim area |
| dockStyle | Style for dock |
| zIndex | Z-index for wrapper |
| onVisibleChange | Fires when `Dock` wants to change `isVisible` (when opaque dim is clicked, in particular) |
| onSizeChange | Fires when `Dock` wants to change `size` |
| children | Dock content - react elements or function that returns an element. Function receives an object with these state values: `{ position, isResizing, size, isVisible }` |

View File

@ -2,11 +2,24 @@
<html>
<head>
<title>React Dock</title>
<link href="http://fonts.googleapis.com/css?family=Noto+Sans|Roboto:400,300,500" rel="stylesheet" type="text/css">
<link href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.5/paper/bootstrap.min.css" rel="stylesheet">
<link
href="http://fonts.googleapis.com/css?family=Noto+Sans|Roboto:400,300,500"
rel="stylesheet"
type="text/css"
/>
<link
href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.5/paper/bootstrap.min.css"
rel="stylesheet"
/>
</head>
<body>
<a href="https://github.com/alexkuz/react-dock"><img style="z-index: 999999999; position: fixed; top: 0; left: 0; border: 0;" src="https://camo.githubusercontent.com/121cd7cbdc3e4855075ea8b558508b91ac463ac2/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f6c6566745f677265656e5f3030373230302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_left_green_007200.png"></a>
<a href="https://github.com/alexkuz/react-dock"
><img
style="z-index: 999999999; position: fixed; top: 0; left: 0; border: 0;"
src="https://camo.githubusercontent.com/121cd7cbdc3e4855075ea8b558508b91ac463ac2/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f6c6566745f677265656e5f3030373230302e706e67"
alt="Fork me on GitHub"
data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_left_green_007200.png"
/></a>
<div id="root"></div>
<script src="static/bundle.js"></script>
</body>

View File

@ -333,8 +333,11 @@ export default class Dock extends Component {
<div style={dimStyles} onClick={this.handleDimClick} />
)}
<div style={dockStyles}>
<div style={resizerStyles}
onMouseDown={this.handleMouseDown} onTouchStart={this.handleMouseDown} />
<div
style={resizerStyles}
onMouseDown={this.handleMouseDown}
onTouchStart={this.handleMouseDown}
/>
<div style={styles.dockContent}>
{typeof children === 'function'
? children({

View File

@ -2,8 +2,8 @@
// Type definitions for redux-devtools 3.4.1
// TypeScript Version: 2.8.1
import * as React from "react";
import { StoreEnhancer } from "redux";
import * as React from 'react';
import { StoreEnhancer } from 'redux';
export interface DevTools {
new (): JSX.ElementClass;