rm pageheaderwarp in blocks

EditorKoni/src/components/PageHeaderWrapper/index.less

-@import '~antd/es/style/themes/default.less';
-
-.children-content {
-  margin: 24px 24px 0;
-}
-
-.main {
-  .detail {
-    display: flex;
-  }
-
-  .row {
-    display: flex;
-    width: 100%;
-  }
-
-  .title-content {
-    margin-bottom: 16px;
-  }
-
-  @media screen and (max-width: @screen-sm) {
-    .content {
-      margin: 24px 0 0;
-    }
-  }
-
-  .title,
-  .content {
-    flex: auto;
-  }
-
-  .extraContent,
-  .main {
-    flex: 0 1 auto;
-  }
-
-  .main {
-    width: 100%;
-  }
-
-  .title {
-    margin-bottom: 16px;
-  }
-
-  .logo,
-  .content,
-  .extraContent {
-    margin-bottom: 16px;
-  }
-
-  .extraContent {
-    min-width: 242px;
-    margin-left: 88px;
-    text-align: right;
-  }
-}
-
-@media screen and (max-width: @screen-xl) {
-  .extraContent {
-    margin-left: 44px;
-  }
-}
-
-@media screen and (max-width: @screen-lg) {
-  .extraContent {
-    margin-left: 20px;
-  }
-}
-
-@media screen and (max-width: @screen-md) {
-  .row {
-    display: block;
-  }
-
-  .action,
-  .extraContent {
-    margin-left: 0;
-    text-align: left;
-  }
-}
-
-@media screen and (max-width: @screen-sm) {
-  .detail {
-    display: block;
-  }
-}

EditorKoni/src/components/PageHeaderWrapper/index.tsx

-import React from 'react';
-import { RouteContext, GridContent } from '@ant-design/pro-layout';
-import { PageHeader, Tabs, Typography } from 'antd';
-import styles from './index.less';
-import { TabsProps } from 'antd/es/tabs';
-interface IPageHeaderTabConfig {
-  tabList?: Array<{
-    key: string;
-    tab: string;
-  }>;
-  tabActiveKey?: TabsProps['activeKey'];
-  onTabChange?: TabsProps['onChange'];
-  tabBarExtraContent?: TabsProps['tabBarExtraContent'];
-}
-
-interface IPageHeaderWrapperProps extends IPageHeaderTabConfig {
-  content?: React.ReactNode;
-  title?: React.ReactNode;
-  extraContent?: React.ReactNode;
-}
-
-/**
- * render Footer tabList
- * In order to be compatible with the old version of the PageHeader
- * basically all the functions are implemented.
- */
-const renderFooter = ({
-  tabList,
-  tabActiveKey,
-  onTabChange,
-  tabBarExtraContent,
-}: IPageHeaderTabConfig) => {
-  return tabList && tabList.length ? (
-    <Tabs
-      className={styles.tabs}
-      activeKey={tabActiveKey}
-      onChange={key => {
-        if (onTabChange) {
-          onTabChange(key);
-        }
-      }}
-      tabBarExtraContent={tabBarExtraContent}
-    >
-      {tabList.map(item => (
-        <Tabs.TabPane tab={item.tab} key={item.key} />
-      ))}
-    </Tabs>
-  ) : null;
-};
-
-const PageHeaderWrapper: React.SFC<IPageHeaderWrapperProps> = ({
-  children,
-  title,
-  content,
-  extraContent,
-  ...restProps
-}) => (
-  <RouteContext.Consumer>
-    {value => (
-      <div style={{ margin: '-24px -24px 0' }}>
-        <PageHeader
-          {...value}
-          {...restProps}
-          title={
-            <Typography.Title
-              level={4}
-              style={{
-                margin: 0,
-              }}
-            >
-              {title || value.title}
-            </Typography.Title>
-          }
-          footer={renderFooter(restProps)}
-        >
-          <div className={styles.detail}>
-            <div className={styles.main}>
-              <div className={styles.row}>
-                {content && <div className={styles.content}>{content}</div>}
-                {extraContent && <div className={styles.extraContent}>{extraContent}</div>}
-              </div>
-            </div>
-          </div>
-        </PageHeader>
-        {children ? (
-          <GridContent>
-            <div className={styles['children-content']}>{children}</div>
-          </GridContent>
-        ) : null}
-      </div>
-    )}
-  </RouteContext.Consumer>
-);
-
-export default PageHeaderWrapper;

