Skip to content

Commit

Permalink
feat(Codebase): Format
Browse files Browse the repository at this point in the history
  • Loading branch information
danilowoz committed Jan 2, 2019
1 parent 2254f25 commit 1ba78c4
Show file tree
Hide file tree
Showing 29 changed files with 17,988 additions and 813 deletions.
5 changes: 5 additions & 0 deletions .prettierrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"semi": false,
"singleQuote": true,
"trailingComma": "es5"
}
23 changes: 12 additions & 11 deletions docs/intro.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ route: /
---

# Introduction

<p align="center">
<img width="350" alt="react-content-loader" src="https://user-images.githubusercontent.com/4838076/34419335-5669c3f8-ebea-11e7-9668-c47b7846970b.png" />
</p>
Expand All @@ -15,13 +16,14 @@ React component that uses SVG to create a collection of loaders which simulates
the structure of the content that will be loaded, similar to Facebook cards loaders.

## Features
* :gear: **Completely customizable:** you can change the colors, speed, sizes and even with RTL content support;
* :pencil2: **Create your own loading:** use the

- :gear: **Completely customizable:** you can change the colors, speed, sizes and even with RTL content support;
- :pencil2: **Create your own loading:** use the
[create-content-loader](https://danilowoz.github.io/create-content-loader/) to create
your own custom loadings easily;
* :ok_hand: **You can use right now:** there are a lot of presets to use it, see the
- :ok_hand: **You can use right now:** there are a lot of presets to use it, see the
[examples](usage#different-type-of-loaders);
* :rocket: **Performance:** written using only the SVG API.
- :rocket: **Performance:** written using only the SVG API.

## Installation

Expand All @@ -35,20 +37,19 @@ CDN: [from JSDELIVR](https://www.jsdelivr.com/package/npm/react-content-loader)

```jsx
// import the component
import ContentLoader, { Facebook } from 'react-content-loader'
import ContentLoader, { Facebook } from "react-content-loader";

const MyLoader = () => <ContentLoader />
const MyFacebookLoader = () => <Facebook />
const MyLoader = () => <ContentLoader />;
const MyFacebookLoader = () => <Facebook />;
```

**Or in custom mode, using the
[online tool](https://danilowoz.github.io/create-react-content-loader/)**


## Options

| <p align="left">Name</p>|<p align="left">Type</p>|<p align="left">Default</p>| <p align="left">Description</p> |
| ----------------------- | ----------- | ---------------------- | ------------------------------------------------------------------------- |
| Name | Type | Default | Description |
| ----------------------- | ------- | -------------------- | ------------------------------------------------------------------------- |
| **animate** | Boolean | true | `false` to render with no animation |
| **ariaLabel** | String | Loading interface... | Describe what element it is |
| **speed** | Number | 2 | Animation speed in seconds |
Expand All @@ -62,4 +63,4 @@ const MyFacebookLoader = () => <Facebook />
| **primaryOpacity** | Number | 1 | Background opacity (0 = transparent, 1 = opaque) |
| **secondaryOpacity** | Number | 1 | Animation opacity (0 = transparent, 1 = opaque) |
| **style** | Object | null | Ex: `{ width: '100%', height: '70px' }` |
| **uniquekey** | String | random unique id | Use the same value of prop key, that will solve inconsistency on the SSR. |
| **uniquekey** | String | random unique id | Use the same value of prop key, that will solve inconsistency on the SSR. |
80 changes: 48 additions & 32 deletions docs/usage.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -2,97 +2,113 @@
name: Usage
route: /usage
---
import { Playground, PropsTable } from 'docz'

import { Playground, PropsTable } from "docz";

import ContentLoader, {
Facebook,
Instagram,
Code,
List,
BulletList
} from "../src/index"
import FacebookStyle from "../src/stylized/FacebookStyle"

} from "../src";
import FacebookStyle from "../src/stylized/FacebookStyle";

# React Content Loader

<PropsTable of={FacebookStyle} />

## Different Type of Loaders

### Facebook Style Loader

<Playground>
<Facebook/>
<Facebook />
</Playground>

### Instagram Style Loader

<Playground>
<Instagram/>
<Instagram />
</Playground>

### Code Style Loader

<Playground>
<Code/>
<Code />
</Playground>

### List Style Loader

<Playground>
<List/>
<List />
</Playground>

### BulletList Style Loader

<Playground>
<BulletList/>
<BulletList />
</Playground>

### Custom Loader

<Playground>
<ContentLoader
height={140}
speed={1}
primaryColor={"#333"}
secondaryColor={"#999"}
>
<rect x="80" y="17" rx="4" ry="4" width="300" height="13" />
<rect x="82" y="44" rx="3" ry="3" width="250" height="10" />
<circle cx="35" cy="35" r="35" />
</ContentLoader>
<ContentLoader
height={140}
speed={1}
primaryColor={"#333"}
secondaryColor={"#999"}
>
<rect x="80" y="17" rx="4" ry="4" width="300" height="13" />
<rect x="82" y="44" rx="3" ry="3" width="250" height="10" />
<circle cx="35" cy="35" r="35" />
</ContentLoader>
</Playground>

## Unique key

<Playground>
<Facebook uniquekey="unique-key" />
<Facebook uniquekey="unique-key" />
</Playground>

## No Animation

Set animate props to false to stop Animation

<Playground>
<Facebook animate={false} />
<Facebook animate={false} />
</Playground>

## Right To Left Animation

Set rtl props to animate from right to left

<Playground>
<Instagram rtl />
<Instagram rtl />
</Playground>

## Use ViewBox

Use viewbox props to set viewbox value.
Additionally, pass viewBox props as empty string to remove viewBox.

<Playground>
<ContentLoader viewBox="" />
<ContentLoader viewBox="" />
</Playground>

## BugFix in Safari
When using `rgba` as a `primaryColor` or `secondaryColor` value,

When using `rgba` as a `primaryColor` or `secondaryColor` value,
[Safari does not respect the alpha channel](https://github.com/w3c/svgwg/issues/180),
meaning that the color will be opaque. To prevent this, instead of using an
meaning that the color will be opaque. To prevent this, instead of using an
`rgba` value for `primaryColor`/`secondaryColor`, use the `rgb` equivalent and
move the alpha channel value to the `primaryOpacity`/`secondaryOpacity` props.

<Playground>
<ContentLoader
primaryColor="rgb(0,0,0)"
secondaryColor="rgb(0,0,0)"
primaryOpacity={0.06}
secondaryOpacity={0.12}
/>
</Playground>
<ContentLoader
primaryColor="rgb(0,0,0)"
secondaryColor="rgb(0,0,0)"
primaryOpacity={0.06}
secondaryOpacity={0.12}
/>
</Playground>
2 changes: 2 additions & 0 deletions doczrc.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import emoji from "remark-emoji"

export default {
title: "React Content Loader",
typescript: true,
mdPlugins: [emoji],
codeSandbox: false,
htmlContext: {
Expand Down
34 changes: 9 additions & 25 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -30,15 +30,12 @@
"sideEffects": false,
"scripts": {
"dev": "docz dev",
"docz:build": "docz build",
"build": "rm -fr ./dist && rollup -c",
"test": "jest",
"test": "npm run tsc && jest",
"test:watch": "jest tests --watch",
"tsc:watch": "npm run tsc -- --watch",
"tsc": "node_modules/.bin/tsc",
"tslint-check": "tslint-config-prettier-check ./tslint.json",
"precommit": "npm run tsc",
"prepush": "npm run test",
"tsc:watch": "npm run tsc -- --watch",
"format": "prettier --write 'src/**/*.{ts,tsx}'",
"coverage": "codecov",
"release": "semantic-release"
},
Expand All @@ -52,29 +49,17 @@
"@types/jest": "^23.3.10",
"@types/react": "^16.7.13",
"@types/react-dom": "^16.0.11",
"@types/react-test-renderer": "^16.0.3",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^10.0.1",
"babel-jest": "^23.6.0",
"chai": "^4.1.2",
"chai-enzyme": "^1.0.0-beta.0",
"cross-env": "^5.1.3",
"cz-conventional-changelog": "^2.1.0",
"docz": "^0.12.13",
"docz-theme-default": "^0.12.13",
"enzyme": "^3.6.0",
"enzyme-adapter-react-16": "^1.5.0",
"eslint": "^4.12.0",
"eslint-config-prettier": "^2.4.0",
"eslint-plugin-prettier": "^2.2.0",
"flow-bin": "^0.59.0",
"husky": "^1.1.2",
"jest": "^23.6.0",
"jsdom": "11.6.0",
"jsdom-global": "3.0.2",
"mocha": "^4.0.1",
"prettier": "^1.6.1",
"react": "^16.6.3",
"react-dom": "^16.6.3",
"prettier": "^1.15.3",
"react": "^16.7.0",
"react-dom": "^16.7.0",
"react-test-renderer": "^16.6.3",
"remark-emoji": "^2.0.2",
"rollup": "0.66.4",
Expand All @@ -85,16 +70,15 @@
"ts-jest": "^23.10.5",
"tslint": "^5.11.0",
"tslint-config-prettier": "^1.17.0",
"typescript": "^3.2.1",
"@types/react-test-renderer": "^16.0.3"
"typescript": "^3.2.1"
},
"peerDependencies": {
"react": "^15.0.0-0 || ^16.0.0-0"
},
"dependencies": {},
"husky": {
"hooks": {
"pre-commit": "npm run tsc",
"pre-commit": "npm run format && npm run tsc",
"pre-push": "npm run test"
}
},
Expand Down
28 changes: 0 additions & 28 deletions scripts/mocha_runner.js

This file was deleted.

48 changes: 16 additions & 32 deletions src/Holder.tsx
Original file line number Diff line number Diff line change
@@ -1,52 +1,36 @@
import * as React from "react";
import Svg from "./Svg";
import * as React from 'react'
import Svg from './Svg'

export interface IContentLoaderProps {
animate?: boolean;
ariaLabel?: string;
children?: React.ReactNode;
className?: string;
height?: number;
preserveAspectRatio?: "none" | "xMinYMin meet" | "xMidYMin meet" | "xMaxYMin meet" |
"xMinYMid meet" | "xMidYMid meet" | "xMaxYMid meet" | "xMinYMax meet" | "xMidYMax meet" | "xMaxYMax meet" | "xMinYMin slice" | "xMidYMin slice" | "xMaxYMin slice" | "xMinYMid slice" |
"xMidYMid slice" | "xMaxYMid slice" | "xMinYMax slice" | "xMidYMax slice" | "xMaxYMax slice";
primaryColor?: string;
primaryOpacity?: number;
rtl?: boolean;
secondaryColor?: string;
secondaryOpacity?: number;
speed?: number;
style?: React.CSSProperties;
uniquekey?: string;
width?: number;
}
import { IContentLoaderProps } from './interface'

export const defaultProps: IContentLoaderProps = {
animate: true,
ariaLabel: "Loading interface...",
ariaLabel: 'Loading interface...',
height: 130,
preserveAspectRatio: "none",
primaryColor: "#f0f0f0",
preserveAspectRatio: 'none',
primaryColor: '#f0f0f0',
primaryOpacity: 1,
rtl: false,
secondaryColor: "#e0e0e0",
secondaryColor: '#e0e0e0',
secondaryOpacity: 1,
speed: 2,
style: {},
width: 400,
};
}

const InitialComponent: React.FunctionComponent<IContentLoaderProps> = (props) => (
const InitialComponent: React.FunctionComponent<
IContentLoaderProps
> = props => (
<rect x="0" y="0" rx="5" ry="5" width={props.width} height={props.height} />
);
)

export default (props: IContentLoaderProps) => {
const mergedProps = { ...defaultProps, ...props };
const mergedProps = { ...defaultProps, ...props }
const children = props.children ? (
props.children
) : (
<InitialComponent {...mergedProps} />
);
)

return <Svg {...mergedProps}>{children}</Svg>;
};
return <Svg {...mergedProps}>{children}</Svg>
}

0 comments on commit 1ba78c4

Please sign in to comment.