ThirdMirrors
/
cheatsheets
mirror of https://gitee.com/Hawkin99/cheatsheets.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Update

This commit is contained in:
Rico Sta. Cruz 2017-08-24 14:53:13 +08:00
parent a558510701
commit f3fe0d09fb
No known key found for this signature in database
GPG Key ID: CAAD38AE2962619A
8 changed files with 127 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
_sass/2017/base/base.scss
View File

@ -3,19 +3,30 @@
*/
html, body {
background: #fcfcfc;
background: $body-bg;
font-family: $body-font;
font-size: 14px;
line-height: 1.6;
color: $text-color;
}
body {
padding: 8px;
margin: 0 auto;
}
@media (min-width: 481px) {
body {
padding: 16px;
max-width: $column * 3 + 32px;
margin: 0 auto;
}
}
pre, code {
font-family: $monospace-font;
}
* {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

44
_sass/2017/components/h3-section-list.scss
View File

@ -19,35 +19,13 @@
// Each section
& > .h3-section {
float: left;
padding: $gutter / 4;
width: 100%;
}
@media (min-width: 481px) {
& > .h3-section {
padding: $gutter / 2;
width: 100%;
}
@media (min-width: 768px) {
& > .h3-section {
width: 50%;
}
& > .h3-section.-wide {
width: 100%;
}
& > .h3-section.-halfwide {
width: 100%;
}
}
@media (min-width: 960px) {
& > .h3-section {
width: 33.33%;
}
& > .h3-section.-wide {
width: 66.67%;
}
& > .h3-section.-halfwide {
width: 50%;
}
}
}
@ -58,7 +36,7 @@
.h3-section-list,
.h3-section-list.-two-column {
@media (min-width: 768px) {
@media (min-width: 769px) {
& > .h3-section {
width: 50%;
}
@ -80,13 +58,13 @@
*/
.h3-section-list.-three-column {
@media (min-width: 768px) {
@media (min-width: 769px) {
& > .h3-section {
width: 50%;
}
}
@media (min-width: 960px) {
@media (min-width: 961px) {
& > .h3-section {
width: 33.33%;
}
@ -98,13 +76,13 @@
*/
.h3-section-list.-left-reference {
@media (min-width: 768px) {
@media (min-width: 769px) {
& > .h3-section {
width: 50%;
}
}
@media (min-width: 960px) {
@media (min-width: 961px) {
& > .h3-section {
width: 66.67%;
}

15
_sass/2017/components/h3-section.scss
View File

@ -12,10 +12,11 @@
& {
background: white;
box-shadow:
0 4px 5px rgba(80, 100, 150, 0.05),
0 4px 8px rgba(80, 100, 150, 0.05),
0 2px 3px rgba(80, 100, 150, 0.1);
}
/* Lists */
& > ul {
margin: 0;
padding: 0;
@ -23,8 +24,8 @@
}
& > ul > li {
padding: 8px 16px;
padding-left: 32px;
padding: 16px;
padding-left: 32px + 4px;
position: relative;
}
@ -32,12 +33,12 @@
content: '';
position: absolute;
display: inline-block;
width: 8px;
height: 8px;
background: #666;
width: 4px;
height: 4px;
background: $gray-text;
border-radius: 50%;
left: 16px;
top: 16px;
top: 24px + 2px;
}
& > ul > li + li {

5
_sass/2017/markdown/headings.scss
View File

@ -61,6 +61,11 @@
font-size: 0.86em;
}
.MarkdownBody pre,
.MarkdownBody code {
font-family: $monospace-font;
}
/*
* Undo prism theme crap
*/

5
_sass/2017/markdown/table.scss
View File

@ -13,12 +13,13 @@
/* Horizontal lines */
& tbody + tbody {
border-top: solid 1px $dark-line-color;
border-top: solid 4px $line-color;
}
& td,
& th {
padding: 8px 16px;
vertical-align: top;
}
& tr td:last-child {
@ -52,7 +53,7 @@
font-size: 1em;
padding: 5px 6px;
padding-left: 8px; // compensation
background: #fafafa;
background: $gray-bg;
border-radius: 3px;
margin-right: 2px;
letter-spacing: 0.2em;

8
_sass/2017/style.scss
View File

@ -2,17 +2,19 @@ $gutter: 32px;
$column: 400px;
$body-font: roboto, sans-serif;
$monospace-font: menlo, monospace;
$monospace-font: 'fira mono', Consolas, menlo, 'Andale Mono', 'Ubuntu Mono', monospace;
$body-bg: #f8f8fb;
$gray-bg: #fcfcfc;
$gray-text: #678;
$text-color: #333;
$baseA-400: #53a;
$baseB-400: #35a;
$line-color: #f5f5f5;
$dark-line-color: #ccc;
$line-color: rgba(50, 80, 150, 0.1);
$dark-line-color: rgba(50, 80, 150, 0.2);
@import url('https://unpkg.com/sanitize.css@5.0.0/sanitize.css');
@import url('https://fonts.googleapis.com/css?family=Fira+Mono:400');
@import './base/base';
@import './markdown/headings';

2
assets/2017/script.js
View File

@ -64,8 +64,6 @@ function groupify ($this, { tag, wrapper, body }) {
function wrap ($pivot, $first, $sibs) {
const $wrap = $(wrapper)
$wrap.addClass($pivot.attr('class'))
console.log($pivot[0])
console.log('addclass', $pivot.attr('class'))
$pivot.before($wrap)
const $body = $(body)

110
react.md
View File

@ -87,24 +87,6 @@ class Info extends React.Component {
Nest components to separate concerns. See: [multiple components](http://facebook.github.io/react/docs/multiple-components.html)
### Component API
```jsx
this.forceUpdate()
```
```jsx
this.setState({ ... })
this.replaceState({ ... })
```
```jsx
this.state
this.props
```
These methods and properies are available for `Component` instances. See [Component API](http://facebook.github.io/react/docs/component-api.html).
### Properties
```html
@ -136,7 +118,7 @@ render () {
```
Use states (`this.state`) to manage dynamic data.
See [States](https://facebook.github.io/react/docs/tutorial.html#reactive-state).
See: [States](https://facebook.github.io/react/docs/tutorial.html#reactive-state)
### Setting default props
@ -146,7 +128,7 @@ Hello.defaultProps = {
}
```
See [defaultProps](https://facebook.github.io/react/docs/react-component.html#defaultprops).
See: [defaultProps](https://facebook.github.io/react/docs/react-component.html#defaultprops)
### Setting default state
@ -159,16 +141,36 @@ class Hello extends React.Component {
}
```
### Component API
```jsx
this.forceUpdate()
```
```jsx
this.setState({ ... })
```
```jsx
this.state
this.props
```
These methods and properies are available for `Component` instances. See: [Component API](http://facebook.github.io/react/docs/component-api.html)
Lifecycle
---------
{: .-two-column}
### Mounting
| Method | Description |
| --- | --- |
| `constructor` _(props)_ | Before rendering [#](https://facebook.github.io/react/docs/react-component.html#constructor) |
| `componentWillMount()` | _Don't use this_ [#](https://facebook.github.io/react/docs/react-component.html#componentwillmount) |
| `render()` | Render [#](https://facebook.github.io/react/docs/react-component.html#render) |
| `componentDidMount()` | After rendering (DOM available) [#](https://facebook.github.io/react/docs/react-component.html#componentdidmount) |
| --- | --- |
| `componentWillUnmount()` | Before DOM removal [#](https://facebook.github.io/react/docs/react-component.html#componentwillunmount) |
Set initial the state on `constructor()`.
@ -176,13 +178,15 @@ Add DOM event handlers, timers (etc) on `componentDidMount()`, then remove them
### Updating
| Method | Description |
| --- | --- |
| `componentWillReceiveProps` *(newProps)* | Use `setState()` here |
| `shouldComponentUpdate` *(newProps, newState)* | Skips `render()` if returns false |
| `componentWillUpdate` *(newProps, newState)* | Can't use `setState()` here |
| `render()` | Render |
| `componentDidUpdate` *(prevProps, prevState)* | Operate on the DOM here |
Called when parents change properties and `.setState()`. These are not called for initial renders. See [reference](http://facebook.github.io/react/docs/component-specs.html#updating-componentwillreceiveprops).
Called when parents change properties and `.setState()`. These are not called for initial renders. See: [Reference](http://facebook.github.io/react/docs/component-specs.html#updating-componentwillreceiveprops).
DOM nodes
---------
@ -205,7 +209,7 @@ this.input.focus()
this.input.value()
```
Allows access to DOM nodes. See [Refs and the DOM](https://facebook.github.io/react/docs/refs-and-the-dom.html).
Allows access to DOM nodes. See: [Refs and the DOM](https://facebook.github.io/react/docs/refs-and-the-dom.html)
### DOM Events
@ -221,13 +225,19 @@ handleChange: function(event) {
}
```
Add attributes like `onChange`. See [events](https://facebook.github.io/react/docs/events.html).
Add attributes like `onChange`. See: [Events](https://facebook.github.io/react/docs/events.html)
Property validation
-------------------
{: .-three-column}
### React.PropTypes
### PropTypes
```js
import PropTypes from 'prop-types'
```
See: [Typechecking with PropTypes](https://facebook.github.io/react/docs/typechecking-with-proptypes.html)
| PropType | Description |
| --- | --- |
@ -245,8 +255,8 @@ Property validation
| `arrayOf`_(...)_ | |
| --- | --- |
| `object` | |
| `objectOf`_(...)_ | |
| `instanceOf`_(...)_ | |
| `objectOf`_(...)_ | Object with values of a certain type |
| `instanceOf`_(...)_ | Instance of a class |
| `shape`_(...)_ | |
| --- | --- |
| `element` | React element |
@ -254,17 +264,15 @@ Property validation
| --- | --- |
| `.isRequired` | Required |
See [propTypes](http://facebook.github.io/react/docs/reusable-components.html#prop-validation).
### Basic types
```jsx
MyComponent.propTypes = {
email: React.PropTypes.string,
seats: React.PropTypes.number,
callback: React.PropTypes.func,
isClosed: React.PropTypes.bool,
any: React.PropTypes.any
email: PropTypes.string,
seats: PropTypes.number,
callback: PropTypes.func,
isClosed: PropTypes.bool,
any: PropTypes.any
}
```
@ -272,7 +280,7 @@ MyComponent.propTypes = {
```jsx
MyCo.propTypes = {
name: React.PropTypes.string.isRequired
name: PropTypes.string.isRequired
}
```
@ -281,10 +289,10 @@ MyCo.propTypes = {
```jsx
MyCo.propTypes = {
// React element
element: React.PropTypes.element,
element: PropTypes.element,
// num, string, element, or an array of those
node: React.PropTypes.node
node: PropTypes.node
}
```
@ -292,7 +300,7 @@ MyCo.propTypes = {
```jsx
MyCo.propTypes = {
direction: React.PropTypes.oneOf([
direction: PropTypes.oneOf([
'left', 'right'
])
}
@ -302,15 +310,19 @@ MyCo.propTypes = {
```jsx
MyCo.propTypes = {
array: React.PropTypes.array,
arrayOf: React.PropTypes.arrayOf(React.PropTypes.number),
object: React.PropTypes.object,
objectOf: React.PropTypes.objectOf(React.PropTypes.number),
message: React.PropTypes.instanceOf(Message),
list: PropTypes.array,
ages: PropTypes.arrayOf(PropTypes.number),
user: PropTypes.object,
user: PropTypes.objectOf(PropTypes.number),
message: PropTypes.instanceOf(Message)
}
```
object2: React.PropTypes.shape({
color: React.PropTypes.string,
size: React.PropTypes.number
```jsx
MyCo.propTypes = {
user: PropTypes.shape({
name: PropTypes.string,
age: PropTypes.number
})
}
```
@ -376,7 +388,11 @@ var style = { height: 10 }
return <div style={style}></div>
```
See [inline styles](https://facebook.github.io/react/tips/inline-styles.html).
```jsx
return <div style={{ margin: 0, padding: 0 }}></div>
```
See: [Inline styles](https://facebook.github.io/react/tips/inline-styles.html)
### Inner HTML
@ -385,7 +401,7 @@ function markdownify() { return "<p>...</p>"; }
<div dangerouslySetInnerHTML={{__html: markdownify()}} />
```
See [dangerously set innerHTML](https://facebook.github.io/react/tips/dangerously-set-inner-html.html).
See: [Dangerously set innerHTML](https://facebook.github.io/react/tips/dangerously-set-inner-html.html)
### Lists