EditorMind/src/components/PageHeaderWrapper/index.less

-@import '~antd/es/style/themes/default.less';
-
-.children-content {
-  margin: 24px 24px 0;
-}
-
-.main {
-  .detail {
-    display: flex;
-  }
-
-  .row {
-    display: flex;
-    width: 100%;
-  }
-
-  .title-content {
-    margin-bottom: 16px;
-  }
-
-  @media screen and (max-width: @screen-sm) {
-    .content {
-      margin: 24px 0 0;
-    }
-  }
-
-  .title,
-  .content {
-    flex: auto;
-  }
-
-  .extraContent,
-  .main {
-    flex: 0 1 auto;
-  }
-
-  .main {
-    width: 100%;
-  }
-
-  .title {
-    margin-bottom: 16px;
-  }
-
-  .logo,
-  .content,
-  .extraContent {
-    margin-bottom: 16px;
-  }
-
-  .extraContent {
-    min-width: 242px;
-    margin-left: 88px;
-    text-align: right;
-  }
-}
-
-@media screen and (max-width: @screen-xl) {
-  .extraContent {
-    margin-left: 44px;
-  }
-}
-
-@media screen and (max-width: @screen-lg) {
-  .extraContent {
-    margin-left: 20px;
-  }
-}
-
-@media screen and (max-width: @screen-md) {
-  .row {
-    display: block;
-  }
-
-  .action,
-  .extraContent {
-    margin-left: 0;
-    text-align: left;
-  }
-}
-
-@media screen and (max-width: @screen-sm) {
-  .detail {
-    display: block;
-  }
-}

EditorMind/src/components/PageHeaderWrapper/index.tsx

-import React from 'react';
-import { RouteContext, GridContent } from '@ant-design/pro-layout';
-import { PageHeader, Tabs, Typography } from 'antd';
-import styles from './index.less';
-import { TabsProps } from 'antd/es/tabs';
-interface IPageHeaderTabConfig {
-  tabList?: Array<{
-    key: string;
-    tab: string;
-  }>;
-  tabActiveKey?: TabsProps['activeKey'];
-  onTabChange?: TabsProps['onChange'];
-  tabBarExtraContent?: TabsProps['tabBarExtraContent'];
-}
-
-interface IPageHeaderWrapperProps extends IPageHeaderTabConfig {
-  content?: React.ReactNode;
-  title?: React.ReactNode;
-  extraContent?: React.ReactNode;
-}
-
-/**
- * render Footer tabList
- * In order to be compatible with the old version of the PageHeader
- * basically all the functions are implemented.
- */
-const renderFooter = ({
-  tabList,
-  tabActiveKey,
-  onTabChange,
-  tabBarExtraContent,
-}: IPageHeaderTabConfig) => {
-  return tabList && tabList.length ? (
-    <Tabs
-      className={styles.tabs}
-      activeKey={tabActiveKey}
-      onChange={key => {
-        if (onTabChange) {
-          onTabChange(key);
-        }
-      }}
-      tabBarExtraContent={tabBarExtraContent}
-    >
-      {tabList.map(item => (
-        <Tabs.TabPane tab={item.tab} key={item.key} />
-      ))}
-    </Tabs>
-  ) : null;
-};
-
-const PageHeaderWrapper: React.SFC<IPageHeaderWrapperProps> = ({
-  children,
-  title,
-  content,
-  extraContent,
-  ...restProps
-}) => (
-  <RouteContext.Consumer>
-    {value => (
-      <div style={{ margin: '-24px -24px 0' }}>
-        <PageHeader
-          {...value}
-          {...restProps}
-          title={
-            <Typography.Title
-              level={4}
-              style={{
-                margin: 0,
-              }}
-            >
-              {title || value.title}
-            </Typography.Title>
-          }
-          footer={renderFooter(restProps)}
-        >
-          <div className={styles.detail}>
-            <div className={styles.main}>
-              <div className={styles.row}>
-                {content && <div className={styles.content}>{content}</div>}
-                {extraContent && <div className={styles.extraContent}>{extraContent}</div>}
-              </div>
-            </div>
-          </div>
-        </PageHeader>
-        {children ? (
-          <GridContent>
-            <div className={styles['children-content']}>{children}</div>
-          </GridContent>
-        ) : null}
-      </div>
-    )}
-  </RouteContext.Consumer>
-);
-
-export default PageHeaderWrapper;

