Browse Source

Merge branch 'master' into eslint-typescript

pull/4336/head
陈帅 7 years ago
parent
commit
608257243f
  1. 7
      README.fr-FR.md
  2. 6
      README.ja-JP.md
  3. 6
      README.md
  4. 6
      README.ru-RU.md
  5. 6
      README.tr-TR.md
  6. 6
      README.zh-CN.md
  7. 1
      config/config.ts
  8. 70
      config/plugin.config.ts
  9. 56
      create-umi/README.md
  10. 38
      package.json
  11. 2
      src/components/Authorized/PromiseRender.tsx
  12. 27
      src/components/SettingDrawer/themeColorClient.js
  13. 32
      src/layouts/BasicLayout.tsx
  14. 14
      src/models/setting.ts
  15. 1
      src/typings.d.ts
  16. 20
      src/utils/utils.ts

7
README.fr-FR.md

@ -128,3 +128,10 @@ Toute forme de contribution est la bienvenue, voici quelques exemples de façons
- Utiliser Ant Design Pro dans votre travail quotidien.
- Soumettre des [issues](http://github.com/ant-design/ant-design-pro/issues) pour reporter les bugs ou poser des questions.
- Proposer des [pull requests](http://github.com/ant-design/ant-design-pro/pulls) pour améliorer notre code.
<div align="center">
<a href="https://www.netlify.com">
<img src="https://www.netlify.com/img/global/badges/netlify-color-bg.svg"/>
</a>
</div>

6
README.ja-JP.md

@ -130,3 +130,9 @@ Gitpod(GitHub 用の無料オンライン開発環境)でプロジェクト
- 更新すること。 改善を、[pull requests](http://github.com/ant-design/ant-design-pro/pulls) で送ってください。
[![DevDependencies](https://img.shields.io/david/dev/ant-design/ant-design-pro.svg)](https://david-dm.org/ant-design/ant-design-pro?type=dev)
<div align="center">
<a href="https://www.netlify.com">
<img src="https://www.netlify.com/img/global/badges/netlify-color-bg.svg"/>
</a>
</div>

6
README.md

@ -130,3 +130,9 @@ Any type of contribution is welcome, here are some examples of how you may contr
- Use Ant Design Pro in your daily work.
- Submit [issues](http://github.com/ant-design/ant-design-pro/issues) to report bugs or ask questions.
- Propose [pull requests](http://github.com/ant-design/ant-design-pro/pulls) to improve our code.
<div align="center">
<a href="https://www.netlify.com">
<img src="https://www.netlify.com/img/global/badges/netlify-color-bg.svg"/>
</a>
</div>

6
README.ru-RU.md

@ -94,3 +94,9 @@ $ npm start # visit http://localhost:8000
- Использовать Ant Design Pro в ежедневной работе.
- Создавать [задачи](http://github.com/ant-design/ant-design-pro/issues) заводить баги или отвечать на вопросы.
- Делать [pull-реквесты](http://github.com/ant-design/ant-design-pro/pulls) для совершенствования нашего кода.
<div align="center">
<a href="https://www.netlify.com">
<img src="https://www.netlify.com/img/global/badges/netlify-color-bg.svg"/>
</a>
</div>

6
README.tr-TR.md

@ -122,3 +122,9 @@ Her türlü desteğinize açığız, bu projeye nasıl katkıda bulunabileceğin
- Günlük işinizde Ant Design Pro kullanın.
- Hataları bildirmek veya soru sormak için [issues](http://github.com/ant-design/ant-design-pro/issues) gönderin.
- kodumuzu geliştirmek için [pull requests](http://github.com/ant-design/ant-design-pro/pulls) gönderin.
<div align="center">
<a href="https://www.netlify.com">
<img src="https://www.netlify.com/img/global/badges/netlify-color-bg.svg"/>
</a>
</div>

6
README.zh-CN.md

@ -120,3 +120,9 @@ $ npm run docker-prod:build
- 在你的公司或个人项目中使用 Ant Design Pro。
- 通过 [Issue](http://github.com/ant-design/ant-design-pro/issues) 报告 bug 或进行咨询。
- 提交 [Pull Request](http://github.com/ant-design/ant-design-pro/pulls) 改进 Pro 的代码。
<div align="center">
<a href="https://www.netlify.com">
<img src="https://www.netlify.com/img/global/badges/netlify-color-bg.svg"/>
</a>
</div>

1
config/config.ts

@ -5,6 +5,7 @@ import defaultSettings from './defaultSettings';
import os from 'os';
import slash from 'slash2';
import webpackPlugin from './plugin.config';
const { pwa, primaryColor } = defaultSettings;
// preview.pro.ant.design only do not use in your production ;

70
config/plugin.config.ts

@ -1,7 +1,8 @@
// Change theme plugin
import AntDesignThemePlugin from 'antd-theme-webpack-plugin';
import MergeLessPlugin from 'antd-pro-merge-less';
// eslint-disable-next-line eslint-comments/abdeils - enable - pair;
/* eslint-disable import/no-extraneous-dependencies */
import ThemeColorReplacer from 'webpack-theme-color-replacer';
import generate from '@ant-design/colors/lib/generate';
import path from 'path';
function getModulePackageName(module: { context: string }) {
@ -30,27 +31,45 @@ export default (config: any) => {
process.env.NODE_ENV !== 'production'
) {
// 将所有 less 合并为一个供 themePlugin使用
const outFile = path.join(__dirname, '../.temp/ant-design-pro.less');
const stylesDir = path.join(__dirname, '../src/');
config.plugin('merge-less').use(MergeLessPlugin, [
{
stylesDir,
outFile,
},
]);
// const outFile = path.join(__dirname, '../.temp/ant-design-pro.less');
// const stylesDir = path.join(__dirname, '../src/');
config.plugin('ant-design-theme').use(AntDesignThemePlugin, [
// config.plugin('merge-less').use(MergeLessPlugin, [
// {
// stylesDir,
// outFile,
// },
// ]);
config.plugin('webpack-theme-color-replacer').use(ThemeColorReplacer, [
{
antDir: path.join(__dirname, '../node_modules/antd'),
stylesDir,
varFile: path.join(__dirname, '../node_modules/antd/lib/style/themes/default.less'),
mainLessFile: outFile, // themeVariables: ['@primary-color'],
indexFileName: 'index.html',
generateOne: true,
lessUrl: 'https://gw.alipayobjects.com/os/lib/less.js/3.8.1/less.min.js',
fileName: 'css/theme-colors.css',
matchColors: getAntdSerials('#1890ff'), // 主色系列
// 改变样式选择器,解决样式覆盖问题
changeSelector(selector: string): string {
switch (selector) {
case '.ant-calendar-today .ant-calendar-date':
return ':not(.ant-calendar-selected-date)' + selector;
case '.ant-btn:focus,.ant-btn:hover':
return '.ant-btn:focus:not(.ant-btn-primary),.ant-btn:hover:not(.ant-btn-primary)';
case '.ant-btn.active,.ant-btn:active':
return '.ant-btn.active:not(.ant-btn-primary),.ant-btn:active:not(.ant-btn-primary)';
default:
return selector;
}
},
},
]);
// config.plugin('ant-design-theme').use(AntDesignThemePlugin, [
// {
// antDir: path.join(__dirname, '../node_modules/antd'),
// stylesDir,
// varFile: path.join(__dirname, '../node_modules/antd/lib/style/themes/default.less'),
// mainLessFile: outFile, // themeVariables: ['@primary-color'],
// indexFileName: 'index.html',
// generateOne: true,
// lessUrl: 'https://gw.alipayobjects.com/os/lib/less.js/3.8.1/less.min.js',
// },
// ]);
}
// optimize chunks
config.optimization
@ -82,3 +101,14 @@ export default (config: any) => {
},
});
};
const getAntdSerials = (color: string) => {
const lightNum = 9;
const devide10 = 10;
// 淡化(即less的tint)
const lightens = new Array(lightNum).fill(undefined).map((_, i: number) => {
return ThemeColorReplacer.varyColor.lighten(color, i / devide10);
});
const colorPalettes = generate(color);
return lightens.concat(colorPalettes);
};

56
create-umi/README.md

@ -1,56 +0,0 @@
# Ant Design Pro
This project is initialized with [Ant Design Pro](https://pro.ant.design). Follow is the quick guide for how to use.
## Environment Prepare
Install `node_modules`:
```bash
npm install
```
or
```bash
yarn
```
## Provided Scripts
Ant Design Pro provides some useful script to help you quick start and build with web project, code style check and test.
Scripts provided in `package.json`. It's safe to modify or add additional script:
### Start project
```bash
npm start
```
### Build project
```bash
npm run build
```
### Check code style
```bash
npm run lint
```
You can also use script to auto fix some lint error:
```bash
npm run lint:fix
```
### Test code
```bash
npm test
```
## More
You can view full document on our [official website](https://pro.ant.design). And welcome any feedback in our [github](https://github.com/ant-design/ant-design-pro).

38
package.json

@ -14,9 +14,9 @@
"docker:push": "npm run docker-hub:build && npm run docker:tag && docker push antdesign/ant-design-pro",
"docker:tag": "docker tag ant-design-pro antdesign/ant-design-pro",
"fetch:blocks": "node ./scripts/fetch-blocks.js",
"format-imports": "import-sort --write '**/*.{js,jsx,ts,tsx}'",
"functions:build": "netlify-lambda build ./lambda",
"functions:run": "cross-env NODE_ENV=dev netlify-lambda serve ./lambda",
"generateMock": "node ./scripts/generateMock",
"lint": "npm run lint:js && npm run lint:style && npm run lint:prettier",
"lint-staged": "lint-staged",
"lint-staged:js": "eslint --ext .js,.jsx,.ts,.tsx ",
@ -30,8 +30,7 @@
"start:no-mock": "cross-env MOCK=none umi dev",
"test": "umi test",
"test:all": "node ./tests/run-tests.js",
"test:component": "umi test ./src/components",
"format-imports": "import-sort --write '**/*.{js,jsx,ts,tsx}'"
"test:component": "umi test ./src/components"
},
"husky": {
"hooks": {
@ -40,11 +39,11 @@
},
"lint-staged": {
"**/*.less": "stylelint --syntax less",
"**/*.{js,ts,tsx}": "npm run lint-staged:js",
"**/*.{js,ts,tsx,md,json,jsx,less}": [
"npm run prettier",
"git add"
]
],
"**/*.{js,ts,tsx}": "npm run lint-staged:js"
},
"browserslist": [
"> 1%",
@ -82,6 +81,7 @@
"umi-request": "^1.0.7"
},
"devDependencies": {
"@ant-design/colors": "^3.1.0",
"@types/classnames": "^2.2.7",
"@types/history": "^4.7.2",
"@types/jest": "^24.0.13",
@ -92,7 +92,6 @@
"@types/react-dom": "^16.8.4",
"@typescript-eslint/eslint-plugin": "^1.9.0",
"antd-pro-merge-less": "^1.0.0",
"antd-theme-webpack-plugin": "^1.2.0",
"babel-eslint": "^10.0.1",
"chalk": "^2.4.2",
"check-prettier": "^1.0.3",
@ -137,7 +136,12 @@
"stylelint-config-rational-order": "^0.1.2",
"stylelint-config-standard": "^18.3.0",
"stylelint-declaration-block-no-ignored-properties": "^2.1.0",
"stylelint-order": "^3.0.0"
"stylelint-order": "^3.0.0",
"tslint": "^5.17.0",
"tslint-config-prettier": "^1.18.0",
"tslint-eslint-rules": "^5.4.0",
"tslint-react": "^4.0.0",
"webpack-theme-color-replacer": "^1.1.5"
},
"optionalDependencies": {
"puppeteer": "^1.17.0"
@ -153,15 +157,16 @@
"scripts/**/*.js"
],
"create-umi": {
"copy": [
[
"create-umi/README.md",
"README.md"
],
[
"create-umi/package.json",
"package.json"
]
"ignoreScript": [
"docker*",
"functions*",
"site",
"generateMock"
],
"ignoreDependencies": [
"netlify*",
"serverless",
"express"
],
"ignore": [
".dockerignore",
@ -174,7 +179,6 @@
"LICENSE",
"netlify.toml",
"README.*.md",
"scripts",
"azure-pipelines.yml",
"docker",
"create-umi"

2
src/components/Authorized/PromiseRender.tsx

@ -1,8 +1,8 @@
import React from 'react';
import { Spin } from 'antd';
// eslint-disable-next-line import/no-cycle
import isEqual from 'lodash/isEqual';
import { isComponentClass } from './Secured';
// eslint-disable-next-line import/no-cycle
interface PromiseRenderProps<T, K> {
ok: T;

27
src/components/SettingDrawer/themeColorClient.js

@ -0,0 +1,27 @@
// eslint-disable-next-line eslint-comments/disable-enable-pair
/* eslint-disable import/no-extraneous-dependencies */
import client from 'webpack-theme-color-replacer/client';
import generate from '@ant-design/colors/lib/generate';
export default {
primaryColor: '#1890ff',
getAntdSerials(color) {
// 淡化(即less的tint)
const lightens = new Array(9).fill().map((t, i) => {
return client.varyColor.lighten(color, i / 10);
});
const colorPalettes = generate(color);
return lightens.concat(colorPalettes);
},
changeColor(newColor) {
const lastColor = this.lastColor || this.primaryColor;
const options = {
cssUrl: '/css/theme-colors.css', // hash模式下用相对路径
oldColors: this.getAntdSerials(lastColor), // current colors array. The same as `matchColors`
newColors: this.getAntdSerials(newColor || this.primaryColor), // new colors array, one-to-one corresponde with `oldColors`
};
const promise = client.changer.changeColor(options, Promise);
this.lastColor = lastColor;
return promise;
},
};

32
src/layouts/BasicLayout.tsx

@ -19,6 +19,7 @@ import RightContent from '@/components/GlobalHeader/RightContent';
import { connect } from 'dva';
import { formatMessage } from 'umi-plugin-react/locale';
import logo from '../assets/logo.svg';
import { isAntDesignPro } from '@/utils/utils';
export interface BasicLayoutProps extends ProLayoutComponentsProps, ConnectProps {
breadcrumbNameMap: {
@ -37,11 +38,39 @@ export type BasicLayoutContext = { [K in 'location']: BasicLayoutProps[K] } & {
const menuDataRender = (menuList: MenuDataItem[]): MenuDataItem[] => {
return menuList.map(item => {
const localItem = { ...item, children: item.children ? menuDataRender(item.children) : [] };
const localItem = {
...item,
children: item.children ? menuDataRender(item.children) : [],
};
return Authorized.check(item.authority, localItem, null) as MenuDataItem;
});
};
const footerRender: BasicLayoutProps['footerRender'] = (_, defaultDom) => {
if (!isAntDesignPro()) {
return defaultDom;
}
return (
<>
{defaultDom}
<div
style={{
padding: '0px 24px 24px',
textAlign: 'center',
}}
>
<a href="https://www.netlify.com" target="_blank" rel="noopener noreferrer">
<img
src="https://www.netlify.com/img/global/badges/netlify-color-bg.svg"
width="82px"
alt="netlify logo"
/>
</a>
</div>
</>
);
};
const BasicLayout: React.FC<BasicLayoutProps> = props => {
const { dispatch, children, settings } = props;
/**
@ -88,6 +117,7 @@ const BasicLayout: React.FC<BasicLayoutProps> = props => {
...routers,
];
}}
footerRender={footerRender}
menuDataRender={menuDataRender}
formatMessage={formatMessage}
rightContentRender={rightProps => <RightContent {...rightProps} />}

14
src/models/setting.ts

@ -1,6 +1,9 @@
import { Reducer } from 'redux';
// eslint-disable-next-line eslint-comments/disable-enable-pair
/* eslint-disable promise/catch-or-return */
import { message } from 'antd';
import { Reducer } from 'redux';
import defaultSettings, { DefaultSettings } from '../../config/defaultSettings';
import themeColorClient from '../components/SettingDrawer/themeColorClient';
export interface SettingModelType {
namespace: 'settings';
@ -10,6 +13,14 @@ export interface SettingModelType {
changeSetting: Reducer<DefaultSettings>;
};
}
const updateTheme = (newPrimaryColor?: string) => {
const timeOut = 0;
const hideMessage = message.loading('正在切换主题!', timeOut);
themeColorClient.changeColor(newPrimaryColor).finally(() => hideMessage());
};
/*
let lessNodesAppended: boolean;
const updateTheme: (primaryColor?: string) => void = primaryColor => {
@ -72,6 +83,7 @@ const updateTheme: (primaryColor?: string) => void = primaryColor => {
buildIt();
}
};
*/
const updateColorWeak: (colorWeak: boolean) => void = colorWeak => {
const root = document.getElementById('root');

1
src/typings.d.ts

@ -19,6 +19,7 @@ declare module 'react-copy-to-clipboard';
declare module 'react-fittext';
declare module '@antv/data-set';
declare module 'nzh/cn';
declare module 'webpack-theme-color-replacer';
// preview.pro.ant.design only do not use in your production ;
// preview.pro.ant.design 专用环境变量,请不要在你的项目中使用它。

20
src/utils/utils.ts

@ -1,18 +1,24 @@
/* eslint no-useless-escape:0 import/prefer-default-export:0 */
const reg = /(((^https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+(?::\d+)?|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)$/;
export function isUrl(path: string): string {
const isUrl = (path: string): boolean => {
return reg.test(path);
}
};
// 给官方演示站点用,用于关闭真实开发环境不需要使用的特性
export function isAntDesignProOrDev(): boolean {
const { NODE_ENV } = process.env;
const isAntDesignPro = (): boolean => {
if (ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION === 'site') {
return true;
}
return window.location.hostname === 'preview.pro.ant.design';
};
// 给官方演示站点用,用于关闭真实开发环境不需要使用的特性
const isAntDesignProOrDev = (): boolean => {
const { NODE_ENV } = process.env;
if (NODE_ENV === 'development') {
return true;
}
return window.location.hostname === 'preview.pro.ant.design';
}
return isAntDesignPro();
};
export { isAntDesignProOrDev, isAntDesignPro, isUrl };

Loading…
Cancel
Save