.pipe(sass().on('error', sass.logError))
sudo npm i -g rekit
mkdir project;
cd project/;
npm init;
npm install ...;git clone project;
cd project/;
npm install;import * as React from 'react';
import styled from 'styled-components';
import { Map } from 'immutable';
import { withRaven } from 'app-lib';
import { SVG } from 'app-common/components';
const Wrapper = styled.div`
position: relative;
margin-top: 32px;
padding-bottom: 56.25%;
height:0;
overflow: hidden;
`;
const IFrame: any = styled.iframe`
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-color: #000;
`;
const Preview: any = styled.div`
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
cursor: pointer;
background-image: url(${({ src }: { src: string }) => src});
background-position: center center;
background-size: cover;
background-color: #000;
`;
const StyledSVG = styled(SVG)`
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
transform: translate(-50%, -50%);
`;
interface Props {
data: Map<any, any>
}
interface State {
isActive: boolean
}
class Embed extends React.Component<Props, State> {
static displayName = 'Embed';
state: State = {
isActive: false,
};
shouldComponentUpdate(nextProps: Props, nextState: State) {
return nextProps.data !== this.props.data ||
nextState.isActive !== this.state.isActive;
}
node: HTMLElement;
getNodeRef = node => this.node = node;
onClickActive = () => {
this.setState(prevState =>({ isActive: !prevState.isActive }));
};
@withRaven
render() {
const { data } = this.props;
const { isActive } = this.state;
const embed = data.getIn(['url', 'embed']);
const preview = data.get('preview');
return (
<Wrapper>
{isActive ? (
<IFrame
getInnerRef={this.getNodeRef}
src={embed + '?autoplay=1'}
/>
) : (
<Preview src={preview} onClick={this.onClickActive}>
<StyledSVG src={require('img/play.svg')} />
</Preview>
)}
</Wrapper>
);
}
}
export default Embed;If a variable is never reassigned, using the const declaration is better. const declaration tells readers, “this variable is never reassigned,” reducing cognitive load and improving maintainability.
const plainObject = { key: 'value' };
axios.post('/somePath', plainObject).then(res => console.log(res));