FormBasicForm/src/components/PageHeaderWrapper/index.less

-@import '~antd/es/style/themes/default.less';
-
-.content {
-  margin: 24px 24px 0;
-}
-
-@media screen and (max-width: @screen-sm) {
-  .content {
-    margin: 24px 0 0;
-  }
-}

FormBasicForm/src/components/PageHeaderWrapper/index.tsx

-import React from 'react';
-import { RouteContext } from '@ant-design/pro-layout';
-import { PageHeader, Typography } from 'antd';
-import styles from './index.less';
-
-interface IPageHeaderWrapperProps {
-  content: React.ReactNode;
-  title?: React.ReactNode;
-}
-
-const PageHeaderWrapper: React.SFC<IPageHeaderWrapperProps> = ({
-  children,
-  title,
-  content,
-  ...restProps
-}) => (
-  <RouteContext.Consumer>
-    {value => (
-      <div style={{ margin: '-24px -24px 0' }}>
-        <PageHeader
-          {...value}
-          title={
-            <Typography.Title
-              level={4}
-              style={{
-                margin: 0,
-              }}
-            >
-              {title || value.title}
-            </Typography.Title>
-          }
-          {...restProps}
-        >
-          {content}
-        </PageHeader>
-        {children ? <div className={styles.content}>{children}</div> : null}
-      </div>
-    )}
-  </RouteContext.Consumer>
-);
-
-export default PageHeaderWrapper;

FormStepForm/src/components/PageHeaderWrapper/index.less

-@import '~antd/es/style/themes/default.less';
-
-.children-content {
-  margin: 24px 24px 0;
-}
-
-.main {
-  .detail {
-    display: flex;
-  }
-
-  .row {
-    display: flex;
-    width: 100%;
-  }
-
-  .title-content {
-    margin-bottom: 16px;
-  }
-
-  @media screen and (max-width: @screen-sm) {
-    .content {
-      margin: 24px 0 0;
-    }
-  }
-
-  .title,
-  .content {
-    flex: auto;
-  }
-
-  .extraContent,
-  .main {
-    flex: 0 1 auto;
-  }
-
-  .main {
-    width: 100%;
-  }
-
-  .title {
-    margin-bottom: 16px;
-  }
-
-  .logo,
-  .content,
-  .extraContent {
-    margin-bottom: 16px;
-  }
-
-  .extraContent {
-    min-width: 242px;
-    margin-left: 88px;
-    text-align: right;
-  }
-}
-
-@media screen and (max-width: @screen-xl) {
-  .extraContent {
-    margin-left: 44px;
-  }
-}
-
-@media screen and (max-width: @screen-lg) {
-  .extraContent {
-    margin-left: 20px;
-  }
-}
-
-@media screen and (max-width: @screen-md) {
-  .row {
-    display: block;
-  }
-
-  .action,
-  .extraContent {
-    margin-left: 0;
-    text-align: left;
-  }
-}
-
-@media screen and (max-width: @screen-sm) {
-  .detail {
-    display: block;
-  }
-}

FormStepForm/src/components/PageHeaderWrapper/index.tsx

-import React from 'react';
-import { RouteContext } from '@ant-design/pro-layout';
-import { PageHeader, Typography } from 'antd';
-import styles from './index.less';
-import { GridContent } from '@ant-design/pro-layout';
-
-interface IPageHeaderWrapperProps {
-  content?: React.ReactNode;
-  title?: React.ReactNode;
-  extraContent?: React.ReactNode;
-}
-
-const PageHeaderWrapper: React.SFC<IPageHeaderWrapperProps> = ({
-  children,
-  title,
-  content,
-  extraContent,
-  ...restProps
-}) => (
-  <RouteContext.Consumer>
-    {value => (
-      <div style={{ margin: '-24px -24px 0' }}>
-        <PageHeader
-          {...value}
-          title={
-            <Typography.Title
-              level={4}
-              style={{
-                margin: 0,
-              }}
-            >
-              {title || value.title}
-            </Typography.Title>
-          }
-          {...restProps}
-        >
-          <div className={styles.detail}>
-            <div className={styles.main}>
-              <div className={styles.row}>
-                {content && <div className={styles.content}>{content}</div>}
-                {extraContent && <div className={styles.extraContent}>{extraContent}</div>}
-              </div>
-            </div>
-          </div>
-        </PageHeader>
-        {children ? (
-          <GridContent>
-            <div className={styles['children-content']}>{children}</div>
-          </GridContent>
-        ) : null}
-      </div>
-    )}
-  </RouteContext.Consumer>
-);
-
-export default PageHeaderWrapper;

ListCardList/src/components/PageHeaderWrapper/index.less

-@import '~antd/es/style/themes/default.less';
-
-.children-content {
-  margin: 24px 24px 0;
-}
-
-.main {
-  .detail {
-    display: flex;
-  }
-
-  .row {
-    display: flex;
-    width: 100%;
-  }
-
-  .title-content {
-    margin-bottom: 16px;
-  }
-
-  @media screen and (max-width: @screen-sm) {
-    .content {
-      margin: 24px 0 0;
-    }
-  }
-
-  .title,
-  .content {
-    flex: auto;
-  }
-
-  .extraContent,
-  .main {
-    flex: 0 1 auto;
-  }
-
-  .main {
-    width: 100%;
-  }
-
-  .title {
-    margin-bottom: 16px;
-  }
-
-  .logo,
-  .content,
-  .extraContent {
-    margin-bottom: 16px;
-  }
-
-  .extraContent {
-    min-width: 242px;
-    margin-left: 88px;
-    text-align: right;
-  }
-}
-
-@media screen and (max-width: @screen-xl) {
-  .extraContent {
-    margin-left: 44px;
-  }
-}
-
-@media screen and (max-width: @screen-lg) {
-  .extraContent {
-    margin-left: 20px;
-  }
-}
-
-@media screen and (max-width: @screen-md) {
-  .row {
-    display: block;
-  }
-
-  .action,
-  .extraContent {
-    margin-left: 0;
-    text-align: left;
-  }
-}
-
-@media screen and (max-width: @screen-sm) {
-  .detail {
-    display: block;
-  }
-}

ListCardList/src/components/PageHeaderWrapper/index.tsx

-import React from 'react';
-import { RouteContext } from '@ant-design/pro-layout';
-import { PageHeader, Typography } from 'antd';
-import styles from './index.less';
-import { GridContent } from '@ant-design/pro-layout';
-
-interface IPageHeaderWrapperProps {
-  content?: React.ReactNode;
-  title?: React.ReactNode;
-  extraContent?: React.ReactNode;
-}
-
-const PageHeaderWrapper: React.SFC<IPageHeaderWrapperProps> = ({
-  children,
-  title,
-  content,
-  extraContent,
-  ...restProps
-}) => (
-  <RouteContext.Consumer>
-    {value => (
-      <div style={{ margin: '-24px -24px 0' }}>
-        <PageHeader
-          {...value}
-          title={
-            <Typography.Title
-              level={4}
-              style={{
-                margin: 0,
-              }}
-            >
-              {title || value.title}
-            </Typography.Title>
-          }
-          {...restProps}
-        >
-          <div className={styles.detail}>
-            <div className={styles.main}>
-              <div className={styles.row}>
-                {content && <div className={styles.content}>{content}</div>}
-                {extraContent && <div className={styles.extraContent}>{extraContent}</div>}
-              </div>
-            </div>
-          </div>
-        </PageHeader>
-        {children ? (
-          <GridContent>
-            <div className={styles['children-content']}>{children}</div>
-          </GridContent>
-        ) : null}
-      </div>
-    )}
-  </RouteContext.Consumer>
-);
-
-export default PageHeaderWrapper;

ListSearch/src/components/PageHeaderWrapper/index.less

-@import '~antd/es/style/themes/default.less';
-
-.children-content {
-  margin: 24px 24px 0;
-}
-
-.main {
-  .detail {
-    display: flex;
-  }
-
-  .row {
-    display: flex;
-    width: 100%;
-  }
-
-  .title-content {
-    margin-bottom: 16px;
-  }
-
-  @media screen and (max-width: @screen-sm) {
-    .content {
-      margin: 24px 0 0;
-    }
-  }
-
-  .title,
-  .content {
-    flex: auto;
-  }
-
-  .extraContent,
-  .main {
-    flex: 0 1 auto;
-  }
-
-  .main {
-    width: 100%;
-  }
-
-  .title {
-    margin-bottom: 16px;
-  }
-
-  .logo,
-  .content,
-  .extraContent {
-    margin-bottom: 16px;
-  }
-
-  .extraContent {
-    min-width: 242px;
-    margin-left: 88px;
-    text-align: right;
-  }
-}
-
-@media screen and (max-width: @screen-xl) {
-  .extraContent {
-    margin-left: 44px;
-  }
-}
-
-@media screen and (max-width: @screen-lg) {
-  .extraContent {
-    margin-left: 20px;
-  }
-}
-
-@media screen and (max-width: @screen-md) {
-  .row {
-    display: block;
-  }
-
-  .action,
-  .extraContent {
-    margin-left: 0;
-    text-align: left;
-  }
-}
-
-@media screen and (max-width: @screen-sm) {
-  .detail {
-    display: block;
-  }
-}

ListSearch/src/components/PageHeaderWrapper/index.tsx

-import React from 'react';
-import { RouteContext } from '@ant-design/pro-layout';
-import { PageHeader, Tabs, Typography } from 'antd';
-import styles from './index.less';
-import { GridContent } from '@ant-design/pro-layout';
-import { TabsProps } from 'antd/es/tabs';
-interface IPageHeaderTabConfig {
-  tabList?: Array<{
-    key: string;
-    tab: string;
-  }>;
-  tabActiveKey?: TabsProps['activeKey'];
-  onTabChange?: TabsProps['onChange'];
-  tabBarExtraContent?: TabsProps['tabBarExtraContent'];
-}
-
-interface IPageHeaderWrapperProps extends IPageHeaderTabConfig {
-  content?: React.ReactNode;
-  title?: React.ReactNode;
-  extraContent?: React.ReactNode;
-}
-
-/**
- * render Footer tabList
- * In order to be compatible with the old version of the PageHeader
- * basically all the functions are implemented.
- */
-const renderFooter = ({
-  tabList,
-  tabActiveKey,
-  onTabChange,
-  tabBarExtraContent,
-}: IPageHeaderTabConfig) => {
-  return tabList && tabList.length ? (
-    <Tabs
-      className={styles.tabs}
-      activeKey={tabActiveKey}
-      onChange={key => {
-        if (onTabChange) {
-          onTabChange(key);
-        }
-      }}
-      tabBarExtraContent={tabBarExtraContent}
-    >
-      {tabList.map(item => (
-        <Tabs.TabPane tab={item.tab} key={item.key} />
-      ))}
-    </Tabs>
-  ) : null;
-};
-
-const PageHeaderWrapper: React.SFC<IPageHeaderWrapperProps> = ({
-  children,
-  title,
-  content,
-  extraContent,
-  ...restProps
-}) => (
-  <RouteContext.Consumer>
-    {value => (
-      <div style={{ margin: '-24px -24px 0' }}>
-        <PageHeader
-          {...value}
-          title={
-            <Typography.Title
-              level={4}
-              style={{
-                margin: 0,
-              }}
-            >
-              {title || value.title}
-            </Typography.Title>
-          }
-          {...restProps}
-          footer={renderFooter(restProps)}
-        >
-          <div className={styles.detail}>
-            <div className={styles.main}>
-              <div className={styles.row}>
-                {content && <div className={styles.content}>{content}</div>}
-                {extraContent && <div className={styles.extraContent}>{extraContent}</div>}
-              </div>
-            </div>
-          </div>
-        </PageHeader>
-        {children ? (
-          <GridContent>
-            <div className={styles['children-content']}>{children}</div>
-          </GridContent>
-        ) : null}
-      </div>
-    )}
-  </RouteContext.Consumer>
-);
-
-export default PageHeaderWrapper;

ListSearchApplications/src/components/PageHeaderWrapper/index.less

-@import '~antd/es/style/themes/default.less';
-
-.children-content {
-  margin: 24px 24px 0;
-}
-
-.main {
-  .detail {
-    display: flex;
-  }
-
-  .row {
-    display: flex;
-    width: 100%;
-  }
-
-  .title-content {
-    margin-bottom: 16px;
-  }
-
-  @media screen and (max-width: @screen-sm) {
-    .content {
-      margin: 24px 0 0;
-    }
-  }
-
-  .title,
-  .content {
-    flex: auto;
-  }
-
-  .extraContent,
-  .main {
-    flex: 0 1 auto;
-  }
-
-  .main {
-    width: 100%;
-  }
-
-  .title {
-    margin-bottom: 16px;
-  }
-
-  .logo,
-  .content,
-  .extraContent {
-    margin-bottom: 16px;
-  }
-
-  .extraContent {
-    min-width: 242px;
-    margin-left: 88px;
-    text-align: right;
-  }
-}
-
-@media screen and (max-width: @screen-xl) {
-  .extraContent {
-    margin-left: 44px;
-  }
-}
-
-@media screen and (max-width: @screen-lg) {
-  .extraContent {
-    margin-left: 20px;
-  }
-}
-
-@media screen and (max-width: @screen-md) {
-  .row {
-    display: block;
-  }
-
-  .action,
-  .extraContent {
-    margin-left: 0;
-    text-align: left;
-  }
-}
-
-@media screen and (max-width: @screen-sm) {
-  .detail {
-    display: block;
-  }
-}

ListSearchApplications/src/components/PageHeaderWrapper/index.tsx

-import React from 'react';
-import { RouteContext } from '@ant-design/pro-layout';
-import { PageHeader, Typography } from 'antd';
-import styles from './index.less';
-import { GridContent } from '@ant-design/pro-layout';
-
-interface IPageHeaderWrapperProps {
-  content?: React.ReactNode;
-  title?: React.ReactNode;
-  extraContent?: React.ReactNode;
-}
-
-const PageHeaderWrapper: React.SFC<IPageHeaderWrapperProps> = ({
-  children,
-  title,
-  content,
-  extraContent,
-  ...restProps
-}) => (
-  <RouteContext.Consumer>
-    {value => (
-      <div style={{ margin: '-24px -24px 0' }}>
-        <PageHeader
-          {...value}
-          title={
-            <Typography.Title
-              level={4}
-              style={{
-                margin: 0,
-              }}
-            >
-              {title || value.title}
-            </Typography.Title>
-          }
-          {...restProps}
-        >
-          <div className={styles.detail}>
-            <div className={styles.main}>
-              <div className={styles.row}>
-                {content && <div className={styles.content}>{content}</div>}
-                {extraContent && <div className={styles.extraContent}>{extraContent}</div>}
-              </div>
-            </div>
-          </div>
-        </PageHeader>
-        {children ? (
-          <GridContent>
-            <div className={styles['children-content']}>{children}</div>
-          </GridContent>
-        ) : null}
-      </div>
-    )}
-  </RouteContext.Consumer>
-);
-
-export default PageHeaderWrapper;

ProfileBasic/src/components/PageHeaderWrapper/index.less

-@import '~antd/es/style/themes/default.less';
-
-.content {
-  margin: 24px 24px 0;
-}
-
-@media screen and (max-width: @screen-sm) {
-  .content {
-    margin: 24px 0 0;
-  }
-}

ProfileBasic/src/components/PageHeaderWrapper/index.tsx

-import React from 'react';
-import { RouteContext } from '@ant-design/pro-layout';
-import { PageHeader, Typography } from 'antd';
-import styles from './index.less';
-
-interface IPageHeaderWrapperProps {
-  content?: React.ReactNode;
-  title?: React.ReactNode;
-}
-
-const PageHeaderWrapper: React.SFC<IPageHeaderWrapperProps> = ({ children, content, title }) => (
-  <RouteContext.Consumer>
-    {value => (
-      <div style={{ margin: '-24px -24px 0' }}>
-        <PageHeader
-          {...value}
-          title={
-            <Typography.Title
-              level={4}
-              style={{
-                margin: 0,
-              }}
-            >
-              {title || value.title}
-            </Typography.Title>
-          }
-        >
-          {content}
-        </PageHeader>
-        {children ? <div className={styles.content}>{children}</div> : null}
-      </div>
-    )}
-  </RouteContext.Consumer>
-);
-
-export default PageHeaderWrapper;

_scripts/screenshot.js

@@ -7,9 +7,11 @@ const { join, dirname } = require('path');
 const fs = require('fs');
 const getNpmRegistry = require('getnpmregistry');
 const execa = require('execa');
+const { kill } = require('cross-port-killer');
 
 const env = Object.create(process.env);
 env.BROWSER = 'none';
+env.PORT = process.env.PORT || '2144';
 env.TEST = true;
 env.COMPRESS = 'none';
 env.PROGRESS = 'none';
@@ -36,6 +38,9 @@ const startServer = async path => {
         return resolve(startServer);
       }
     });
+    startServer.on('exit', () => {
+      kill(env.PORT || 8000);
+    });
   });
 };
 
@@ -58,9 +63,10 @@ const autoScroll = page => {
 };
 
 const getImage = async (page, path) => {
+  kill(env.PORT || 8000);
   const server = await startServer(path);
 
-  await page.reload('http://127.0.0.1:8000');
+  await page.reload(`http://127.0.0.1:${env.PORT}`);
 
   await page.setViewport({
     width: 1440,
@@ -73,7 +79,6 @@ const getImage = async (page, path) => {
     path: join(path, 'snapshot.png'),
     fullPage: true,
   });
-
   server.kill();
 };
 
@@ -89,7 +94,7 @@ const openBrowser = async () => {
     ],
   });
   const page = await browser.newPage();
-  page.goto('http://127.0.0.1:8000');
+  page.goto(`http://127.0.0.1:${env.PORT}`);
   return page;
 };