diff --git a/src/components/ActiveChart/index.js b/src/components/ActiveChart/index.js index 3d9fbbaf2e62d7eff4e9b70ba80375383e4629b4..8d653694d27ab860d260f9bbfd72f4d1d9a4a528 100644 --- a/src/components/ActiveChart/index.js +++ b/src/components/ActiveChart/index.js @@ -1,6 +1,6 @@ import React, { Component } from 'react'; -import { MiniArea } from '../Charts'; -import NumberInfo from '../NumberInfo'; +import { MiniArea } from 'ant-design-pro/lib/Charts'; +import NumberInfo from 'ant-design-pro/lib/NumberInfo'; import styles from './index.less'; diff --git a/src/components/Authorized/Authorized.js b/src/components/Authorized/Authorized.js deleted file mode 100644 index 75d57b88c20c285a188f5a9ef35adcd55146877e..0000000000000000000000000000000000000000 --- a/src/components/Authorized/Authorized.js +++ /dev/null @@ -1,8 +0,0 @@ -import CheckPermissions from './CheckPermissions'; - -const Authorized = ({ children, authority, noMatch = null }) => { - const childrenRender = typeof children === 'undefined' ? null : children; - return CheckPermissions(authority, childrenRender, noMatch); -}; - -export default Authorized; diff --git a/src/components/Authorized/AuthorizedRoute.d.ts b/src/components/Authorized/AuthorizedRoute.d.ts deleted file mode 100644 index 912b283ab81ecddb89f05d4228095c5b05a64803..0000000000000000000000000000000000000000 --- a/src/components/Authorized/AuthorizedRoute.d.ts +++ /dev/null @@ -1,13 +0,0 @@ -import * as React from 'react'; -import { RouteProps } from 'react-router'; - -type authorityFN = (currentAuthority?: string) => boolean; - -type authority = string | string[] | authorityFN | Promise; - -export interface IAuthorizedRouteProps extends RouteProps { - authority: authority; -} -export { authority }; - -export class AuthorizedRoute extends React.Component {} diff --git a/src/components/Authorized/AuthorizedRoute.js b/src/components/Authorized/AuthorizedRoute.js deleted file mode 100644 index 39c6a665f1bf522622ac73e2333f0739c587b1a2..0000000000000000000000000000000000000000 --- a/src/components/Authorized/AuthorizedRoute.js +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import { Route, Redirect } from 'react-router-dom'; -import Authorized from './Authorized'; - -// TODO: umi只会返回render和rest -const AuthorizedRoute = ({ component: Component, render, authority, redirectPath, ...rest }) => ( - } />} - > - (Component ? : render(props))} /> - -); - -export default AuthorizedRoute; diff --git a/src/components/Authorized/CheckPermissions.js b/src/components/Authorized/CheckPermissions.js deleted file mode 100644 index ba83f5b9a14ea01db4824df72db79eb91c19506b..0000000000000000000000000000000000000000 --- a/src/components/Authorized/CheckPermissions.js +++ /dev/null @@ -1,88 +0,0 @@ -import React from 'react'; -import PromiseRender from './PromiseRender'; -import { CURRENT } from './renderAuthorize'; - -function isPromise(obj) { - return ( - !!obj && - (typeof obj === 'object' || typeof obj === 'function') && - typeof obj.then === 'function' - ); -} - -/** - * 通用权限检查方法 - * Common check permissions method - * @param { 权限判定 Permission judgment type string |array | Promise | Function } authority - * @param { 你的权限 Your permission description type:string} currentAuthority - * @param { 通过的组件 Passing components } target - * @param { 未通过的组件 no pass components } Exception - */ -const checkPermissions = (authority, currentAuthority, target, Exception) => { - // 没有判定权限.默认查看所有 - // Retirement authority, return target; - if (!authority) { - return target; - } - // 数组处理 - if (Array.isArray(authority)) { - if (authority.indexOf(currentAuthority) >= 0) { - return target; - } - if (Array.isArray(currentAuthority)) { - for (let i = 0; i < currentAuthority.length; i += 1) { - const element = currentAuthority[i]; - if (authority.indexOf(element) >= 0) { - return target; - } - } - } - return Exception; - } - - // string 处理 - if (typeof authority === 'string') { - if (authority === currentAuthority) { - return target; - } - if (Array.isArray(currentAuthority)) { - for (let i = 0; i < currentAuthority.length; i += 1) { - const element = currentAuthority[i]; - if (authority === element) { - return target; - } - } - } - return Exception; - } - - // Promise 处理 - if (isPromise(authority)) { - return ; - } - - // Function 处理 - if (typeof authority === 'function') { - try { - const bool = authority(currentAuthority); - // 函数执行后返回值是 Promise - if (isPromise(bool)) { - return ; - } - if (bool) { - return target; - } - return Exception; - } catch (error) { - throw error; - } - } - throw new Error('unsupported parameters'); -}; - -export { checkPermissions }; - -const check = (authority, target, Exception) => - checkPermissions(authority, CURRENT, target, Exception); - -export default check; diff --git a/src/components/Authorized/CheckPermissions.test.js b/src/components/Authorized/CheckPermissions.test.js deleted file mode 100644 index 3988d85a18fcfe7412bb72f672ffdf7c2501d8c2..0000000000000000000000000000000000000000 --- a/src/components/Authorized/CheckPermissions.test.js +++ /dev/null @@ -1,55 +0,0 @@ -import { checkPermissions } from './CheckPermissions'; - -const target = 'ok'; -const error = 'error'; - -describe('test CheckPermissions', () => { - it('Correct string permission authentication', () => { - expect(checkPermissions('user', 'user', target, error)).toEqual('ok'); - }); - it('Correct string permission authentication', () => { - expect(checkPermissions('user', 'NULL', target, error)).toEqual('error'); - }); - it('authority is undefined , return ok', () => { - expect(checkPermissions(null, 'NULL', target, error)).toEqual('ok'); - }); - it('currentAuthority is undefined , return error', () => { - expect(checkPermissions('admin', null, target, error)).toEqual('error'); - }); - it('Wrong string permission authentication', () => { - expect(checkPermissions('admin', 'user', target, error)).toEqual('error'); - }); - it('Correct Array permission authentication', () => { - expect(checkPermissions(['user', 'admin'], 'user', target, error)).toEqual('ok'); - }); - it('Wrong Array permission authentication,currentAuthority error', () => { - expect(checkPermissions(['user', 'admin'], 'user,admin', target, error)).toEqual('error'); - }); - it('Wrong Array permission authentication', () => { - expect(checkPermissions(['user', 'admin'], 'guest', target, error)).toEqual('error'); - }); - it('Wrong Function permission authentication', () => { - expect(checkPermissions(() => false, 'guest', target, error)).toEqual('error'); - }); - it('Correct Function permission authentication', () => { - expect(checkPermissions(() => true, 'guest', target, error)).toEqual('ok'); - }); - it('authority is string, currentAuthority is array, return ok', () => { - expect(checkPermissions('user', ['user'], target, error)).toEqual('ok'); - }); - it('authority is string, currentAuthority is array, return ok', () => { - expect(checkPermissions('user', ['user', 'admin'], target, error)).toEqual('ok'); - }); - it('authority is array, currentAuthority is array, return ok', () => { - expect(checkPermissions(['user', 'admin'], ['user', 'admin'], target, error)).toEqual('ok'); - }); - it('Wrong Function permission authentication', () => { - expect(checkPermissions(() => false, ['user'], target, error)).toEqual('error'); - }); - it('Correct Function permission authentication', () => { - expect(checkPermissions(() => true, ['user'], target, error)).toEqual('ok'); - }); - it('authority is undefined , return ok', () => { - expect(checkPermissions(null, ['user'], target, error)).toEqual('ok'); - }); -}); diff --git a/src/components/Authorized/PromiseRender.js b/src/components/Authorized/PromiseRender.js deleted file mode 100644 index 8e2a4059d8689ca1e0be623aedd14cc9a2d75134..0000000000000000000000000000000000000000 --- a/src/components/Authorized/PromiseRender.js +++ /dev/null @@ -1,65 +0,0 @@ -import React from 'react'; -import { Spin } from 'antd'; - -export default class PromiseRender extends React.PureComponent { - state = { - component: null, - }; - - componentDidMount() { - this.setRenderComponent(this.props); - } - - componentDidUpdate(nextProps) { - // new Props enter - this.setRenderComponent(nextProps); - } - - // set render Component : ok or error - setRenderComponent(props) { - const ok = this.checkIsInstantiation(props.ok); - const error = this.checkIsInstantiation(props.error); - props.promise - .then(() => { - this.setState({ - component: ok, - }); - }) - .catch(() => { - this.setState({ - component: error, - }); - }); - } - - // Determine whether the incoming component has been instantiated - // AuthorizedRoute is already instantiated - // Authorized render is already instantiated, children is no instantiated - // Secured is not instantiated - checkIsInstantiation = target => { - if (!React.isValidElement(target)) { - return target; - } - return () => target; - }; - - render() { - const { component: Component } = this.state; - const { ok, error, promise, ...rest } = this.props; - return Component ? ( - - ) : ( -
- -
- ); - } -} diff --git a/src/components/Authorized/Secured.js b/src/components/Authorized/Secured.js deleted file mode 100644 index c935183dac25c82786336cef97cc905220153271..0000000000000000000000000000000000000000 --- a/src/components/Authorized/Secured.js +++ /dev/null @@ -1,55 +0,0 @@ -import React from 'react'; -import Exception from '../Exception'; -import CheckPermissions from './CheckPermissions'; -/** - * 默认不能访问任何页面 - * default is "NULL" - */ -const Exception403 = () => ; - -// Determine whether the incoming component has been instantiated -// AuthorizedRoute is already instantiated -// Authorized render is already instantiated, children is no instantiated -// Secured is not instantiated -const checkIsInstantiation = target => { - if (!React.isValidElement(target)) { - return target; - } - return () => target; -}; - -/** - * 用于判断是否拥有权限访问此view权限 - * authority 支持传入 string, function:()=>boolean|Promise - * e.g. 'user' 只有user用户能访问 - * e.g. 'user,admin' user和 admin 都能访问 - * e.g. ()=>boolean 返回true能访问,返回false不能访问 - * e.g. Promise then 能访问 catch不能访问 - * e.g. authority support incoming string, function: () => boolean | Promise - * e.g. 'user' only user user can access - * e.g. 'user, admin' user and admin can access - * e.g. () => boolean true to be able to visit, return false can not be accessed - * e.g. Promise then can not access the visit to catch - * @param {string | function | Promise} authority - * @param {ReactNode} error 非必需参数 - */ -const authorize = (authority, error) => { - /** - * conversion into a class - * 防止传入字符串时找不到staticContext造成报错 - * String parameters can cause staticContext not found error - */ - let classError = false; - if (error) { - classError = () => error; - } - if (!authority) { - throw new Error('authority is required'); - } - return function decideAuthority(target) { - const component = CheckPermissions(authority, target, classError || Exception403); - return checkIsInstantiation(component); - }; -}; - -export default authorize; diff --git a/src/components/Authorized/demo/AuthorizedArray.md b/src/components/Authorized/demo/AuthorizedArray.md deleted file mode 100644 index 46eaf761ca62cb9fe8cb4a3daa78739213a5fa09..0000000000000000000000000000000000000000 --- a/src/components/Authorized/demo/AuthorizedArray.md +++ /dev/null @@ -1,23 +0,0 @@ ---- -order: 1 -title: - zh-CN: 使用数组作为参数 - en-US: Use Array as a parameter ---- - -Use Array as a parameter - -```jsx -import RenderAuthorized from 'ant-design-pro/lib/Authorized'; -import { Alert } from 'antd'; - -const Authorized = RenderAuthorized('user'); -const noMatch = ; - -ReactDOM.render( - - - , - mountNode, -); -``` diff --git a/src/components/Authorized/demo/AuthorizedFunction.md b/src/components/Authorized/demo/AuthorizedFunction.md deleted file mode 100644 index 8ad8b91e1bd656f5372e06ddadecb9d6e3eb1fb5..0000000000000000000000000000000000000000 --- a/src/components/Authorized/demo/AuthorizedFunction.md +++ /dev/null @@ -1,31 +0,0 @@ ---- -order: 2 -title: - zh-CN: 使用方法作为参数 - en-US: Use function as a parameter ---- - -Use Function as a parameter - -```jsx -import RenderAuthorized from 'ant-design-pro/lib/Authorized'; -import { Alert } from 'antd'; - -const Authorized = RenderAuthorized('user'); -const noMatch = ; - -const havePermission = () => { - return false; -}; - -ReactDOM.render( - - - , - mountNode, -); -``` diff --git a/src/components/Authorized/demo/basic.md b/src/components/Authorized/demo/basic.md deleted file mode 100644 index a5f12f29e23c4a10ca1163efa6635aafafa5ffbd..0000000000000000000000000000000000000000 --- a/src/components/Authorized/demo/basic.md +++ /dev/null @@ -1,25 +0,0 @@ ---- -order: 0 -title: - zh-CN: 基本使用 - en-US: Basic use ---- - -Basic use - -```jsx -import RenderAuthorized from 'ant-design-pro/lib/Authorized'; -import { Alert } from 'antd'; - -const Authorized = RenderAuthorized('user'); -const noMatch = ; - -ReactDOM.render( -
- - - -
, - mountNode, -); -``` diff --git a/src/components/Authorized/demo/secured.md b/src/components/Authorized/demo/secured.md deleted file mode 100644 index 1e9537af19d3613b9ea6684f8933afa283ba1415..0000000000000000000000000000000000000000 --- a/src/components/Authorized/demo/secured.md +++ /dev/null @@ -1,28 +0,0 @@ ---- -order: 3 -title: - zh-CN: 注解基本使用 - en-US: Basic use secured ---- - -secured demo used - -```jsx -import RenderAuthorized from 'ant-design-pro/lib/Authorized'; -import { Alert } from 'antd'; - -const { Secured } = RenderAuthorized('user'); - -@Secured('admin') -class TestSecuredString extends React.Component { - render() { - ; - } -} -ReactDOM.render( -
- -
, - mountNode, -); -``` diff --git a/src/components/Authorized/index.d.ts b/src/components/Authorized/index.d.ts deleted file mode 100644 index b3e2f56c6c3784daa62e908286566c954db1675f..0000000000000000000000000000000000000000 --- a/src/components/Authorized/index.d.ts +++ /dev/null @@ -1,32 +0,0 @@ -import * as React from 'react'; -import AuthorizedRoute, { authority } from './AuthorizedRoute'; -export type IReactComponent

= - | React.StatelessComponent

- | React.ComponentClass

- | React.ClassicComponentClass

; - -type Secured = ( - authority: authority, - error?: React.ReactNode -) => (target: T) => T; - -type check = ( - authority: authority, - target: T, - Exception: S -) => T | S; - -export interface IAuthorizedProps { - authority: authority; - noMatch?: React.ReactNode; -} - -export class Authorized extends React.Component { - public static Secured: Secured; - public static AuthorizedRoute: typeof AuthorizedRoute; - public static check: check; -} - -declare function renderAuthorize(currentAuthority: string): typeof Authorized; - -export default renderAuthorize; diff --git a/src/components/Authorized/index.js b/src/components/Authorized/index.js deleted file mode 100644 index 22ac664d002844304b316e8c4f1acc79ede572d8..0000000000000000000000000000000000000000 --- a/src/components/Authorized/index.js +++ /dev/null @@ -1,11 +0,0 @@ -import Authorized from './Authorized'; -import AuthorizedRoute from './AuthorizedRoute'; -import Secured from './Secured'; -import check from './CheckPermissions'; -import renderAuthorize from './renderAuthorize'; - -Authorized.Secured = Secured; -Authorized.AuthorizedRoute = AuthorizedRoute; -Authorized.check = check; - -export default renderAuthorize(Authorized); diff --git a/src/components/Authorized/index.md b/src/components/Authorized/index.md deleted file mode 100644 index f3b2f80af5ffa27ecb310b6932dc7dfa7c7945c8..0000000000000000000000000000000000000000 --- a/src/components/Authorized/index.md +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: - en-US: Authorized - zh-CN: Authorized -subtitle: 权限 -cols: 1 -order: 15 ---- - -权限组件，通过比对现有权限与准入权限，决定相关元素的展示。 - -## API - -### RenderAuthorized - -`RenderAuthorized: (currentAuthority: string | () => string) => Authorized` - -权限组件默认 export RenderAuthorized 函数，它接收当前权限作为参数，返回一个权限对象，该对象提供以下几种使用方式。 - - -### Authorized - -最基础的权限控制。 - -| 参数 | 说明 | 类型 | 默认值 | -|----------|------------------------------------------|-------------|-------| -| children | 正常渲染的元素，权限判断通过时展示 | ReactNode | - | -| authority | 准入权限/权限判断 | `string | array | Promise | (currentAuthority) => boolean | Promise` | - | -| noMatch | 权限异常渲染元素，权限判断不通过时展示 | ReactNode | - | - -### Authorized.AuthorizedRoute - -| 参数 | 说明 | 类型 | 默认值 | -|----------|------------------------------------------|-------------|-------| -| authority | 准入权限/权限判断 | `string | array | Promise | (currentAuthority) => boolean | Promise` | - | -| redirectPath | 权限异常时重定向的页面路由 | string | - | - -其余参数与 `Route` 相同。 - -### Authorized.Secured - -注解方式，`@Authorized.Secured(authority, error)` - -| 参数 | 说明 | 类型 | 默认值 | -|----------|------------------------------------------|-------------|-------| -| authority | 准入权限/权限判断 | `string | Promise | (currentAuthority) => boolean | Promise` | - | -| error | 权限异常时渲染元素 | ReactNode | | - -### Authorized.check - -函数形式的 Authorized，用于某些不能被 HOC 包裹的组件。 `Authorized.check(authority, target, Exception)` -注意：传入一个 Promise 时，无论正确还是错误返回的都是一个 ReactClass。 - -| 参数 | 说明 | 类型 | 默认值 | -|----------|------------------------------------------|-------------|-------| -| authority | 准入权限/权限判断 | `string | Promise | (currentAuthority) => boolean | Promise` | - | -| target | 权限判断通过时渲染的元素 | ReactNode | - | -| Exception | 权限异常时渲染元素 | ReactNode | - | diff --git a/src/components/Authorized/renderAuthorize.js b/src/components/Authorized/renderAuthorize.js deleted file mode 100644 index be373d996bb38445af1c6e912bdac32ad594747d..0000000000000000000000000000000000000000 --- a/src/components/Authorized/renderAuthorize.js +++ /dev/null @@ -1,25 +0,0 @@ -/* eslint-disable import/no-mutable-exports */ -let CURRENT = 'NULL'; -/** - * use authority or getAuthority - * @param {string|()=>String} currentAuthority - */ -const renderAuthorize = Authorized => currentAuthority => { - if (currentAuthority) { - if (typeof currentAuthority === 'function') { - CURRENT = currentAuthority(); - } - if ( - Object.prototype.toString.call(currentAuthority) === '[object String]' || - Array.isArray(currentAuthority) - ) { - CURRENT = currentAuthority; - } - } else { - CURRENT = 'NULL'; - } - return Authorized; -}; - -export { CURRENT }; -export default Authorized => renderAuthorize(Authorized); diff --git a/src/components/AvatarList/AvatarItem.d.ts b/src/components/AvatarList/AvatarItem.d.ts deleted file mode 100644 index 5681de77c2b3634ee8a54487fe15d07044fa8ca4..0000000000000000000000000000000000000000 --- a/src/components/AvatarList/AvatarItem.d.ts +++ /dev/null @@ -1,10 +0,0 @@ -import * as React from 'react'; -export interface IAvatarItemProps { - tips: React.ReactNode; - src: string; - style?: React.CSSProperties; -} - -export default class AvatarItem extends React.Component { - constructor(props: IAvatarItemProps); -} diff --git a/src/components/AvatarList/demo/maxLength.md b/src/components/AvatarList/demo/maxLength.md deleted file mode 100644 index 76c6b421cb0b976e2b0752a61522fca1f9a747b6..0000000000000000000000000000000000000000 --- a/src/components/AvatarList/demo/maxLength.md +++ /dev/null @@ -1,24 +0,0 @@ ---- -order: 0 -title: - zh-CN: 要显示的最大项目 - en-US: Max Items to Show ---- - -`maxLength` attribute specifies the maximum number of items to show while `excessItemsStyle` style the excess -item component. - -````jsx -import AvatarList from 'ant-design-pro/lib/AvatarList'; - -ReactDOM.render( - - - - - - - - -, mountNode); -```` diff --git a/src/components/AvatarList/demo/simple.md b/src/components/AvatarList/demo/simple.md deleted file mode 100644 index e941aea9b5d9614c11edb84cc9f7975a6087e455..0000000000000000000000000000000000000000 --- a/src/components/AvatarList/demo/simple.md +++ /dev/null @@ -1,20 +0,0 @@ ---- -order: 0 -title: - zh-CN: 基础样例 - en-US: Basic Usage ---- - -Simplest of usage. - -````jsx -import AvatarList from 'ant-design-pro/lib/AvatarList'; - -ReactDOM.render( - - - - - -, mountNode); -```` diff --git a/src/components/AvatarList/index.d.ts b/src/components/AvatarList/index.d.ts deleted file mode 100644 index f49ca010d9fe19febd4eaed391278012109dd444..0000000000000000000000000000000000000000 --- a/src/components/AvatarList/index.d.ts +++ /dev/null @@ -1,14 +0,0 @@ -import * as React from 'react'; -import AvatarItem from './AvatarItem'; - -export interface IAvatarListProps { - size?: 'large' | 'small' | 'mini' | 'default'; - maxLength?: number; - excessItemsStyle?: React.CSSProperties; - style?: React.CSSProperties; - children: React.ReactElement | Array>; -} - -export default class AvatarList extends React.Component { - public static Item: typeof AvatarItem; -} diff --git a/src/components/AvatarList/index.en-US.md b/src/components/AvatarList/index.en-US.md deleted file mode 100644 index 7fc39cc2b72efe91689637bca3603eeb3f2634cf..0000000000000000000000000000000000000000 --- a/src/components/AvatarList/index.en-US.md +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: AvatarList -order: 1 -cols: 1 ---- - -A list of user's avatar for project or group member list frequently. If a large or small AvatarList is desired, set the `size` property to either `large` or `small` and `mini` respectively. Omit the `size` property for a AvatarList with the default size. - -## API - -### AvatarList - -| Property | Description | Type | Default | -| ---------------- | --------------------- | ---------------------------------- | --------- | -| size | size of list | `large`、`small` 、`mini`, `default` | `default` | -| maxLength | max items to show | number | - | -| excessItemsStyle | the excess item style | CSSProperties | - | - -### AvatarList.Item - -| Property | Description | Type | Default | -| -------- | -------------------------------------------- | --------- | ------- | -| tips | title tips for avatar item | ReactNode | - | -| src | the address of the image for an image avatar | string | - | diff --git a/src/components/AvatarList/index.js b/src/components/AvatarList/index.js deleted file mode 100644 index 9af32bcfdaea12c35cdaabda302be4b57622aafd..0000000000000000000000000000000000000000 --- a/src/components/AvatarList/index.js +++ /dev/null @@ -1,61 +0,0 @@ -import React from 'react'; -import { Tooltip, Avatar } from 'antd'; -import classNames from 'classnames'; - -import styles from './index.less'; - -const avatarSizeToClassName = size => - classNames(styles.avatarItem, { - [styles.avatarItemLarge]: size === 'large', - [styles.avatarItemSmall]: size === 'small', - [styles.avatarItemMini]: size === 'mini', - }); - -const AvatarList = ({ children, size, maxLength, excessItemsStyle, ...other }) => { - const numOfChildren = React.Children.count(children); - const numToShow = maxLength >= numOfChildren ? numOfChildren : maxLength; - - const childrenWithProps = React.Children.toArray(children) - .slice(0, numToShow) - .map(child => - React.cloneElement(child, { - size, - }) - ); - - if (numToShow < numOfChildren) { - const cls = avatarSizeToClassName(size); - - childrenWithProps.push( -

  • - {`+${numOfChildren - maxLength}`} -
    • - ); - } - - return ( -
    -
      {childrenWithProps}
    -
    - ); -}; - -const Item = ({ src, size, tips, onClick = () => {} }) => { - const cls = avatarSizeToClassName(size); - - return ( -
  • - {tips ? ( - - - - ) : ( - - )} -
    • - ); -}; - -AvatarList.Item = Item; - -export default AvatarList; diff --git a/src/components/AvatarList/index.less b/src/components/AvatarList/index.less deleted file mode 100644 index 31d670565bd82fe8b08138d5dfa1d8082682aaa8..0000000000000000000000000000000000000000 --- a/src/components/AvatarList/index.less +++ /dev/null @@ -1,50 +0,0 @@ -@import '~antd/lib/style/themes/default.less'; - -.avatarList { - display: inline-block; - ul { - display: inline-block; - margin-left: 8px; - font-size: 0; - } -} - -.avatarItem { - display: inline-block; - font-size: @font-size-base; - margin-left: -8px; - width: @avatar-size-base; - height: @avatar-size-base; - :global { - .ant-avatar { - border: 1px solid #fff; - } - } -} - -.avatarItemLarge { - width: @avatar-size-lg; - height: @avatar-size-lg; -} - -.avatarItemSmall { - width: @avatar-size-sm; - height: @avatar-size-sm; -} - -.avatarItemMini { - width: 20px; - height: 20px; - :global { - .ant-avatar { - width: 20px; - height: 20px; - line-height: 20px; - - .ant-avatar-string { - font-size: 12px; - line-height: 18px; - } - } - } -} diff --git a/src/components/AvatarList/index.test.js b/src/components/AvatarList/index.test.js deleted file mode 100644 index 2b5bc438d882fc608a1e25869118e01c38a4484c..0000000000000000000000000000000000000000 --- a/src/components/AvatarList/index.test.js +++ /dev/null @@ -1,29 +0,0 @@ -import React from 'react'; -import range from 'lodash/range'; -import { mount } from 'enzyme'; -import AvatarList from './index'; - -const renderItems = numItems => - range(numItems).map(i => ( - - )); - -describe('AvatarList', () => { - it('renders all items', () => { - const wrapper = mount({renderItems(4)}); - expect(wrapper.find('AvatarList').length).toBe(1); - expect(wrapper.find('Item').length).toBe(4); - expect(wrapper.findWhere(node => node.key() === 'exceed').length).toBe(0); - }); - - it('renders max of 3 items', () => { - const wrapper = mount({renderItems(4)}); - expect(wrapper.find('AvatarList').length).toBe(1); - expect(wrapper.find('Item').length).toBe(3); - expect(wrapper.findWhere(node => node.key() === 'exceed').length).toBe(1); - }); -}); diff --git a/src/components/AvatarList/index.zh-CN.md b/src/components/AvatarList/index.zh-CN.md deleted file mode 100644 index bdab181ce0ed6f1ff8d07422672085410033a815..0000000000000000000000000000000000000000 --- a/src/components/AvatarList/index.zh-CN.md +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: AvatarList -subtitle: 用户头像列表 -order: 1 -cols: 1 ---- - -一组用户头像，常用在项目/团队成员列表。可通过设置 `size` 属性来指定头像大小。 - -## API - -### AvatarList - -| 参数 | 说明 | 类型 | 默认值 | -| ---------------- | -------- | ---------------------------------- | --------- | -| size | 头像大小 | `large`、`small` 、`mini`, `default` | `default` | -| maxLength | 要显示的最大项目 | number | - | -| excessItemsStyle | 多余的项目风格 | CSSProperties | - | - -### AvatarList.Item - -| 参数 | 说明 | 类型 | 默认值 | -| ---- | ------ | --------- | --- | -| tips | 头像展示文案 | ReactNode | - | -| src | 头像图片连接 | string | - | diff --git a/src/components/Charts/Bar/index.d.ts b/src/components/Charts/Bar/index.d.ts deleted file mode 100644 index 4899082509dacb84701bb2e02fbe69ba1d06e149..0000000000000000000000000000000000000000 --- a/src/components/Charts/Bar/index.d.ts +++ /dev/null @@ -1,15 +0,0 @@ -import * as React from 'react'; -export interface IBarProps { - title: React.ReactNode; - color?: string; - padding?: [number, number, number, number]; - height: number; - data: Array<{ - x: string; - y: number; - }>; - autoLabel?: boolean; - style?: React.CSSProperties; -} - -export default class Bar extends React.Component {} diff --git a/src/components/Charts/Bar/index.js b/src/components/Charts/Bar/index.js deleted file mode 100644 index f0cb65ffee74014dafdb286d2dcc42043ec13c08..0000000000000000000000000000000000000000 --- a/src/components/Charts/Bar/index.js +++ /dev/null @@ -1,113 +0,0 @@ -import React, { Component } from 'react'; -import { Chart, Axis, Tooltip, Geom } from 'bizcharts'; -import Debounce from 'lodash-decorators/debounce'; -import Bind from 'lodash-decorators/bind'; -import autoHeight from '../autoHeight'; -import styles from '../index.less'; - -@autoHeight() -class Bar extends Component { - state = { - autoHideXLabels: false, - }; - - componentDidMount() { - window.addEventListener('resize', this.resize, { passive: true }); - } - - componentWillUnmount() { - window.removeEventListener('resize', this.resize); - } - - handleRoot = n => { - this.root = n; - }; - - handleRef = n => { - this.node = n; - }; - - @Bind() - @Debounce(400) - resize() { - if (!this.node) { - return; - } - const canvasWidth = this.node.parentNode.clientWidth; - const { data = [], autoLabel = true } = this.props; - if (!autoLabel) { - return; - } - const minWidth = data.length * 30; - const { autoHideXLabels } = this.state; - - if (canvasWidth <= minWidth) { - if (!autoHideXLabels) { - this.setState({ - autoHideXLabels: true, - }); - } - } else if (autoHideXLabels) { - this.setState({ - autoHideXLabels: false, - }); - } - } - - render() { - const { - height, - title, - forceFit = true, - data, - color = 'rgba(24, 144, 255, 0.85)', - padding, - } = this.props; - - const { autoHideXLabels } = this.state; - - const scale = { - x: { - type: 'cat', - }, - y: { - min: 0, - }, - }; - - const tooltip = [ - 'x*y', - (x, y) => ({ - name: x, - value: y, - }), - ]; - - return ( -
    -
    - {title &&

    {title}

    } - - - - - - -
    -
    - ); - } -} - -export default Bar; diff --git a/src/components/Charts/ChartCard/index.d.ts b/src/components/Charts/ChartCard/index.d.ts deleted file mode 100644 index 0437c0c857d7f1c63c506c5eb238583a251714d0..0000000000000000000000000000000000000000 --- a/src/components/Charts/ChartCard/index.d.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { CardProps } from 'antd/lib/card'; -import * as React from 'react'; - -export interface IChartCardProps extends CardProps { - title: React.ReactNode; - action?: React.ReactNode; - total?: React.ReactNode | number | (() => React.ReactNode | number); - footer?: React.ReactNode; - contentHeight?: number; - avatar?: React.ReactNode; - style?: React.CSSProperties; -} - -export default class ChartCard extends React.Component {} diff --git a/src/components/Charts/ChartCard/index.js b/src/components/Charts/ChartCard/index.js deleted file mode 100644 index ca6bcb2e6d85a657e399ea39fa31df53aaadd608..0000000000000000000000000000000000000000 --- a/src/components/Charts/ChartCard/index.js +++ /dev/null @@ -1,82 +0,0 @@ -import React from 'react'; -import { Card } from 'antd'; -import classNames from 'classnames'; - -import styles from './index.less'; - -const renderTotal = total => { - let totalDom; - switch (typeof total) { - case 'undefined': - totalDom = null; - break; - case 'function': - totalDom =
    {total()}
    ; - break; - default: - totalDom =
    {total}
    ; - } - return totalDom; -}; - -class ChartCard extends React.PureComponent { - renderConnet = () => { - const { contentHeight, title, avatar, action, total, footer, children, loading } = this.props; - if (loading) { - return false; - } - return ( -
    -
    -
    {avatar}
    -
    -
    - {title} - {action} -
    - {renderTotal(total)} -
    -
    - {children && ( -
    -
    {children}
    -
    - )} - {footer && ( -
    - {footer} -
    - )} -
    - ); - }; - - render() { - const { - loading = false, - contentHeight, - title, - avatar, - action, - total, - footer, - children, - ...rest - } = this.props; - return ( - - {this.renderConnet()} - - ); - } -} - -export default ChartCard; diff --git a/src/components/Charts/ChartCard/index.less b/src/components/Charts/ChartCard/index.less deleted file mode 100644 index 0ddc486b9433457b83cc8813d6f02a100ec2d58f..0000000000000000000000000000000000000000 --- a/src/components/Charts/ChartCard/index.less +++ /dev/null @@ -1,75 +0,0 @@ -@import '~antd/lib/style/themes/default.less'; - -.chartCard { - position: relative; - .chartTop { - position: relative; - overflow: hidden; - width: 100%; - } - .chartTopMargin { - margin-bottom: 12px; - } - .chartTopHasMargin { - margin-bottom: 20px; - } - .metaWrap { - float: left; - } - .avatar { - position: relative; - top: 4px; - float: left; - margin-right: 20px; - img { - border-radius: 100%; - } - } - .meta { - color: @text-color-secondary; - font-size: @font-size-base; - line-height: 22px; - height: 22px; - } - .action { - cursor: pointer; - position: absolute; - top: 4px; - right: 0; - line-height: 1; - } - .total { - overflow: hidden; - text-overflow: ellipsis; - word-break: break-all; - white-space: nowrap; - color: @heading-color; - margin-top: 4px; - margin-bottom: 0; - font-size: 30px; - line-height: 38px; - height: 38px; - } - .content { - margin-bottom: 12px; - position: relative; - width: 100%; - } - .contentFixed { - position: absolute; - left: 0; - bottom: 0; - width: 100%; - } - .footer { - border-top: 1px solid @border-color-split; - padding-top: 9px; - margin-top: 8px; - & > * { - position: relative; - } - } - .footerMargin { - margin-top: 20px; - } -} diff --git a/src/components/Charts/Field/index.d.ts b/src/components/Charts/Field/index.d.ts deleted file mode 100644 index 975fb667d8db178c1154162f4803e20f1c72a8e4..0000000000000000000000000000000000000000 --- a/src/components/Charts/Field/index.d.ts +++ /dev/null @@ -1,8 +0,0 @@ -import * as React from 'react'; -export interface IFieldProps { - label: React.ReactNode; - value: React.ReactNode; - style?: React.CSSProperties; -} - -export default class Field extends React.Component {} diff --git a/src/components/Charts/Field/index.js b/src/components/Charts/Field/index.js deleted file mode 100644 index 22dca86c0dd6ede80de52ca7c124afa12fda4a13..0000000000000000000000000000000000000000 --- a/src/components/Charts/Field/index.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react'; - -import styles from './index.less'; - -const Field = ({ label, value, ...rest }) => ( -
    - {label} - {value} -
    -); - -export default Field; diff --git a/src/components/Charts/Field/index.less b/src/components/Charts/Field/index.less deleted file mode 100644 index 170ddc1d85fd4f1e6dd9f909e481341408269c94..0000000000000000000000000000000000000000 --- a/src/components/Charts/Field/index.less +++ /dev/null @@ -1,17 +0,0 @@ -@import '~antd/lib/style/themes/default.less'; - -.field { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - margin: 0; - .label, - .number { - font-size: @font-size-base; - line-height: 22px; - } - .number { - color: @heading-color; - margin-left: 8px; - } -} diff --git a/src/components/Charts/Gauge/index.d.ts b/src/components/Charts/Gauge/index.d.ts deleted file mode 100644 index 66e3c003a957581d88a06e63b32a7a3e76c5cd3a..0000000000000000000000000000000000000000 --- a/src/components/Charts/Gauge/index.d.ts +++ /dev/null @@ -1,11 +0,0 @@ -import * as React from 'react'; -export interface IGaugeProps { - title: React.ReactNode; - color?: string; - height: number; - bgColor?: number; - percent: number; - style?: React.CSSProperties; -} - -export default class Gauge extends React.Component {} diff --git a/src/components/Charts/Gauge/index.js b/src/components/Charts/Gauge/index.js deleted file mode 100644 index 2249211aeaad53652d578c8dc050a60795129b68..0000000000000000000000000000000000000000 --- a/src/components/Charts/Gauge/index.js +++ /dev/null @@ -1,167 +0,0 @@ -import React from 'react'; -import { Chart, Geom, Axis, Coord, Guide, Shape } from 'bizcharts'; -import autoHeight from '../autoHeight'; - -const { Arc, Html, Line } = Guide; - -const defaultFormatter = val => { - switch (val) { - case '2': - return '差'; - case '4': - return '中'; - case '6': - return '良'; - case '8': - return '优'; - default: - return ''; - } -}; - -Shape.registerShape('point', 'pointer', { - drawShape(cfg, group) { - let point = cfg.points[0]; - point = this.parsePoint(point); - const center = this.parsePoint({ - x: 0, - y: 0, - }); - group.addShape('line', { - attrs: { - x1: center.x, - y1: center.y, - x2: point.x, - y2: point.y, - stroke: cfg.color, - lineWidth: 2, - lineCap: 'round', - }, - }); - return group.addShape('circle', { - attrs: { - x: center.x, - y: center.y, - r: 6, - stroke: cfg.color, - lineWidth: 3, - fill: '#fff', - }, - }); - }, -}); - -@autoHeight() -class Gauge extends React.Component { - render() { - const { - title, - height, - percent, - forceFit = true, - formatter = defaultFormatter, - color = '#2F9CFF', - bgColor = '#F0F2F5', - } = this.props; - const cols = { - value: { - type: 'linear', - min: 0, - max: 10, - tickCount: 6, - nice: true, - }, - }; - const data = [{ value: percent / 10 }]; - return ( - - - - - - - - - - - ` -
    -

    ${title}

    -

    - ${data[0].value * 10}% -

    -
    `} - /> -     - -     - ); - } -} - -export default Gauge; diff --git a/src/components/Charts/MiniArea/index.d.ts b/src/components/Charts/MiniArea/index.d.ts deleted file mode 100644 index b223b68ca097e01f1c76e4e2cb4e95e9db4dc39b..0000000000000000000000000000000000000000 --- a/src/components/Charts/MiniArea/index.d.ts +++ /dev/null @@ -1,29 +0,0 @@ -import * as React from 'react'; - -// g2已经更新到3.0 -// 不带的写了 - -export interface IAxis { - title: any; - line: any; - gridAlign: any; - labels: any; - tickLine: any; - grid: any; -} - -export interface IMiniAreaProps { - color?: string; - height: number; - borderColor?: string; - line?: boolean; - animate?: boolean; - xAxis?: IAxis; - yAxis?: IAxis; - data: Array<{ - x: number | string; - y: number; - }>; -} - -export default class MiniArea extends React.Component {} diff --git a/src/components/Charts/MiniArea/index.js b/src/components/Charts/MiniArea/index.js deleted file mode 100644 index d3209becaeed2f3069267b08c16cf9bbb3672be0..0000000000000000000000000000000000000000 --- a/src/components/Charts/MiniArea/index.js +++ /dev/null @@ -1,108 +0,0 @@ -import React from 'react'; -import { Chart, Axis, Tooltip, Geom } from 'bizcharts'; -import autoHeight from '../autoHeight'; -import styles from '../index.less'; - -@autoHeight() -class MiniArea extends React.PureComponent { - render() { - const { - height, - data = [], - forceFit = true, - color = 'rgba(24, 144, 255, 0.2)', - borderColor = '#1089ff', - scale = {}, - borderWidth = 2, - line, - xAxis, - yAxis, - animate = true, - } = this.props; - - const padding = [36, 5, 30, 5]; - - const scaleProps = { - x: { - type: 'cat', - range: [0, 1], - ...scale.x, - }, - y: { - min: 0, - ...scale.y, - }, - }; - - const tooltip = [ - 'x*y', - (x, y) => ({ - name: x, - value: y, - }), - ]; - - const chartHeight = height + 54; - - return ( -
    -
    - {height > 0 && ( - - - - - - {line ? ( - - ) : ( - - )} - - )} -
    -
    - ); - } -} - -export default MiniArea; diff --git a/src/components/Charts/MiniBar/index.d.ts b/src/components/Charts/MiniBar/index.d.ts deleted file mode 100644 index 0c4bd6cce558f4b948691c553c65d76c8c34fc6b..0000000000000000000000000000000000000000 --- a/src/components/Charts/MiniBar/index.d.ts +++ /dev/null @@ -1,12 +0,0 @@ -import * as React from 'react'; -export interface IMiniBarProps { - color?: string; - height: number; - data: Array<{ - x: number | string; - y: number; - }>; - style?: React.CSSProperties; -} - -export default class MiniBar extends React.Component {} diff --git a/src/components/Charts/MiniBar/index.js b/src/components/Charts/MiniBar/index.js deleted file mode 100644 index 18e4d8c6fba2322b9ee75a9522fa40cd8315463d..0000000000000000000000000000000000000000 --- a/src/components/Charts/MiniBar/index.js +++ /dev/null @@ -1,51 +0,0 @@ -import React from 'react'; -import { Chart, Tooltip, Geom } from 'bizcharts'; -import autoHeight from '../autoHeight'; -import styles from '../index.less'; - -@autoHeight() -class MiniBar extends React.Component { - render() { - const { height, forceFit = true, color = '#1890FF', data = [] } = this.props; - - const scale = { - x: { - type: 'cat', - }, - y: { - min: 0, - }, - }; - - const padding = [36, 5, 30, 5]; - - const tooltip = [ - 'x*y', - (x, y) => ({ - name: x, - value: y, - }), - ]; - - // for tooltip not to be hide - const chartHeight = height + 54; - - return ( -
    -
    - - - - -
    -
    - ); - } -} -export default MiniBar; diff --git a/src/components/Charts/MiniProgress/index.d.ts b/src/components/Charts/MiniProgress/index.d.ts deleted file mode 100644 index aaeb7261d7ea06dfad935faf7c00238035ea921d..0000000000000000000000000000000000000000 --- a/src/components/Charts/MiniProgress/index.d.ts +++ /dev/null @@ -1,10 +0,0 @@ -import * as React from 'react'; -export interface IMiniProgressProps { - target: number; - color?: string; - strokeWidth?: number; - percent?: number; - style?: React.CSSProperties; -} - -export default class MiniProgress extends React.Component {} diff --git a/src/components/Charts/MiniProgress/index.js b/src/components/Charts/MiniProgress/index.js deleted file mode 100644 index 795c79b15951e2bdde85c0a6fa1427ba46c8df1c..0000000000000000000000000000000000000000 --- a/src/components/Charts/MiniProgress/index.js +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react'; -import { Tooltip } from 'antd'; - -import styles from './index.less'; - -const MiniProgress = ({ target, color = 'rgb(19, 194, 194)', strokeWidth, percent }) => ( -
    - -
    - - -
    -     -
    -
    -
    -
    -); - -export default MiniProgress; diff --git a/src/components/Charts/MiniProgress/index.less b/src/components/Charts/MiniProgress/index.less deleted file mode 100644 index e5f148cbf532e6a0715364009f5a2c2c085d1d43..0000000000000000000000000000000000000000 --- a/src/components/Charts/MiniProgress/index.less +++ /dev/null @@ -1,35 +0,0 @@ -@import '~antd/lib/style/themes/default.less'; - -.miniProgress { - padding: 5px 0; - position: relative; - width: 100%; - .progressWrap { - background-color: @background-color-base; - position: relative; - } - .progress { - transition: all 0.4s cubic-bezier(0.08, 0.82, 0.17, 1) 0s; - border-radius: 1px 0 0 1px; - background-color: @primary-color; - width: 0; - height: 100%; - } - .target { - position: absolute; - top: 0; - bottom: 0; - span { - border-radius: 100px; - position: absolute; - top: 0; - left: 0; - height: 4px; - width: 2px; - } - span:last-child { - top: auto; - bottom: 0; - } - } -} diff --git a/src/components/Charts/Pie/index.d.ts b/src/components/Charts/Pie/index.d.ts deleted file mode 100644 index 66c93eeb5d856928697335530c090c68492e81a5..0000000000000000000000000000000000000000 --- a/src/components/Charts/Pie/index.d.ts +++ /dev/null @@ -1,21 +0,0 @@ -import * as React from 'react'; -export interface IPieProps { - animate?: boolean; - color?: string; - colors?: string[]; - height: number; - hasLegend?: boolean; - padding?: [number, number, number, number]; - percent?: number; - data?: Array<{ - x: string | string; - y: number; - }>; - total?: React.ReactNode | number | (() => React.ReactNode | number); - title?: React.ReactNode; - tooltip?: boolean; - valueFormat?: (value: string) => string | React.ReactNode; - subTitle?: React.ReactNode; -} - -export default class Pie extends React.Component {} diff --git a/src/components/Charts/Pie/index.js b/src/components/Charts/Pie/index.js deleted file mode 100644 index 7dff5123f30d1937550e0c042953aee5392ee1fe..0000000000000000000000000000000000000000 --- a/src/components/Charts/Pie/index.js +++ /dev/null @@ -1,271 +0,0 @@ -import React, { Component } from 'react'; -import { Chart, Tooltip, Geom, Coord } from 'bizcharts'; -import { DataView } from '@antv/data-set'; -import { Divider } from 'antd'; -import classNames from 'classnames'; -import ReactFitText from 'react-fittext'; -import Debounce from 'lodash-decorators/debounce'; -import Bind from 'lodash-decorators/bind'; -import autoHeight from '../autoHeight'; - -import styles from './index.less'; - -/* eslint react/no-danger:0 */ -@autoHeight() -class Pie extends Component { - state = { - legendData: [], - legendBlock: false, - }; - - componentDidMount() { - window.addEventListener( - 'resize', - () => { - this.requestRef = requestAnimationFrame(() => this.resize()); - }, - { passive: true } - ); - } - - componentDidUpdate(preProps) { - const { data } = this.props; - if (data !== preProps.data) { - // because of charts data create when rendered - // so there is a trick for get rendered time - this.getLegendData(); - } - } - - componentWillUnmount() { - window.cancelAnimationFrame(this.requestRef); - window.removeEventListener('resize', this.resize); - this.resize.cancel(); - } - - getG2Instance = chart => { - this.chart = chart; - requestAnimationFrame(() => { - this.getLegendData(); - this.resize(); - }); - }; - - // for custom lengend view - getLegendData = () => { - if (!this.chart) return; - const geom = this.chart.getAllGeoms()[0]; // 获取所有的图形 - if (!geom) return; - const items = geom.get('dataArray') || []; // 获取图形对应的 - - const legendData = items.map(item => { - /* eslint no-underscore-dangle:0 */ - const origin = item[0]._origin; - origin.color = item[0].color; - origin.checked = true; - return origin; - }); - - this.setState({ - legendData, - }); - }; - - handleRoot = n => { - this.root = n; - }; - - handleLegendClick = (item, i) => { - const newItem = item; - newItem.checked = !newItem.checked; - - const { legendData } = this.state; - legendData[i] = newItem; - - const filteredLegendData = legendData.filter(l => l.checked).map(l => l.x); - - if (this.chart) { - this.chart.filter('x', val => filteredLegendData.indexOf(val) > -1); - } - - this.setState({ - legendData, - }); - }; - - // for window resize auto responsive legend - @Bind() - @Debounce(300) - resize() { - const { hasLegend } = this.props; - const { legendBlock } = this.state; - if (!hasLegend || !this.root) { - window.removeEventListener('resize', this.resize); - return; - } - if (this.root.parentNode.clientWidth <= 380) { - if (!legendBlock) { - this.setState({ - legendBlock: true, - }); - } - } else if (legendBlock) { - this.setState({ - legendBlock: false, - }); - } - } - - render() { - const { - valueFormat, - subTitle, - total, - hasLegend = false, - className, - style, - height, - forceFit = true, - percent, - color, - inner = 0.75, - animate = true, - colors, - lineWidth = 1, - } = this.props; - - const { legendData, legendBlock } = this.state; - const pieClassName = classNames(styles.pie, className, { - [styles.hasLegend]: !!hasLegend, - [styles.legendBlock]: legendBlock, - }); - - const { - data: propsData, - selected: propsSelected = true, - tooltip: propsTooltip = true, - } = this.props; - - let data = propsData || []; - let selected = propsSelected; - let tooltip = propsTooltip; - - const defaultColors = colors; - data = data || []; - selected = selected || true; - tooltip = tooltip || true; - let formatColor; - - const scale = { - x: { - type: 'cat', - range: [0, 1], - }, - y: { - min: 0, - }, - }; - - if (percent || percent === 0) { - selected = false; - tooltip = false; - formatColor = value => { - if (value === '占比') { - return color || 'rgba(24, 144, 255, 0.85)'; - } - return '#F0F2F5'; - }; - - data = [ - { - x: '占比', - y: parseFloat(percent), - }, - { - x: '反比', - y: 100 - parseFloat(percent), - }, - ]; - } - - const tooltipFormat = [ - 'x*percent', - (x, p) => ({ - name: x, - value: `${(p * 100).toFixed(2)}%`, - }), - ]; - - const padding = [12, 0, 12, 0]; - - const dv = new DataView(); - dv.source(data).transform({ - type: 'percent', - field: 'y', - dimension: 'x', - as: 'percent', - }); - - return ( -
    - -
    - - {!!tooltip && } - - - - - {(subTitle || total) && ( -
    - {subTitle &&

    {subTitle}

    } - {/* eslint-disable-next-line */} - {total && ( -
    {typeof total === 'function' ? total() : total}
    - )} -
    - )} -
    -     - - {hasLegend && ( -
      - {legendData.map((item, i) => ( -
    • this.handleLegendClick(item, i)}> - - {item.x} - - - {`${(Number.isNaN(item.percent) ? 0 : item.percent * 100).toFixed(2)}%`} - - {valueFormat ? valueFormat(item.y) : item.y} -
      • - ))} -
    - )} -
    - ); - } -} - -export default Pie; diff --git a/src/components/Charts/Pie/index.less b/src/components/Charts/Pie/index.less deleted file mode 100644 index 7249d0930905d4bd6d15e08f5cfdd69237717cd4..0000000000000000000000000000000000000000 --- a/src/components/Charts/Pie/index.less +++ /dev/null @@ -1,94 +0,0 @@ -@import '~antd/lib/style/themes/default.less'; - -.pie { - position: relative; - .chart { - position: relative; - } - &.hasLegend .chart { - width: ~'calc(100% - 240px)'; - } - .legend { - position: absolute; - right: 0; - min-width: 200px; - top: 50%; - transform: translateY(-50%); - margin: 0 20px; - list-style: none; - padding: 0; - li { - cursor: pointer; - margin-bottom: 16px; - height: 22px; - line-height: 22px; - &:last-child { - margin-bottom: 0; - } - } - } - .dot { - border-radius: 8px; - display: inline-block; - margin-right: 8px; - position: relative; - top: -1px; - height: 8px; - width: 8px; - } - .line { - background-color: @border-color-split; - display: inline-block; - margin-right: 8px; - width: 1px; - height: 16px; - } - .legendTitle { - color: @text-color; - } - .percent { - color: @text-color-secondary; - } - .value { - position: absolute; - right: 0; - } - .title { - margin-bottom: 8px; - } - .total { - position: absolute; - left: 50%; - top: 50%; - text-align: center; - max-height: 62px; - transform: translate(-50%, -50%); - & > h4 { - color: @text-color-secondary; - font-size: 14px; - line-height: 22px; - height: 22px; - margin-bottom: 8px; - font-weight: normal; - } - & > p { - color: @heading-color; - display: block; - font-size: 1.2em; - height: 32px; - line-height: 32px; - white-space: nowrap; - } - } -} - -.legendBlock { - &.hasLegend .chart { - width: 100%; - margin: 0 0 32px 0; - } - .legend { - position: relative; - transform: none; - } -} diff --git a/src/components/Charts/Radar/index.d.ts b/src/components/Charts/Radar/index.d.ts deleted file mode 100644 index 963ac8c37c112c360cd399b039d790e53b83a2a3..0000000000000000000000000000000000000000 --- a/src/components/Charts/Radar/index.d.ts +++ /dev/null @@ -1,15 +0,0 @@ -import * as React from 'react'; -export interface IRadarProps { - title?: React.ReactNode; - height: number; - padding?: [number, number, number, number]; - hasLegend?: boolean; - data: Array<{ - name: string; - label: string; - value: string; - }>; - style?: React.CSSProperties; -} - -export default class Radar extends React.Component {} diff --git a/src/components/Charts/Radar/index.js b/src/components/Charts/Radar/index.js deleted file mode 100644 index a0aa7fab6ea82dde0e9202d5315d9df80e18e806..0000000000000000000000000000000000000000 --- a/src/components/Charts/Radar/index.js +++ /dev/null @@ -1,184 +0,0 @@ -import React, { Component } from 'react'; -import { Chart, Tooltip, Geom, Coord, Axis } from 'bizcharts'; -import { Row, Col } from 'antd'; -import autoHeight from '../autoHeight'; -import styles from './index.less'; - -/* eslint react/no-danger:0 */ -@autoHeight() -class Radar extends Component { - state = { - legendData: [], - }; - - componentDidMount() { - this.getLegendData(); - } - - componentDidUpdate(preProps) { - const { data } = this.props; - if (data !== preProps.data) { - this.getLegendData(); - } - } - - getG2Instance = chart => { - this.chart = chart; - }; - - // for custom lengend view - getLegendData = () => { - if (!this.chart) return; - const geom = this.chart.getAllGeoms()[0]; // 获取所有的图形 - if (!geom) return; - const items = geom.get('dataArray') || []; // 获取图形对应的 - - const legendData = items.map(item => { - // eslint-disable-next-line - const origins = item.map(t => t._origin); - const result = { - name: origins[0].name, - color: item[0].color, - checked: true, - value: origins.reduce((p, n) => p + n.value, 0), - }; - - return result; - }); - - this.setState({ - legendData, - }); - }; - - handleRef = n => { - this.node = n; - }; - - handleLegendClick = (item, i) => { - const newItem = item; - newItem.checked = !newItem.checked; - - const { legendData } = this.state; - legendData[i] = newItem; - - const filteredLegendData = legendData.filter(l => l.checked).map(l => l.name); - - if (this.chart) { - this.chart.filter('name', val => filteredLegendData.indexOf(val) > -1); - this.chart.repaint(); - } - - this.setState({ - legendData, - }); - }; - - render() { - const defaultColors = [ - '#1890FF', - '#FACC14', - '#2FC25B', - '#8543E0', - '#F04864', - '#13C2C2', - '#fa8c16', - '#a0d911', - ]; - - const { - data = [], - height = 0, - title, - hasLegend = false, - forceFit = true, - tickCount = 5, - padding = [35, 30, 16, 30], - animate = true, - colors = defaultColors, - } = this.props; - - const { legendData } = this.state; - - const scale = { - value: { - min: 0, - tickCount, - }, - }; - - const chartHeight = height - (hasLegend ? 80 : 22); - - return ( -
    - {title &&

    {title}

    } - - - - - - - - - {hasLegend && ( - - {legendData.map((item, i) => ( - this.handleLegendClick(item, i)} - > -
    -

    - - {item.name} -

    -
    {item.value}
    -
    - - ))} -     - )} -
    - ); - } -} - -export default Radar; diff --git a/src/components/Charts/Radar/index.less b/src/components/Charts/Radar/index.less deleted file mode 100644 index 15b8725ca7f084bb7cd662fd3cd44138fe928d81..0000000000000000000000000000000000000000 --- a/src/components/Charts/Radar/index.less +++ /dev/null @@ -1,46 +0,0 @@ -@import '~antd/lib/style/themes/default.less'; - -.radar { - .legend { - margin-top: 16px; - .legendItem { - position: relative; - text-align: center; - cursor: pointer; - color: @text-color-secondary; - line-height: 22px; - p { - margin: 0; - } - h6 { - color: @heading-color; - padding-left: 16px; - font-size: 24px; - line-height: 32px; - margin-top: 4px; - margin-bottom: 0; - } - &:after { - background-color: @border-color-split; - position: absolute; - top: 8px; - right: 0; - height: 40px; - width: 1px; - content: ''; - } - } - > :last-child .legendItem:after { - display: none; - } - .dot { - border-radius: 6px; - display: inline-block; - margin-right: 6px; - position: relative; - top: -1px; - height: 6px; - width: 6px; - } - } -} diff --git a/src/components/Charts/TagCloud/index.d.ts b/src/components/Charts/TagCloud/index.d.ts deleted file mode 100644 index 462650c4dbb7532670d200141f7cbebc52525808..0000000000000000000000000000000000000000 --- a/src/components/Charts/TagCloud/index.d.ts +++ /dev/null @@ -1,11 +0,0 @@ -import * as React from 'react'; -export interface ITagCloudProps { - data: Array<{ - name: string; - value: number; - }>; - height: number; - style?: React.CSSProperties; -} - -export default class TagCloud extends React.Component {} diff --git a/src/components/Charts/TagCloud/index.js b/src/components/Charts/TagCloud/index.js deleted file mode 100644 index d94699bd551c0c33319bd3d61eac2c4edb613bbe..0000000000000000000000000000000000000000 --- a/src/components/Charts/TagCloud/index.js +++ /dev/null @@ -1,182 +0,0 @@ -import React, { Component } from 'react'; -import { Chart, Geom, Coord, Shape, Tooltip } from 'bizcharts'; -import DataSet from '@antv/data-set'; -import Debounce from 'lodash-decorators/debounce'; -import Bind from 'lodash-decorators/bind'; -import classNames from 'classnames'; -import autoHeight from '../autoHeight'; -import styles from './index.less'; - -/* eslint no-underscore-dangle: 0 */ -/* eslint no-param-reassign: 0 */ - -const imgUrl = 'https://gw.alipayobjects.com/zos/rmsportal/gWyeGLCdFFRavBGIDzWk.png'; - -@autoHeight() -class TagCloud extends Component { - state = { - dv: null, - }; - - componentDidMount() { - requestAnimationFrame(() => { - this.initTagCloud(); - this.renderChart(); - }); - window.addEventListener('resize', this.resize, { passive: true }); - } - - componentDidUpdate(preProps) { - const { data } = this.props; - if (JSON.stringify(preProps.data) !== JSON.stringify(data)) { - this.renderChart(this.props); - } - } - - componentWillUnmount() { - this.isUnmount = true; - window.cancelAnimationFrame(this.requestRef); - window.removeEventListener('resize', this.resize); - } - - resize = () => { - this.requestRef = requestAnimationFrame(() => { - this.renderChart(); - }); - }; - - saveRootRef = node => { - this.root = node; - }; - - initTagCloud = () => { - function getTextAttrs(cfg) { - return Object.assign( - {}, - { - fillOpacity: cfg.opacity, - fontSize: cfg.origin._origin.size, - rotate: cfg.origin._origin.rotate, - text: cfg.origin._origin.text, - textAlign: 'center', - fontFamily: cfg.origin._origin.font, - fill: cfg.color, - textBaseline: 'Alphabetic', - }, - cfg.style - ); - } - - // 给point注册一个词云的shape - Shape.registerShape('point', 'cloud', { - drawShape(cfg, container) { - const attrs = getTextAttrs(cfg); - return container.addShape('text', { - attrs: Object.assign(attrs, { - x: cfg.x, - y: cfg.y, - }), - }); - }, - }); - }; - - @Bind() - @Debounce(500) - renderChart(nextProps) { - // const colors = ['#1890FF', '#41D9C7', '#2FC25B', '#FACC14', '#9AE65C']; - const { data, height } = nextProps || this.props; - - if (data.length < 1 || !this.root) { - return; - } - - const h = height; - const w = this.root.offsetWidth; - - const onload = () => { - const dv = new DataSet.View().source(data); - const range = dv.range('value'); - const [min, max] = range; - dv.transform({ - type: 'tag-cloud', - fields: ['name', 'value'], - imageMask: this.imageMask, - font: 'Verdana', - size: [w, h], // 宽高设置最好根据 imageMask 做调整 - padding: 0, - timeInterval: 5000, // max execute time - rotate() { - return 0; - }, - fontSize(d) { - // eslint-disable-next-line - return Math.pow((d.value - min) / (max - min), 2) * (17.5 - 5) + 5; - }, - }); - - if (this.isUnmount) { - return; - } - - this.setState({ - dv, - w, - h, - }); - }; - - if (!this.imageMask) { - this.imageMask = new Image(); - this.imageMask.crossOrigin = ''; - this.imageMask.src = imgUrl; - - this.imageMask.onload = onload; - } else { - onload(); - } - } - - render() { - const { className, height } = this.props; - const { dv, w, h } = this.state; - - return ( -
    - {dv && ( - - - - - - )} -
    - ); - } -} - -export default TagCloud; diff --git a/src/components/Charts/TagCloud/index.less b/src/components/Charts/TagCloud/index.less deleted file mode 100644 index db8e4dabfdd3f1fd4566ff22f55962648c369c49..0000000000000000000000000000000000000000 --- a/src/components/Charts/TagCloud/index.less +++ /dev/null @@ -1,6 +0,0 @@ -.tagCloud { - overflow: hidden; - canvas { - transform-origin: 0 0; - } -} diff --git a/src/components/Charts/TimelineChart/index.d.ts b/src/components/Charts/TimelineChart/index.d.ts deleted file mode 100644 index 40b94325a9833e9479846b323387e6515160fb7e..0000000000000000000000000000000000000000 --- a/src/components/Charts/TimelineChart/index.d.ts +++ /dev/null @@ -1,14 +0,0 @@ -import * as React from 'react'; -export interface ITimelineChartProps { - data: Array<{ - x: number; - y1: number; - y2?: number; - }>; - titleMap: { y1: string; y2?: string }; - padding?: [number, number, number, number]; - height?: number; - style?: React.CSSProperties; -} - -export default class TimelineChart extends React.Component {} diff --git a/src/components/Charts/TimelineChart/index.js b/src/components/Charts/TimelineChart/index.js deleted file mode 100644 index d82623c5805d6df526e3ab40f42ece7202ca20ff..0000000000000000000000000000000000000000 --- a/src/components/Charts/TimelineChart/index.js +++ /dev/null @@ -1,120 +0,0 @@ -import React from 'react'; -import { Chart, Tooltip, Geom, Legend, Axis } from 'bizcharts'; -import DataSet from '@antv/data-set'; -import Slider from 'bizcharts-plugin-slider'; -import autoHeight from '../autoHeight'; -import styles from './index.less'; - -@autoHeight() -class TimelineChart extends React.Component { - render() { - const { - title, - height = 400, - padding = [60, 20, 40, 40], - titleMap = { - y1: 'y1', - y2: 'y2', - }, - borderWidth = 2, - data: sourceData, - } = this.props; - - const data = Array.isArray(sourceData) ? sourceData : [{ x: 0, y1: 0, y2: 0 }]; - - data.sort((a, b) => a.x - b.x); - - let max; - if (data[0] && data[0].y1 && data[0].y2) { - max = Math.max( - [...data].sort((a, b) => b.y1 - a.y1)[0].y1, - [...data].sort((a, b) => b.y2 - a.y2)[0].y2 - ); - } - - const ds = new DataSet({ - state: { - start: data[0].x, - end: data[data.length - 1].x, - }, - }); - - const dv = ds.createView(); - dv.source(data) - .transform({ - type: 'filter', - callback: obj => { - const date = obj.x; - return date <= ds.state.end && date >= ds.state.start; - }, - }) - .transform({ - type: 'map', - callback(row) { - const newRow = { ...row }; - newRow[titleMap.y1] = row.y1; - newRow[titleMap.y2] = row.y2; - return newRow; - }, - }) - .transform({ - type: 'fold', - fields: [titleMap.y1, titleMap.y2], // 展开字段集 - key: 'key', // key字段 - value: 'value', // value字段 - }); - - const timeScale = { - type: 'time', - tickInterval: 60 * 60 * 1000, - mask: 'HH:mm', - range: [0, 1], - }; - - const cols = { - x: timeScale, - value: { - max, - min: 0, - }, - }; - - const SliderGen = () => ( - { - ds.setState('start', startValue); - ds.setState('end', endValue); - }} - /> - ); - - return ( -
    -
    - {title &&

    {title}

    } - - - - - - -
    - -
    -
    -
    - ); - } -} - -export default TimelineChart; diff --git a/src/components/Charts/TimelineChart/index.less b/src/components/Charts/TimelineChart/index.less deleted file mode 100644 index 1751975692135769eebdcaf89ffafcf6b3037cb8..0000000000000000000000000000000000000000 --- a/src/components/Charts/TimelineChart/index.less +++ /dev/null @@ -1,3 +0,0 @@ -.timelineChart { - background: #fff; -} diff --git a/src/components/Charts/WaterWave/index.d.ts b/src/components/Charts/WaterWave/index.d.ts deleted file mode 100644 index 8f5588d29f29baa7a5409eded24fb2cbe82e1c53..0000000000000000000000000000000000000000 --- a/src/components/Charts/WaterWave/index.d.ts +++ /dev/null @@ -1,10 +0,0 @@ -import * as React from 'react'; -export interface IWaterWaveProps { - title: React.ReactNode; - color?: string; - height: number; - percent: number; - style?: React.CSSProperties; -} - -export default class WaterWave extends React.Component {} diff --git a/src/components/Charts/WaterWave/index.js b/src/components/Charts/WaterWave/index.js deleted file mode 100644 index 055f7c734643eee007f6c2d96fcdc5261a206426..0000000000000000000000000000000000000000 --- a/src/components/Charts/WaterWave/index.js +++ /dev/null @@ -1,213 +0,0 @@ -import React, { PureComponent } from 'react'; -import autoHeight from '../autoHeight'; -import styles from './index.less'; - -/* eslint no-return-assign: 0 */ -/* eslint no-mixed-operators: 0 */ -// riddle: https://riddle.alibaba-inc.com/riddles/2d9a4b90 - -@autoHeight() -class WaterWave extends PureComponent { - state = { - radio: 1, - }; - - componentDidMount() { - this.renderChart(); - this.resize(); - window.addEventListener( - 'resize', - () => { - requestAnimationFrame(() => this.resize()); - }, - { passive: true } - ); - } - - componentDidUpdate(props) { - const { percent } = this.props; - if (props.percent !== percent) { - // 不加这个会造成绘制缓慢 - this.renderChart('update'); - } - } - - componentWillUnmount() { - cancelAnimationFrame(this.timer); - if (this.node) { - this.node.innerHTML = ''; - } - window.removeEventListener('resize', this.resize); - } - - resize = () => { - if (this.root) { - const { height } = this.props; - const { offsetWidth } = this.root.parentNode; - this.setState({ - radio: offsetWidth < height ? offsetWidth / height : 1, - }); - } - }; - - renderChart(type) { - const { percent, color = '#1890FF' } = this.props; - const data = percent / 100; - const self = this; - cancelAnimationFrame(this.timer); - - if (!this.node || (data !== 0 && !data)) { - return; - } - - const canvas = this.node; - const ctx = canvas.getContext('2d'); - const canvasWidth = canvas.width; - const canvasHeight = canvas.height; - const radius = canvasWidth / 2; - const lineWidth = 2; - const cR = radius - lineWidth; - - ctx.beginPath(); - ctx.lineWidth = lineWidth * 2; - - const axisLength = canvasWidth - lineWidth; - const unit = axisLength / 8; - const range = 0.2; // 振幅 - let currRange = range; - const xOffset = lineWidth; - let sp = 0; // 周期偏移量 - let currData = 0; - const waveupsp = 0.005; // 水波上涨速度 - - let arcStack = []; - const bR = radius - lineWidth; - const circleOffset = -(Math.PI / 2); - let circleLock = true; - - for (let i = circleOffset; i < circleOffset + 2 * Math.PI; i += 1 / (8 * Math.PI)) { - arcStack.push([radius + bR * Math.cos(i), radius + bR * Math.sin(i)]); - } - - const cStartPoint = arcStack.shift(); - ctx.strokeStyle = color; - ctx.moveTo(cStartPoint[0], cStartPoint[1]); - - function drawSin() { - ctx.beginPath(); - ctx.save(); - - const sinStack = []; - for (let i = xOffset; i <= xOffset + axisLength; i += 20 / axisLength) { - const x = sp + (xOffset + i) / unit; - const y = Math.sin(x) * currRange; - const dx = i; - const dy = 2 * cR * (1 - currData) + (radius - cR) - unit * y; - - ctx.lineTo(dx, dy); - sinStack.push([dx, dy]); - } - - const startPoint = sinStack.shift(); - - ctx.lineTo(xOffset + axisLength, canvasHeight); - ctx.lineTo(xOffset, canvasHeight); - ctx.lineTo(startPoint[0], startPoint[1]); - - const gradient = ctx.createLinearGradient(0, 0, 0, canvasHeight); - gradient.addColorStop(0, '#ffffff'); - gradient.addColorStop(1, color); - ctx.fillStyle = gradient; - ctx.fill(); - ctx.restore(); - } - - function render() { - ctx.clearRect(0, 0, canvasWidth, canvasHeight); - if (circleLock && type !== 'update') { - if (arcStack.length) { - const temp = arcStack.shift(); - ctx.lineTo(temp[0], temp[1]); - ctx.stroke(); - } else { - circleLock = false; - ctx.lineTo(cStartPoint[0], cStartPoint[1]); - ctx.stroke(); - arcStack = null; - - ctx.globalCompositeOperation = 'destination-over'; - ctx.beginPath(); - ctx.lineWidth = lineWidth; - ctx.arc(radius, radius, bR, 0, 2 * Math.PI, 1); - - ctx.beginPath(); - ctx.save(); - ctx.arc(radius, radius, radius - 3 * lineWidth, 0, 2 * Math.PI, 1); - - ctx.restore(); - ctx.clip(); - ctx.fillStyle = color; - } - } else { - if (data >= 0.85) { - if (currRange > range / 4) { - const t = range * 0.01; - currRange -= t; - } - } else if (data <= 0.1) { - if (currRange < range * 1.5) { - const t = range * 0.01; - currRange += t; - } - } else { - if (currRange <= range) { - const t = range * 0.01; - currRange += t; - } - if (currRange >= range) { - const t = range * 0.01; - currRange -= t; - } - } - if (data - currData > 0) { - currData += waveupsp; - } - if (data - currData < 0) { - currData -= waveupsp; - } - - sp += 0.07; - drawSin(); - } - self.timer = requestAnimationFrame(render); - } - render(); - } - - render() { - const { radio } = this.state; - const { percent, title, height } = this.props; - return ( -
    (this.root = n)} - style={{ transform: `scale(${radio})` }} - > -
    - (this.node = n)} - width={height * 2} - height={height * 2} - /> -
    -
    - {title && {title}} -

    {percent}%

    -
    -
    - ); - } -} - -export default WaterWave; diff --git a/src/components/Charts/WaterWave/index.less b/src/components/Charts/WaterWave/index.less deleted file mode 100644 index 43ba05cabd9526fa5d795b8ef840dd8b58e70afc..0000000000000000000000000000000000000000 --- a/src/components/Charts/WaterWave/index.less +++ /dev/null @@ -1,28 +0,0 @@ -@import '~antd/lib/style/themes/default.less'; - -.waterWave { - display: inline-block; - position: relative; - transform-origin: left; - .text { - position: absolute; - left: 0; - top: 32px; - text-align: center; - width: 100%; - span { - color: @text-color-secondary; - font-size: 14px; - line-height: 22px; - } - h4 { - color: @heading-color; - line-height: 32px; - font-size: 24px; - } - } - .waterWaveCanvasWrapper { - transform: scale(0.5); - transform-origin: 0 0; - } -} diff --git a/src/components/Charts/autoHeight.js b/src/components/Charts/autoHeight.js deleted file mode 100644 index 6ee9e098d3d926650f0f4ce6bfcd0cb3483c26ed..0000000000000000000000000000000000000000 --- a/src/components/Charts/autoHeight.js +++ /dev/null @@ -1,62 +0,0 @@ -/* eslint eqeqeq: 0 */ -import React from 'react'; - -function computeHeight(node) { - const totalHeight = parseInt(getComputedStyle(node).height, 10); - const padding = - parseInt(getComputedStyle(node).paddingTop, 10) + - parseInt(getComputedStyle(node).paddingBottom, 10); - return totalHeight - padding; -} - -function getAutoHeight(n) { - if (!n) { - return 0; - } - - let node = n; - - let height = computeHeight(node); - - while (!height) { - node = node.parentNode; - if (node) { - height = computeHeight(node); - } else { - break; - } - } - - return height; -} - -const autoHeight = () => WrappedComponent => - class extends React.Component { - state = { - computedHeight: 0, - }; - - componentDidMount() { - const { height } = this.props; - if (!height) { - const h = getAutoHeight(this.root); - // eslint-disable-next-line - this.setState({ computedHeight: h }); - } - } - - handleRoot = node => { - this.root = node; - }; - - render() { - const { height } = this.props; - const { computedHeight } = this.state; - const h = height || computedHeight; - return ( -
    {h > 0 && }
    - ); - } - }; - -export default autoHeight; diff --git a/src/components/Charts/bizcharts.d.ts b/src/components/Charts/bizcharts.d.ts deleted file mode 100644 index 0815ffeeffcacd0ac9710977ab3d4419d078491c..0000000000000000000000000000000000000000 --- a/src/components/Charts/bizcharts.d.ts +++ /dev/null @@ -1,3 +0,0 @@ -import * as BizChart from 'bizcharts'; - -export = BizChart; diff --git a/src/components/Charts/bizcharts.js b/src/components/Charts/bizcharts.js deleted file mode 100644 index e08db8d6d2dca240451bdf6ab8a30be077a3fd9d..0000000000000000000000000000000000000000 --- a/src/components/Charts/bizcharts.js +++ /dev/null @@ -1,3 +0,0 @@ -import * as BizChart from 'bizcharts'; - -export default BizChart; diff --git a/src/components/Charts/demo/bar.md b/src/components/Charts/demo/bar.md deleted file mode 100644 index 955f44e076192f6b4536fbb79cfd5a7660354f66..0000000000000000000000000000000000000000 --- a/src/components/Charts/demo/bar.md +++ /dev/null @@ -1,26 +0,0 @@ ---- -order: 4 -title: 柱状图 ---- - -通过设置 `x`，`y` 属性，可以快速的构建出一个漂亮的柱状图，各种纬度的关系则是通过自定义的数据展现。 - -````jsx -import { Bar } from 'ant-design-pro/lib/Charts'; - -const salesData = []; -for (let i = 0; i < 12; i += 1) { - salesData.push({ - x: `${i + 1}月`, - y: Math.floor(Math.random() * 1000) + 200, - }); -} - -ReactDOM.render( - -, mountNode); -```` diff --git a/src/components/Charts/demo/chart-card.md b/src/components/Charts/demo/chart-card.md deleted file mode 100644 index 4da852b71442785b17d0ce07b149e4bef343dd20..0000000000000000000000000000000000000000 --- a/src/components/Charts/demo/chart-card.md +++ /dev/null @@ -1,95 +0,0 @@ ---- -order: 1 -title: 图表卡片 ---- - -用于展示图表的卡片容器，可以方便的配合其它图表套件展示丰富信息。 - -```jsx -import { ChartCard, yuan, Field } from 'ant-design-pro/lib/Charts'; -import Trend from 'ant-design-pro/lib/Trend'; -import { Row, Col, Icon, Tooltip } from 'antd'; -import numeral from 'numeral'; - -ReactDOM.render( - - - - - - } - total={() => ( - - )} - footer={ - - } - contentHeight={46} - > - - 周同比 - - 12% - - - - 日环比 - - 11% - - - - - - - } - action={ - - - - } - total={() => ( - - )} - footer={ - - } - /> - - - - } - action={ - - - - } - total={() => ( - - )} - /> - - , - mountNode, -); -``` diff --git a/src/components/Charts/demo/gauge.md b/src/components/Charts/demo/gauge.md deleted file mode 100644 index f53465d88175446a9479e0b415f1cb816a1a00b1..0000000000000000000000000000000000000000 --- a/src/components/Charts/demo/gauge.md +++ /dev/null @@ -1,18 +0,0 @@ ---- -order: 7 -title: 仪表盘 ---- - -仪表盘是一种进度展示方式，可以更直观的展示当前的进展情况，通常也可表示占比。 - -````jsx -import { Gauge } from 'ant-design-pro/lib/Charts'; - -ReactDOM.render( - -, mountNode); -```` diff --git a/src/components/Charts/demo/mini-area.md b/src/components/Charts/demo/mini-area.md deleted file mode 100644 index 2b9bfb4778fdc71f0efa25d89d64ac142a0aa079..0000000000000000000000000000000000000000 --- a/src/components/Charts/demo/mini-area.md +++ /dev/null @@ -1,28 +0,0 @@ ---- -order: 2 -col: 2 -title: 迷你区域图 ---- - -````jsx -import { MiniArea } from 'ant-design-pro/lib/Charts'; -import moment from 'moment'; - -const visitData = []; -const beginDay = new Date().getTime(); -for (let i = 0; i < 20; i += 1) { - visitData.push({ - x: moment(new Date(beginDay + (1000 * 60 * 60 * 24 * i))).format('YYYY-MM-DD'), - y: Math.floor(Math.random() * 100) + 10, - }); -} - -ReactDOM.render( - -, mountNode); -```` diff --git a/src/components/Charts/demo/mini-bar.md b/src/components/Charts/demo/mini-bar.md deleted file mode 100644 index fef301bcaa537d74506b87ad6d8b75eb06d391ff..0000000000000000000000000000000000000000 --- a/src/components/Charts/demo/mini-bar.md +++ /dev/null @@ -1,28 +0,0 @@ ---- -order: 2 -col: 2 -title: 迷你柱状图 ---- - -迷你柱状图更适合展示简单的区间数据，简洁的表现方式可以很好的减少大数据量的视觉展现压力。 - -````jsx -import { MiniBar } from 'ant-design-pro/lib/Charts'; -import moment from 'moment'; - -const visitData = []; -const beginDay = new Date().getTime(); -for (let i = 0; i < 20; i += 1) { - visitData.push({ - x: moment(new Date(beginDay + (1000 * 60 * 60 * 24 * i))).format('YYYY-MM-DD'), - y: Math.floor(Math.random() * 100) + 10, - }); -} - -ReactDOM.render( - -, mountNode); -```` diff --git a/src/components/Charts/demo/mini-pie.md b/src/components/Charts/demo/mini-pie.md deleted file mode 100644 index 9b1abf05912171411b13c8eeae4ec17644a6ddca..0000000000000000000000000000000000000000 --- a/src/components/Charts/demo/mini-pie.md +++ /dev/null @@ -1,16 +0,0 @@ ---- -order: 6 -title: 迷你饼状图 ---- - -通过简化 `Pie` 属性的设置，可以快速的实现极简的饼状图，可配合 `ChartCard` 组合展 -现更多业务场景。 - -```jsx -import { Pie } from 'ant-design-pro/lib/Charts'; - -ReactDOM.render( - , - mountNode -); -``` diff --git a/src/components/Charts/demo/mini-progress.md b/src/components/Charts/demo/mini-progress.md deleted file mode 100644 index 6308a8faedb90224d50a2aee0a9f97a28dabb793..0000000000000000000000000000000000000000 --- a/src/components/Charts/demo/mini-progress.md +++ /dev/null @@ -1,12 +0,0 @@ ---- -order: 3 -title: 迷你进度条 ---- - -````jsx -import { MiniProgress } from 'ant-design-pro/lib/Charts'; - -ReactDOM.render( - -, mountNode); -```` diff --git a/src/components/Charts/demo/mix.md b/src/components/Charts/demo/mix.md deleted file mode 100644 index fc64110ae4b9b16126409d51d0e8ad5afc423fd2..0000000000000000000000000000000000000000 --- a/src/components/Charts/demo/mix.md +++ /dev/null @@ -1,84 +0,0 @@ ---- -order: 0 -title: 图表套件组合展示 ---- - -利用 Ant Design Pro 提供的图表套件，可以灵活组合符合设计规范的图表来满足复杂的业务需求。 - -````jsx -import { ChartCard, Field, MiniArea, MiniBar, MiniProgress } from 'ant-design-pro/lib/Charts'; -import Trend from 'ant-design-pro/lib/Trend'; -import NumberInfo from 'ant-design-pro/lib/NumberInfo'; -import { Row, Col, Icon, Tooltip } from 'antd'; -import numeral from 'numeral'; -import moment from 'moment'; - -const visitData = []; -const beginDay = new Date().getTime(); -for (let i = 0; i < 20; i += 1) { - visitData.push({ - x: moment(new Date(beginDay + (1000 * 60 * 60 * 24 * i))).format('YYYY-MM-DD'), - y: Math.floor(Math.random() * 100) + 10, - }); -} - -ReactDOM.render( - - - - 本周访问} - total={numeral(12321).format('0,0')} - status="up" - subTotal={17.1} - /> - - - - - } - total={numeral(8846).format('0,0')} - footer={} - contentHeight={46} - > - - - - - } - total="78%" - footer={ -
    - - 周同比 - 12% - - - 日环比 - 11% - -
    - } - contentHeight={46} - > - -     - -     -, mountNode); -```` diff --git a/src/components/Charts/demo/pie.md b/src/components/Charts/demo/pie.md deleted file mode 100644 index 9c87161a27e1adb1adeb0ffeff38ff01f41b8230..0000000000000000000000000000000000000000 --- a/src/components/Charts/demo/pie.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -order: 5 -title: 饼状图 ---- - -```jsx -import { Pie, yuan } from 'ant-design-pro/lib/Charts'; - -const salesPieData = [ - { - x: '家用电器', - y: 4544, - }, - { - x: '食用酒水', - y: 3321, - }, - { - x: '个护健康', - y: 3113, - }, - { - x: '服饰箱包', - y: 2341, - }, - { - x: '母婴产品', - y: 1231, - }, - { - x: '其他', - y: 1231, - }, -]; - -ReactDOM.render( - ( - now.y + pre, 0)) - }} - /> - )} - data={salesPieData} - valueFormat={val => } - height={294} - />, - mountNode, -); -``` diff --git a/src/components/Charts/demo/radar.md b/src/components/Charts/demo/radar.md deleted file mode 100644 index 584344aa3ed5dbc52d796d5043e8711c21d5650d..0000000000000000000000000000000000000000 --- a/src/components/Charts/demo/radar.md +++ /dev/null @@ -1,64 +0,0 @@ ---- -order: 7 -title: 雷达图 ---- - -````jsx -import { Radar, ChartCard } from 'ant-design-pro/lib/Charts'; - -const radarOriginData = [ - { - name: '个人', - ref: 10, - koubei: 8, - output: 4, - contribute: 5, - hot: 7, - }, - { - name: '团队', - ref: 3, - koubei: 9, - output: 6, - contribute: 3, - hot: 1, - }, - { - name: '部门', - ref: 4, - koubei: 1, - output: 6, - contribute: 5, - hot: 7, - }, -]; -const radarData = []; -const radarTitleMap = { - ref: '引用', - koubei: '口碑', - output: '产量', - contribute: '贡献', - hot: '热度', -}; -radarOriginData.forEach((item) => { - Object.keys(item).forEach((key) => { - if (key !== 'name') { - radarData.push({ - name: item.name, - label: radarTitleMap[key], - value: item[key], - }); - } - }); -}); - -ReactDOM.render( - - - -, mountNode); -```` diff --git a/src/components/Charts/demo/tag-cloud.md b/src/components/Charts/demo/tag-cloud.md deleted file mode 100644 index c66f6fe6bf8bdafb8e31d359a9cabe401568480e..0000000000000000000000000000000000000000 --- a/src/components/Charts/demo/tag-cloud.md +++ /dev/null @@ -1,25 +0,0 @@ ---- -order: 9 -title: 标签云 ---- - -标签云是一套相关的标签以及与此相应的权重展示方式，一般典型的标签云有 30 至 150 个标签，而权重影响使用的字体大小或其他视觉效果。 - -````jsx -import { TagCloud } from 'ant-design-pro/lib/Charts'; - -const tags = []; -for (let i = 0; i < 50; i += 1) { - tags.push({ - name: `TagClout-Title-${i}`, - value: Math.floor((Math.random() * 50)) + 20, - }); -} - -ReactDOM.render( - -, mountNode); -```` diff --git a/src/components/Charts/demo/timeline-chart.md b/src/components/Charts/demo/timeline-chart.md deleted file mode 100644 index 60773b575f84ce50b401a599da03c93bc7fefec2..0000000000000000000000000000000000000000 --- a/src/components/Charts/demo/timeline-chart.md +++ /dev/null @@ -1,27 +0,0 @@ ---- -order: 9 -title: 带有时间轴的图表 ---- - -使用 `TimelineChart` 组件可以实现带有时间轴的柱状图展现，而其中的 `x` 属性，则是时间值的指向，默认最多支持同时展现两个指标，分别是 `y1` 和 `y2`。 - -````jsx -import { TimelineChart } from 'ant-design-pro/lib/Charts'; - -const chartData = []; -for (let i = 0; i < 20; i += 1) { - chartData.push({ - x: (new Date().getTime()) + (1000 * 60 * 30 * i), - y1: Math.floor(Math.random() * 100) + 1000, - y2: Math.floor(Math.random() * 100) + 10, - }); -} - -ReactDOM.render( - -, mountNode); -```` diff --git a/src/components/Charts/demo/waterwave.md b/src/components/Charts/demo/waterwave.md deleted file mode 100644 index 74d290f5449adb8bd3f9bf7c7202826a5b9b6b97..0000000000000000000000000000000000000000 --- a/src/components/Charts/demo/waterwave.md +++ /dev/null @@ -1,20 +0,0 @@ ---- -order: 8 -title: 水波图 ---- - -水波图是一种比例的展示方式，可以更直观的展示关键值的占比。 - -````jsx -import { WaterWave } from 'ant-design-pro/lib/Charts'; - -ReactDOM.render( -
    - -
    -, mountNode); -```` diff --git a/src/components/Charts/g2.js b/src/components/Charts/g2.js deleted file mode 100644 index 21e22c28e70c29ecc445fcd1c1f38bde7c82311e..0000000000000000000000000000000000000000 --- a/src/components/Charts/g2.js +++ /dev/null @@ -1,15 +0,0 @@ -// 全局 G2 设置 -import { track, setTheme } from 'bizcharts'; - -track(false); - -const config = { - defaultColor: '#1089ff', - shape: { - interval: { - fillOpacity: 1, - }, - }, -}; - -setTheme(config); diff --git a/src/components/Charts/index.d.ts b/src/components/Charts/index.d.ts deleted file mode 100644 index 1ff27af291472f887b334b7eeed96d3914ff4362..0000000000000000000000000000000000000000 --- a/src/components/Charts/index.d.ts +++ /dev/null @@ -1,17 +0,0 @@ -import * as numeral from 'numeral'; -export { default as ChartCard } from './ChartCard'; -export { default as Bar } from './Bar'; -export { default as Pie } from './Pie'; -export { default as Radar } from './Radar'; -export { default as Gauge } from './Gauge'; -export { default as MiniArea } from './MiniArea'; -export { default as MiniBar } from './MiniBar'; -export { default as MiniProgress } from './MiniProgress'; -export { default as Field } from './Field'; -export { default as WaterWave } from './WaterWave'; -export { default as TagCloud } from './TagCloud'; -export { default as TimelineChart } from './TimelineChart'; - -declare const yuan: (value: number | string) => string; - -export { yuan }; diff --git a/src/components/Charts/index.js b/src/components/Charts/index.js deleted file mode 100644 index 78863fabdb7615138baf2063f1c4ed13285abade..0000000000000000000000000000000000000000 --- a/src/components/Charts/index.js +++ /dev/null @@ -1,49 +0,0 @@ -import numeral from 'numeral'; -import './g2'; -import ChartCard from './ChartCard'; -import Bar from './Bar'; -import Pie from './Pie'; -import Radar from './Radar'; -import Gauge from './Gauge'; -import MiniArea from './MiniArea'; -import MiniBar from './MiniBar'; -import MiniProgress from './MiniProgress'; -import Field from './Field'; -import WaterWave from './WaterWave'; -import TagCloud from './TagCloud'; -import TimelineChart from './TimelineChart'; - -const yuan = val => `¥ ${numeral(val).format('0,0')}`; - -const Charts = { - yuan, - Bar, - Pie, - Gauge, - Radar, - MiniBar, - MiniArea, - MiniProgress, - ChartCard, - Field, - WaterWave, - TagCloud, - TimelineChart, -}; - -export { - Charts as default, - yuan, - Bar, - Pie, - Gauge, - Radar, - MiniBar, - MiniArea, - MiniProgress, - ChartCard, - Field, - WaterWave, - TagCloud, - TimelineChart, -}; diff --git a/src/components/Charts/index.less b/src/components/Charts/index.less deleted file mode 100644 index 190428bc80d7cd7f6f22d51fd48fa37b2d44eb10..0000000000000000000000000000000000000000 --- a/src/components/Charts/index.less +++ /dev/null @@ -1,19 +0,0 @@ -.miniChart { - position: relative; - width: 100%; - .chartContent { - position: absolute; - bottom: -28px; - width: 100%; - > div { - margin: 0 -5px; - overflow: hidden; - } - } - .chartLoading { - position: absolute; - top: 16px; - left: 50%; - margin-left: -7px; - } -} diff --git a/src/components/Charts/index.md b/src/components/Charts/index.md deleted file mode 100644 index cb7c9c96e191d47fe2dac084c25cb194f3c169c0..0000000000000000000000000000000000000000 --- a/src/components/Charts/index.md +++ /dev/null @@ -1,132 +0,0 @@ ---- -title: - en-US: Charts - zh-CN: Charts -subtitle: 图表 -order: 2 -cols: 2 ---- - -Ant Design Pro 提供的业务中常用的图表类型，都是基于 [G2](https://antv.alipay.com/g2/doc/index.html) 按照 Ant Design 图表规范封装，需要注意的是 Ant Design Pro 的图表组件以套件形式提供，可以任意组合实现复杂的业务需求。 - -因为结合了 Ant Design 的标准设计，本着极简的设计思想以及开箱即用的理念，简化了大量 API 配置，所以如果需要灵活定制图表，可以参考 Ant Design Pro 图表实现，自行基于 [G2](https://antv.alipay.com/g2/doc/index.html) 封装图表组件使用。 - -## API - -### ChartCard - -| 参数 | 说明 | 类型 | 默认值 | -|----------|------------------------------------------|-------------|-------| -| title | 卡片标题 | ReactNode\|string | - | -| action | 卡片操作 | ReactNode | - | -| total | 数据总量 | ReactNode \| number \| function | - | -| footer | 卡片底部 | ReactNode | - | -| contentHeight | 内容区域高度 | number | - | -| avatar | 右侧图标 | React.ReactNode | - | -### MiniBar - -| 参数 | 说明 | 类型 | 默认值 | -|----------|------------------------------------------|-------------|-------| -| color | 图表颜色 | string | `#1890FF` | -| height | 图表高度 | number | - | -| data | 数据 | array<{x, y}> | - | - -### MiniArea - -| 参数 | 说明 | 类型 | 默认值 | -|----------|------------------------------------------|-------------|-------| -| color | 图表颜色 | string | `rgba(24, 144, 255, 0.2)` | -| borderColor | 图表边颜色 | string | `#1890FF` | -| height | 图表高度 | number | - | -| line | 是否显示描边 | boolean | false | -| animate | 是否显示动画 | boolean | true | -| xAxis | [x 轴配置](http://antvis.github.io/g2/doc/tutorial/start/axis.html) | object | - | -| yAxis | [y 轴配置](http://antvis.github.io/g2/doc/tutorial/start/axis.html) | object | - | -| data | 数据 | array<{x, y}> | - | - -### MiniProgress - -| 参数 | 说明 | 类型 | 默认值 | -|----------|------------------------------------------|-------------|-------| -| target | 目标比例 | number | - | -| color | 进度条颜色 | string | - | -| strokeWidth | 进度条高度 | number | - | -| percent | 进度比例 | number | - | - -### Bar - -| 参数 | 说明 | 类型 | 默认值 | -|----------|------------------------------------------|-------------|-------| -| title | 图表标题 | ReactNode\|string | - | -| color | 图表颜色 | string | `rgba(24, 144, 255, 0.85)` | -| padding | 图表内部间距 | [array](https://github.com/alibaba/BizCharts/blob/master/doc/api/chart.md#7padding-object--number--array-) | `'auto'` | -| height | 图表高度 | number | - | -| data | 数据 | array<{x, y}> | - | -| autoLabel | 在宽度不足时，自动隐藏 x 轴的 label | boolean | `true` | - -### Pie - -| 参数 | 说明 | 类型 | 默认值 | -|----------|------------------------------------------|-------------|-------| -| animate | 是否显示动画 | boolean | true | -| color | 图表颜色 | string | `rgba(24, 144, 255, 0.85)` | -| height | 图表高度 | number | - | -| hasLegend | 是否显示 legend | boolean | `false` | -| padding | 图表内部间距 | [array](https://github.com/alibaba/BizCharts/blob/master/doc/api/chart.md#7padding-object--number--array-) | `'auto'` | -| percent | 占比 | number | - | -| tooltip | 是否显示 tooltip | boolean | true | -| valueFormat | 显示值的格式化函数 | function | - | -| title | 图表标题 | ReactNode\|string | - | -| subTitle | 图表子标题 | ReactNode\|string | - | -| total | 图标中央的总数 | string | function | - | - -### Radar - -| 参数 | 说明 | 类型 | 默认值 | -|----------|------------------------------------------|-------------|-------| -| title | 图表标题 | ReactNode\|string | - | -| height | 图表高度 | number | - | -| hasLegend | 是否显示 legend | boolean | `false` | -| padding | 图表内部间距 | [array](https://github.com/alibaba/BizCharts/blob/master/doc/api/chart.md#7padding-object--number--array-) | `'auto'` | -| data | 图标数据 | array<{name,label,value}> | - | - -### Gauge - -| 参数 | 说明 | 类型 | 默认值 | -|----------|------------------------------------------|-------------|-------| -| title | 图表标题 | ReactNode\|string | - | -| height | 图表高度 | number | - | -| color | 图表颜色 | string | `#2F9CFF` | -| bgColor | 图表背景颜色 | string | `#F0F2F5` | -| percent | 进度比例 | number | - | - -### WaterWave - -| 参数 | 说明 | 类型 | 默认值 | -|----------|------------------------------------------|-------------|-------| -| title | 图表标题 | ReactNode\|string | - | -| height | 图表高度 | number | - | -| color | 图表颜色 | string | `#1890FF` | -| percent | 进度比例 | number | - | - -### TagCloud - -| 参数 | 说明 | 类型 | 默认值 | -|----------|------------------------------------------|-------------|-------| -| data | 标题 | Array | - | -| height | 高度值 | number | - | - -### TimelineChart - -| 参数 | 说明 | 类型 | 默认值 | -|----------|------------------------------------------|-------------|-------| -| data | 标题 | Array | - | -| titleMap | 指标别名 | Object{y1: '客流量', y2: '支付笔数'} | - | -| height | 高度值 | number | 400 | - -### Field - -| 参数 | 说明 | 类型 | 默认值 | -|----------|------------------------------------------|-------------|-------| -| label | 标题 | ReactNode\|string | - | -| value | 值 | ReactNode\|string | - | diff --git a/src/components/CountDown/demo/simple.md b/src/components/CountDown/demo/simple.md deleted file mode 100644 index e42cbf1d99caab99f7c986600717ed08d5df63e3..0000000000000000000000000000000000000000 --- a/src/components/CountDown/demo/simple.md +++ /dev/null @@ -1,24 +0,0 @@ ---- -order: 0 -title: - zh-CN: 基本 - en-US: Basic ---- - -## zh-CN - -简单的倒计时组件使用。 - -## en-US - -The simplest usage. - -````jsx -import CountDown from 'ant-design-pro/lib/CountDown'; - -const targetTime = new Date().getTime() + 3900000; - -ReactDOM.render( - -, mountNode); -```` diff --git a/src/components/CountDown/index.d.ts b/src/components/CountDown/index.d.ts deleted file mode 100644 index d39a2e951830d5cddca08c8becbdb500847448b3..0000000000000000000000000000000000000000 --- a/src/components/CountDown/index.d.ts +++ /dev/null @@ -1,9 +0,0 @@ -import * as React from 'react'; -export interface ICountDownProps { - format?: (time: number) => void; - target: Date | number; - onEnd?: () => void; - style?: React.CSSProperties; -} - -export default class CountDown extends React.Component {} diff --git a/src/components/CountDown/index.en-US.md b/src/components/CountDown/index.en-US.md deleted file mode 100644 index 7b452406b3528ccfb14fe3bdecb0ead9a2df4e6f..0000000000000000000000000000000000000000 --- a/src/components/CountDown/index.en-US.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: CountDown -cols: 1 -order: 3 ---- - -Simple CountDown Component. - -## API - -| Property | Description | Type | Default | -|----------|------------------------------------------|-------------|-------| -| format | Formatter of time | Function(time) | | -| target | Target time | Date | - | -| onEnd | Countdown to the end callback | funtion | -| diff --git a/src/components/CountDown/index.js b/src/components/CountDown/index.js deleted file mode 100644 index 7565bd82da8c6331840861a1dc7bc3b49fad947f..0000000000000000000000000000000000000000 --- a/src/components/CountDown/index.js +++ /dev/null @@ -1,121 +0,0 @@ -import React, { Component } from 'react'; - -function fixedZero(val) { - return val * 1 < 10 ? `0${val}` : val; -} -const initTime = props => { - let lastTime = 0; - let targetTime = 0; - try { - if (Object.prototype.toString.call(props.target) === '[object Date]') { - targetTime = props.target.getTime(); - } else { - targetTime = new Date(props.target).getTime(); - } - } catch (e) { - throw new Error('invalid target prop', e); - } - - lastTime = targetTime - new Date().getTime(); - return { - lastTime: lastTime < 0 ? 0 : lastTime, - }; -}; - -class CountDown extends Component { - timer = 0; - - interval = 1000; - - constructor(props) { - super(props); - const { lastTime } = initTime(props); - this.state = { - lastTime, - }; - } - - static getDerivedStateFromProps(nextProps, preState) { - const { lastTime } = initTime(nextProps); - if (preState.lastTime !== lastTime) { - return { - lastTime, - }; - } - return null; - } - - componentDidMount() { - this.tick(); - } - - componentDidUpdate(prevProps) { - const { target } = this.props; - if (target !== prevProps.target) { - clearTimeout(this.timer); - this.tick(); - } - } - - componentWillUnmount() { - clearTimeout(this.timer); - } - - // defaultFormat = time => ( - // {moment(time).format('hh:mm:ss')} - // ); - defaultFormat = time => { - const hours = 60 * 60 * 1000; - const minutes = 60 * 1000; - - const h = Math.floor(time / hours); - const m = Math.floor((time - h * hours) / minutes); - const s = Math.floor((time - h * hours - m * minutes) / 1000); - return ( - - {fixedZero(h)}:{fixedZero(m)}:{fixedZero(s)} - - ); - }; - - tick = () => { - const { onEnd } = this.props; - let { lastTime } = this.state; - - this.timer = setTimeout(() => { - if (lastTime < this.interval) { - clearTimeout(this.timer); - this.setState( - { - lastTime: 0, - }, - () => { - if (onEnd) { - onEnd(); - } - } - ); - } else { - lastTime -= this.interval; - this.setState( - { - lastTime, - }, - () => { - this.tick(); - } - ); - } - }, this.interval); - }; - - render() { - const { format = this.defaultFormat, onEnd, ...rest } = this.props; - const { lastTime } = this.state; - const result = format(lastTime); - - return {result}; - } -} - -export default CountDown; diff --git a/src/components/CountDown/index.zh-CN.md b/src/components/CountDown/index.zh-CN.md deleted file mode 100644 index 7e00ba1da5f3ed633dd2d2dc9c81b5acfc30c3fa..0000000000000000000000000000000000000000 --- a/src/components/CountDown/index.zh-CN.md +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: CountDown -subtitle: 倒计时 -cols: 1 -order: 3 ---- - -倒计时组件。 - -## API - -| 参数 | 说明 | 类型 | 默认值 | -|----------|------------------------------------------|-------------|-------| -| format | 时间格式化显示 | Function(time) | | -| target | 目标时间 | Date | - | -| onEnd | 倒计时结束回调 | funtion | -| diff --git a/src/components/DescriptionList/Description.d.ts b/src/components/DescriptionList/Description.d.ts deleted file mode 100644 index 2a17be374accc8e2a1ffa9812327398a6c3f7173..0000000000000000000000000000000000000000 --- a/src/components/DescriptionList/Description.d.ts +++ /dev/null @@ -1,9 +0,0 @@ -import * as React from 'react'; - -export default class Description extends React.Component< - { - term: React.ReactNode; - style?: React.CSSProperties; - }, - any -> {} diff --git a/src/components/DescriptionList/Description.js b/src/components/DescriptionList/Description.js deleted file mode 100644 index fce9fd3cb7debf4551bae22dcfc48eefb176d959..0000000000000000000000000000000000000000 --- a/src/components/DescriptionList/Description.js +++ /dev/null @@ -1,22 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { Col } from 'antd'; -import styles from './index.less'; -import responsive from './responsive'; - -const Description = ({ term, column, children, ...restProps }) => ( - - {term &&
    {term}
    } - {children !== null && children !== undefined &&
    {children}
    } - -); - -Description.defaultProps = { - term: '', -}; - -Description.propTypes = { - term: PropTypes.node, -}; - -export default Description; diff --git a/src/components/DescriptionList/DescriptionList.js b/src/components/DescriptionList/DescriptionList.js deleted file mode 100644 index 84bdbd79d3dd52c62833c16783010825ecdbd0c1..0000000000000000000000000000000000000000 --- a/src/components/DescriptionList/DescriptionList.js +++ /dev/null @@ -1,33 +0,0 @@ -import React from 'react'; -import classNames from 'classnames'; -import { Row } from 'antd'; -import styles from './index.less'; - -const DescriptionList = ({ - className, - title, - col = 3, - layout = 'horizontal', - gutter = 32, - children, - size, - ...restProps -}) => { - const clsString = classNames(styles.descriptionList, styles[layout], className, { - [styles.small]: size === 'small', - [styles.large]: size === 'large', - }); - const column = col > 4 ? 4 : col; - return ( -
    - {title ?
    {title}
    : null} - - {React.Children.map(children, child => - child ? React.cloneElement(child, { column }) : child - )} - -
    - ); -}; - -export default DescriptionList; diff --git a/src/components/DescriptionList/demo/basic.md b/src/components/DescriptionList/demo/basic.md deleted file mode 100644 index 87954551e6fa564d56d327d4ca330f43f5e6c1b7..0000000000000000000000000000000000000000 --- a/src/components/DescriptionList/demo/basic.md +++ /dev/null @@ -1,43 +0,0 @@ ---- -order: 0 -title: - zh-CN: 基本 - en-US: Basic ---- - -## zh-CN - -基本描述列表。 - -## en-US - -Basic DescriptionList. - -````jsx -import DescriptionList from 'ant-design-pro/lib/DescriptionList'; - -const { Description } = DescriptionList; - -ReactDOM.render( - - - A free, open source, cross-platform, - graphical web browser developed by the - Mozilla Corporation and hundreds of - volunteers. - - - A free, open source, cross-platform, - graphical web browser developed by the - Mozilla Corporation and hundreds of - volunteers. - - - A free, open source, cross-platform, - graphical web browser developed by the - Mozilla Corporation and hundreds of - volunteers. - - -, mountNode); -```` diff --git a/src/components/DescriptionList/demo/vertical.md b/src/components/DescriptionList/demo/vertical.md deleted file mode 100644 index 2742f7c9f6b0a907570617ab422b5341a2151a4b..0000000000000000000000000000000000000000 --- a/src/components/DescriptionList/demo/vertical.md +++ /dev/null @@ -1,43 +0,0 @@ ---- -order: 1 -title: - zh-CN: 垂直型 - en-US: Vertical ---- - -## zh-CN - -垂直布局。 - -## en-US - -Vertical layout. - -````jsx -import DescriptionList from 'ant-design-pro/lib/DescriptionList'; - -const { Description } = DescriptionList; - -ReactDOM.render( - - - A free, open source, cross-platform, - graphical web browser developed by the - Mozilla Corporation and hundreds of - volunteers. - - - A free, open source, cross-platform, - graphical web browser developed by the - Mozilla Corporation and hundreds of - volunteers. - - - A free, open source, cross-platform, - graphical web browser developed by the - Mozilla Corporation and hundreds of - volunteers. - - -, mountNode); -```` diff --git a/src/components/DescriptionList/index.d.ts b/src/components/DescriptionList/index.d.ts deleted file mode 100644 index 96ccfa7da3a21d790e3348a65603488303780669..0000000000000000000000000000000000000000 --- a/src/components/DescriptionList/index.d.ts +++ /dev/null @@ -1,15 +0,0 @@ -import * as React from 'react'; -import Description from './Description'; - -export interface IDescriptionListProps { - layout?: 'horizontal' | 'vertical'; - col?: number; - title: React.ReactNode; - gutter?: number; - size?: 'large' | 'small'; - style?: React.CSSProperties; -} - -export default class DescriptionList extends React.Component { - public static Description: typeof Description; -} diff --git a/src/components/DescriptionList/index.en-US.md b/src/components/DescriptionList/index.en-US.md deleted file mode 100644 index 089f30b1a1502bd6bfd8754821870e5db5df55ac..0000000000000000000000000000000000000000 --- a/src/components/DescriptionList/index.en-US.md +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: DescriptionList -cols: 1 -order: 4 ---- - -Groups display multiple read-only fields, which are common to informational displays on detail pages. - -## API - -### DescriptionList - -| Property | Description | Type | Default | -|----------|------------------------------------------|-------------|---------| -| layout | type of layout | Enum{'horizontal', 'vertical'} | 'horizontal' | -| col | specify the maximum number of columns to display, the final columns number is determined by col setting combined with [Responsive Rules](/components/DescriptionList#Responsive-Rules) | number(0 < col <= 4) | 3 | -| title | title | ReactNode | - | -| gutter | specify the distance between two items, unit is `px` | number | 32 | -| size | size of list | Enum{'large', 'small'} | - | - -#### Responsive Rules - -| Window Width | Columns Number | -|---------------------|---------------------------------------------| -| `≥768px` | `col` | -| `≥576px` | `col < 2 ? col : 2` | -| `<576px` | `1` | - -### DescriptionList.Description - -| Property | Description | Type | Default | -|----------|------------------------------------------|-------------|-------| -| term | item title | ReactNode | - | diff --git a/src/components/DescriptionList/index.js b/src/components/DescriptionList/index.js deleted file mode 100644 index 357f479fd5b279ad9e6141c8c70ae73310e373c3..0000000000000000000000000000000000000000 --- a/src/components/DescriptionList/index.js +++ /dev/null @@ -1,5 +0,0 @@ -import DescriptionList from './DescriptionList'; -import Description from './Description'; - -DescriptionList.Description = Description; -export default DescriptionList; diff --git a/src/components/DescriptionList/index.less b/src/components/DescriptionList/index.less deleted file mode 100644 index bfb33fcc3f14e47bf03549f3e68dc11f86f184f2..0000000000000000000000000000000000000000 --- a/src/components/DescriptionList/index.less +++ /dev/null @@ -1,77 +0,0 @@ -@import '~antd/lib/style/themes/default.less'; - -.descriptionList { - // offset the padding-bottom of last row - :global { - .ant-row { - margin-bottom: -16px; - overflow: hidden; - } - } - - .title { - font-size: 14px; - color: @heading-color; - font-weight: 500; - margin-bottom: 16px; - } - - .term { - // Line-height is 22px IE dom height will calculate error - line-height: 20px; - padding-bottom: 16px; - margin-right: 8px; - color: @heading-color; - white-space: nowrap; - display: table-cell; - - &:after { - content: ':'; - margin: 0 8px 0 2px; - position: relative; - top: -0.5px; - } - } - - .detail { - line-height: 20px; - width: 100%; - padding-bottom: 16px; - color: @text-color; - display: table-cell; - } - - &.small { - // offset the padding-bottom of last row - :global { - .ant-row { - margin-bottom: -8px; - } - } - .title { - margin-bottom: 12px; - color: @text-color; - } - .term, - .detail { - padding-bottom: 8px; - } - } - - &.large { - .title { - font-size: 16px; - } - } - - &.vertical { - .term { - padding-bottom: 8px; - display: block; - } - - .detail { - display: block; - } - } -} diff --git a/src/components/DescriptionList/index.zh-CN.md b/src/components/DescriptionList/index.zh-CN.md deleted file mode 100644 index b16a7fe76907bdffb1fa20c53ac1ba72552f19d3..0000000000000000000000000000000000000000 --- a/src/components/DescriptionList/index.zh-CN.md +++ /dev/null @@ -1,37 +0,0 @@ ---- -title: DescriptionList -subtitle: 描述列表 -cols: 1 -order: 4 ---- - -成组展示多个只读字段，常见于详情页的信息展示。 - -## API - -### DescriptionList - -| 参数 | 说明 | 类型 | 默认值 | -|----------|------------------------------------------|-------------|-------| -| layout | 布局方式 | Enum{'horizontal', 'vertical'} | 'horizontal' | -| col | 指定信息最多分几列展示，最终一行几列由 col 配置结合[响应式规则](/components/DescriptionList#响应式规则)决定 | number(0 < col <= 4) | 3 | -| title | 列表标题 | ReactNode | - | -| gutter | 列表项间距，单位为 `px` | number | 32 | -| size | 列表型号 | Enum{'large', 'small'} | - | - -#### 响应式规则 - -| 窗口宽度 | 展示列数 | -|---------------------|---------------------------------------------| -| `≥768px` | `col` | -| `≥576px` | `col < 2 ? col : 2` | -| `<576px` | `1` | - -### DescriptionList.Description - -| 参数 | 说明 | 类型 | 默认值 | -|----------|------------------------------------------|-------------|-------| -| term | 列表项标题 | ReactNode | - | - - - diff --git a/src/components/DescriptionList/responsive.js b/src/components/DescriptionList/responsive.js deleted file mode 100644 index a5aa73f781e3eccdbae4dffd656e201589575554..0000000000000000000000000000000000000000 --- a/src/components/DescriptionList/responsive.js +++ /dev/null @@ -1,6 +0,0 @@ -export default { - 1: { xs: 24 }, - 2: { xs: 24, sm: 12 }, - 3: { xs: 24, sm: 12, md: 8 }, - 4: { xs: 24, sm: 12, md: 6 }, -}; diff --git a/src/components/Ellipsis/demo/line.md b/src/components/Ellipsis/demo/line.md deleted file mode 100644 index bc31170dc317f3f9a942fd041fd16350aba60858..0000000000000000000000000000000000000000 --- a/src/components/Ellipsis/demo/line.md +++ /dev/null @@ -1,31 +0,0 @@ ---- -order: 1 -title: - zh-CN: 按照行数省略 - en-US: Truncate according to the number of rows ---- - -## zh-CN - -通过设置 `lines` 属性指定最大行数，如果超过这个行数的文本会自动截取。但是在这种模式下所有 `children` 将会被转换成纯文本。 - -并且注意在这种模式下，外容器需要有指定的宽度（或设置自身宽度）。 - -## en-US - -`lines` attribute specifies the maximum number of rows where the text will automatically be truncated when exceeded. In this mode, all children will be converted to plain text. - -Also note that, in this mode, the outer container needs to have a specified width (or set its own width). - - -````jsx -import Ellipsis from 'ant-design-pro/lib/Ellipsis'; - -const article =

    There were injuries alleged in three cases in 2015, and a fourth incident in September, according to the safety recall report. After meeting with US regulators in October, the firm decided to issue a voluntary recall.

    ; - -ReactDOM.render( -
    - {article} -
    -, mountNode); -```` diff --git a/src/components/Ellipsis/demo/number.md b/src/components/Ellipsis/demo/number.md deleted file mode 100644 index 0bc1a0ff7847711f27ac85aa98ae222d14904be4..0000000000000000000000000000000000000000 --- a/src/components/Ellipsis/demo/number.md +++ /dev/null @@ -1,28 +0,0 @@ ---- -order: 0 -title: - zh-CN: 按照字符数省略 - en-US: Truncate according to the number of character ---- - -## zh-CN - -通过设置 `length` 属性指定文本最长长度，如果超过这个长度会自动截取。 - -## en-US - -`length` attribute specifies the maximum length where the text will automatically be truncated when exceeded. - -````jsx -import Ellipsis from 'ant-design-pro/lib/Ellipsis'; - -const article = 'There were injuries alleged in three cases in 2015, and a fourth incident in September, according to the safety recall report. After meeting with US regulators in October, the firm decided to issue a voluntary recall.'; - -ReactDOM.render( -
    - {article} -

    Show Tooltip

    - {article} -
    -, mountNode); -```` diff --git a/src/components/Ellipsis/index.d.ts b/src/components/Ellipsis/index.d.ts deleted file mode 100644 index 37d508d77335048de87287fc52fb9f457e89dc33..0000000000000000000000000000000000000000 --- a/src/components/Ellipsis/index.d.ts +++ /dev/null @@ -1,21 +0,0 @@ -import * as React from 'react'; -import { TooltipProps } from 'antd/lib/tooltip'; - -export interface IEllipsisTooltipProps extends TooltipProps { - title?: undefined; - overlayStyle?: undefined; -} - -export interface IEllipsisProps { - tooltip?: boolean | IEllipsisTooltipProps; - length?: number; - lines?: number; - style?: React.CSSProperties; - className?: string; - fullWidthRecognition?: boolean; -} - -export function getStrFullLength(str: string): number; -export function cutStrByFullLength(str: string, maxLength: number): string; - -export default class Ellipsis extends React.Component {} diff --git a/src/components/Ellipsis/index.en-US.md b/src/components/Ellipsis/index.en-US.md deleted file mode 100644 index 15139cc9dc13e1f0db7c50f942d884761ed82fec..0000000000000000000000000000000000000000 --- a/src/components/Ellipsis/index.en-US.md +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: Ellipsis -cols: 1 -order: 10 ---- - -When the text is too long, the Ellipsis automatically shortens it according to its length or the maximum number of lines. - -## API - -Property | Description | Type | Default -----|------|-----|------ -tooltip | tooltip for showing the full text content when hovering over | boolean | - -length | maximum number of characters in the text before being truncated | number | - -lines | maximum number of rows in the text before being truncated | number | `1` -fullWidthRecognition | whether consider full-width character length as 2 when calculate string length | boolean | - diff --git a/src/components/Ellipsis/index.js b/src/components/Ellipsis/index.js deleted file mode 100644 index de700b74b192b5c634ee88a0fc5533f59a504ab5..0000000000000000000000000000000000000000 --- a/src/components/Ellipsis/index.js +++ /dev/null @@ -1,270 +0,0 @@ -import React, { Component } from 'react'; -import { Tooltip } from 'antd'; -import classNames from 'classnames'; -import styles from './index.less'; - -/* eslint react/no-did-mount-set-state: 0 */ -/* eslint no-param-reassign: 0 */ - -const isSupportLineClamp = document.body.style.webkitLineClamp !== undefined; - -const TooltipOverlayStyle = { - overflowWrap: 'break-word', - wordWrap: 'break-word', -}; - -export const getStrFullLength = (str = '') => - str.split('').reduce((pre, cur) => { - const charCode = cur.charCodeAt(0); - if (charCode >= 0 && charCode <= 128) { - return pre + 1; - } - return pre + 2; - }, 0); - -export const cutStrByFullLength = (str = '', maxLength) => { - let showLength = 0; - return str.split('').reduce((pre, cur) => { - const charCode = cur.charCodeAt(0); - if (charCode >= 0 && charCode <= 128) { - showLength += 1; - } else { - showLength += 2; - } - if (showLength <= maxLength) { - return pre + cur; - } - return pre; - }, ''); -}; - -const getTooltip = ({ tooltip, overlayStyle, title, children }) => { - if (tooltip) { - const props = tooltip === true ? { overlayStyle, title } : { ...tooltip, overlayStyle, title }; - return {children}; - } - return children; -}; - -const EllipsisText = ({ text, length, tooltip, fullWidthRecognition, ...other }) => { - if (typeof text !== 'string') { - throw new Error('Ellipsis children must be string.'); - } - const textLength = fullWidthRecognition ? getStrFullLength(text) : text.length; - if (textLength <= length || length < 0) { - return {text}; - } - const tail = '...'; - let displayText; - if (length - tail.length <= 0) { - displayText = ''; - } else { - displayText = fullWidthRecognition ? cutStrByFullLength(text, length) : text.slice(0, length); - } - - const spanAttrs = tooltip ? {} : { ...other }; - return getTooltip({ - tooltip, - overlayStyle: TooltipOverlayStyle, - title: text, - children: ( - - {displayText} - {tail} - - ), - }); -}; - -export default class Ellipsis extends Component { - state = { - text: '', - targetCount: 0, - }; - - componentDidMount() { - if (this.node) { - this.computeLine(); - } - } - - componentDidUpdate(perProps) { - const { lines } = this.props; - if (lines !== perProps.lines) { - this.computeLine(); - } - } - - computeLine = () => { - const { lines } = this.props; - if (lines && !isSupportLineClamp) { - const text = this.shadowChildren.innerText || this.shadowChildren.textContent; - const lineHeight = parseInt(getComputedStyle(this.root).lineHeight, 10); - const targetHeight = lines * lineHeight; - this.content.style.height = `${targetHeight}px`; - const totalHeight = this.shadowChildren.offsetHeight; - const shadowNode = this.shadow.firstChild; - - if (totalHeight <= targetHeight) { - this.setState({ - text, - targetCount: text.length, - }); - return; - } - - // bisection - const len = text.length; - const mid = Math.ceil(len / 2); - - const count = this.bisection(targetHeight, mid, 0, len, text, shadowNode); - - this.setState({ - text, - targetCount: count, - }); - } - }; - - bisection = (th, m, b, e, text, shadowNode) => { - const suffix = '...'; - let mid = m; - let end = e; - let begin = b; - shadowNode.innerHTML = text.substring(0, mid) + suffix; - let sh = shadowNode.offsetHeight; - - if (sh <= th) { - shadowNode.innerHTML = text.substring(0, mid + 1) + suffix; - sh = shadowNode.offsetHeight; - if (sh > th || mid === begin) { - return mid; - } - begin = mid; - if (end - begin === 1) { - mid = 1 + begin; - } else { - mid = Math.floor((end - begin) / 2) + begin; - } - return this.bisection(th, mid, begin, end, text, shadowNode); - } - if (mid - 1 < 0) { - return mid; - } - shadowNode.innerHTML = text.substring(0, mid - 1) + suffix; - sh = shadowNode.offsetHeight; - if (sh <= th) { - return mid - 1; - } - end = mid; - mid = Math.floor((end - begin) / 2) + begin; - return this.bisection(th, mid, begin, end, text, shadowNode); - }; - - handleRoot = n => { - this.root = n; - }; - - handleContent = n => { - this.content = n; - }; - - handleNode = n => { - this.node = n; - }; - - handleShadow = n => { - this.shadow = n; - }; - - handleShadowChildren = n => { - this.shadowChildren = n; - }; - - render() { - const { text, targetCount } = this.state; - const { - children, - lines, - length, - className, - tooltip, - fullWidthRecognition, - ...restProps - } = this.props; - - const cls = classNames(styles.ellipsis, className, { - [styles.lines]: lines && !isSupportLineClamp, - [styles.lineClamp]: lines && isSupportLineClamp, - }); - - if (!lines && !length) { - return ( - - {children} - - ); - } - - // length - if (!lines) { - return ( - - ); - } - - const id = `antd-pro-ellipsis-${`${new Date().getTime()}${Math.floor(Math.random() * 100)}`}`; - - // support document.body.style.webkitLineClamp - if (isSupportLineClamp) { - const style = `#${id}{-webkit-line-clamp:${lines};-webkit-box-orient: vertical;}`; - - const node = ( -
    - - {children} -
    - ); - - return getTooltip({ - tooltip, - overlayStyle: TooltipOverlayStyle, - title: children, - children: node, - }); - } - - const childNode = ( - - {targetCount > 0 && text.substring(0, targetCount)} - {targetCount > 0 && targetCount < text.length && '...'} - - ); - - return ( -
    -
    - {getTooltip({ - tooltip, - overlayStyle: TooltipOverlayStyle, - title: text, - children: childNode, - })} -
    - {children} -
    -
    - {text} -
    -
    -
    - ); - } -} diff --git a/src/components/Ellipsis/index.less b/src/components/Ellipsis/index.less deleted file mode 100644 index 2c4a867c1582a6725004510656729ece8167f0b1..0000000000000000000000000000000000000000 --- a/src/components/Ellipsis/index.less +++ /dev/null @@ -1,24 +0,0 @@ -.ellipsis { - overflow: hidden; - display: inline-block; - word-break: break-all; - width: 100%; -} - -.lines { - position: relative; - .shadow { - display: block; - position: absolute; - color: transparent; - opacity: 0; - z-index: -999; - } -} - -.lineClamp { - position: relative; - overflow: hidden; - text-overflow: ellipsis; - display: -webkit-box; -} diff --git a/src/components/Ellipsis/index.test.js b/src/components/Ellipsis/index.test.js deleted file mode 100644 index 4d057b24e7f726f25165dcae7ec9cd064f577f11..0000000000000000000000000000000000000000 --- a/src/components/Ellipsis/index.test.js +++ /dev/null @@ -1,13 +0,0 @@ -import { getStrFullLength, cutStrByFullLength } from './index'; - -describe('test calculateShowLength', () => { - it('get full length', () => { - expect(getStrFullLength('一二，a,')).toEqual(8); - }); - it('cut str by full length', () => { - expect(cutStrByFullLength('一二，a,', 7)).toEqual('一二，a'); - }); - it('cut str when length small', () => { - expect(cutStrByFullLength('一22三', 5)).toEqual('一22'); - }); -}); diff --git a/src/components/Ellipsis/index.zh-CN.md b/src/components/Ellipsis/index.zh-CN.md deleted file mode 100644 index f7a70eadd41a8251e76dbe4bcebdb909cdafbc43..0000000000000000000000000000000000000000 --- a/src/components/Ellipsis/index.zh-CN.md +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Ellipsis -subtitle: 文本自动省略号 -cols: 1 -order: 10 ---- - -文本过长自动处理省略号，支持按照文本长度和最大行数两种方式截取。 - -## API - -参数 | 说明 | 类型 | 默认值 -----|------|-----|------ -tooltip | 移动到文本展示完整内容的提示 | boolean | - -length | 在按照长度截取下的文本最大字符数，超过则截取省略 | number | - -lines | 在按照行数截取下最大的行数，超过则截取省略 | number | `1` -fullWidthRecognition | 是否将全角字符的长度视为2来计算字符串长度 | boolean | - diff --git a/src/components/Exception/demo/403.md b/src/components/Exception/demo/403.md deleted file mode 100644 index bb46037fea8daa2732c466c26c54f45a47d0fe22..0000000000000000000000000000000000000000 --- a/src/components/Exception/demo/403.md +++ /dev/null @@ -1,29 +0,0 @@ ---- -order: 2 -title: - zh-CN: 403 - en-US: 403 ---- - -## zh-CN - -403 页面，配合自定义操作。 - -## en-US - -403 page with custom operations. - -````jsx -import Exception from 'ant-design-pro/lib/Exception'; -import { Button } from 'antd'; - -const actions = ( -
    - - -
    -); -ReactDOM.render( - -, mountNode); -```` diff --git a/src/components/Exception/demo/404.md b/src/components/Exception/demo/404.md deleted file mode 100644 index db50de653eb2acb08c5ed4a0aa83ee3ff73e3180..0000000000000000000000000000000000000000 --- a/src/components/Exception/demo/404.md +++ /dev/null @@ -1,22 +0,0 @@ ---- -order: 0 -title: - zh-CN: 404 - en-US: 404 ---- - -## zh-CN - -404 页面。 - -## en-US - -404 page. - -````jsx -import Exception from 'ant-design-pro/lib/Exception'; - -ReactDOM.render( - -, mountNode); -```` diff --git a/src/components/Exception/demo/500.md b/src/components/Exception/demo/500.md deleted file mode 100644 index 096ca8e511d2b19c952a68a9d1c8da606e747b28..0000000000000000000000000000000000000000 --- a/src/components/Exception/demo/500.md +++ /dev/null @@ -1,22 +0,0 @@ ---- -order: 1 -title: - zh-CN: 500 - en-US: 500 ---- - -## zh-CN - -500 页面。 - -## en-US - -500 page. - -````jsx -import Exception from 'ant-design-pro/lib/Exception'; - -ReactDOM.render( - -, mountNode); -```` diff --git a/src/components/Exception/index.d.ts b/src/components/Exception/index.d.ts deleted file mode 100644 index a74abb1fa6334cb2b8ef987aab5a1b5dc1f0d531..0000000000000000000000000000000000000000 --- a/src/components/Exception/index.d.ts +++ /dev/null @@ -1,15 +0,0 @@ -import * as React from 'react'; -export interface IExceptionProps { - type?: '403' | '404' | '500'; - title?: React.ReactNode; - desc?: React.ReactNode; - img?: string; - actions?: React.ReactNode; - linkElement?: string | React.ComponentType; - style?: React.CSSProperties; - className?: string; - backText?: React.ReactNode; - redirect?: string; -} - -export default class Exception extends React.Component {} diff --git a/src/components/Exception/index.en-US.md b/src/components/Exception/index.en-US.md deleted file mode 100644 index 37e7e80756fb7517239658775e4ce5ef170dcb21..0000000000000000000000000000000000000000 --- a/src/components/Exception/index.en-US.md +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Exception -cols: 1 -order: 5 ---- - -Exceptions page is used to provide feedback on specific abnormal state. Usually, it contains an explanation of the error status, and provides users with suggestions or operations, to prevent users from feeling lost and confused. - -## API - -Property | Description | Type | Default ----------|-------------|------|-------- -| backText | default return button text | ReactNode | back to home | -type | type of exception, the corresponding default `title`, `desc`, `img` will be given if set, which can be overridden by explicit setting of `title`, `desc`, `img` | Enum {'403', '404', '500'} | - -title | title | ReactNode | - -desc | supplementary description | ReactNode | - -img | the url of background image | string | - -actions | suggested operations, a default 'Home' link will show if not set | ReactNode | - -linkElement | to specify the element of link | string\|ReactElement | 'a' -redirect | redirect path | string | '/' \ No newline at end of file diff --git a/src/components/Exception/index.js b/src/components/Exception/index.js deleted file mode 100644 index 2c7223cc7655ce457ef1c597dc3fe8ef86b49c49..0000000000000000000000000000000000000000 --- a/src/components/Exception/index.js +++ /dev/null @@ -1,61 +0,0 @@ -import React, { createElement } from 'react'; -import classNames from 'classnames'; -import { Button } from 'antd'; -import config from './typeConfig'; -import styles from './index.less'; - -class Exception extends React.PureComponent { - static defaultProps = { - backText: 'back to home', - redirect: '/', - }; - - constructor(props) { - super(props); - this.state = {}; - } - - render() { - const { - className, - backText, - linkElement = 'a', - type, - title, - desc, - img, - actions, - redirect, - ...rest - } = this.props; - const pageType = type in config ? type : '404'; - const clsString = classNames(styles.exception, className); - return ( -
    -
    -
    -
    -
    -

    {title || config[pageType].title}

    -
    {desc || config[pageType].desc}
    -
    - {actions || - createElement( - linkElement, - { - to: redirect, - href: redirect, - }, - - )} -
    -
    -
    - ); - } -} - -export default Exception; diff --git a/src/components/Exception/index.less b/src/components/Exception/index.less deleted file mode 100644 index b55fe3a928020e82b2c80f0adb7ebc4fb55eecec..0000000000000000000000000000000000000000 --- a/src/components/Exception/index.less +++ /dev/null @@ -1,89 +0,0 @@ -@import '~antd/lib/style/themes/default.less'; - -.exception { - display: flex; - align-items: center; - height: 80%; - min-height: 500px; - - .imgBlock { - flex: 0 0 62.5%; - width: 62.5%; - padding-right: 152px; - zoom: 1; - &:before, - &:after { - content: ' '; - display: table; - } - &:after { - clear: both; - visibility: hidden; - font-size: 0; - height: 0; - } - } - - .imgEle { - height: 360px; - width: 100%; - max-width: 430px; - float: right; - background-repeat: no-repeat; - background-position: 50% 50%; - background-size: contain; - } - - .content { - flex: auto; - - h1 { - color: #434e59; - font-size: 72px; - font-weight: 600; - line-height: 72px; - margin-bottom: 24px; - } - - .desc { - color: @text-color-secondary; - font-size: 20px; - line-height: 28px; - margin-bottom: 16px; - } - - .actions { - button:not(:last-child) { - margin-right: 8px; - } - } - } -} - -@media screen and (max-width: @screen-xl) { - .exception { - .imgBlock { - padding-right: 88px; - } - } -} - -@media screen and (max-width: @screen-sm) { - .exception { - display: block; - text-align: center; - .imgBlock { - padding-right: 0; - margin: 0 auto 24px; - } - } -} - -@media screen and (max-width: @screen-xs) { - .exception { - .imgBlock { - margin-bottom: -24px; - overflow: hidden; - } - } -} diff --git a/src/components/Exception/index.zh-CN.md b/src/components/Exception/index.zh-CN.md deleted file mode 100644 index 2e64399fcbe4fe2c0eca7b9c4cb7742ccef3ed9a..0000000000000000000000000000000000000000 --- a/src/components/Exception/index.zh-CN.md +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: Exception -subtitle: 异常 -cols: 1 -order: 5 ---- - -异常页用于对页面特定的异常状态进行反馈。通常，它包含对错误状态的阐述，并向用户提供建议或操作，避免用户感到迷失和困惑。 - -## API - -| 参数 | 说明| 类型 | 默认值 | -|-------------|------------------------------------------|-------------|-------| -| backText| 默认的返回按钮文本 | ReactNode| back to home | -| type| 页面类型，若配置，则自带对应类型默认的 `title`，`desc`，`img`，此默认设置可以被 `title`，`desc`，`img` 覆盖 | Enum {'403', '404', '500'} | - | -| title | 标题 | ReactNode| -| -| desc| 补充描述| ReactNode| -| -| img | 背景图片地址 | string| -| -| actions | 建议操作，配置此属性时默认的『返回首页』按钮不生效| ReactNode| -| -| linkElement | 定义链接的元素 | string\|ReactElement | 'a' | -| redirect | 返回按钮的跳转地址 | string | '/' diff --git a/src/components/Exception/typeConfig.js b/src/components/Exception/typeConfig.js deleted file mode 100644 index b6e1ee5a9bd7ac2990b9c319ccceeb9040632798..0000000000000000000000000000000000000000 --- a/src/components/Exception/typeConfig.js +++ /dev/null @@ -1,19 +0,0 @@ -const config = { - 403: { - img: 'https://gw.alipayobjects.com/zos/rmsportal/wZcnGqRDyhPOEYFcZDnb.svg', - title: '403', - desc: '抱歉，你无权访问该页面', - }, - 404: { - img: 'https://gw.alipayobjects.com/zos/rmsportal/KpnpchXsobRgLElEozzI.svg', - title: '404', - desc: '抱歉，你访问的页面不存在', - }, - 500: { - img: 'https://gw.alipayobjects.com/zos/rmsportal/RVRUAYdCGeYNBWoKiIwB.svg', - title: '500', - desc: '抱歉，服务器出错了', - }, -}; - -export default config; diff --git a/src/components/FooterToolbar/demo/basic.md b/src/components/FooterToolbar/demo/basic.md deleted file mode 100644 index 3043dbf74e8b2927c50821a583a49b7c9c75f3c0..0000000000000000000000000000000000000000 --- a/src/components/FooterToolbar/demo/basic.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -order: 0 -title: - zh-CN: 演示 - en-US: demo -iframe: 400 ---- - -## zh-CN - -浮动固定页脚。 - -## en-US - -Fixed to the footer. - -````jsx -import FooterToolbar from 'ant-design-pro/lib/FooterToolbar'; -import { Button } from 'antd'; - -ReactDOM.render( -
    -

    Content Content Content Content

    -

    Content Content Content Content

    -

    Content Content Content Content

    -

    Content Content Content Content

    -

    Content Content Content Content

    -

    Content Content Content Content

    -

    Content Content Content Content

    -

    Content Content Content Content

    -

    Content Content Content Content

    -

    Content Content Content Content

    -

    Content Content Content Content

    -

    Content Content Content Content

    -

    Content Content Content Content

    -

    Content Content Content Content

    -

    Content Content Content Content

    - - - - -
    -, mountNode); -```` \ No newline at end of file diff --git a/src/components/FooterToolbar/index.d.ts b/src/components/FooterToolbar/index.d.ts deleted file mode 100644 index 9c6ac5b4cad95ade8f24a1b02e6de72f4770bfeb..0000000000000000000000000000000000000000 --- a/src/components/FooterToolbar/index.d.ts +++ /dev/null @@ -1,7 +0,0 @@ -import * as React from 'react'; -export interface IFooterToolbarProps { - extra: React.ReactNode; - style?: React.CSSProperties; -} - -export default class FooterToolbar extends React.Component {} diff --git a/src/components/FooterToolbar/index.en-US.md b/src/components/FooterToolbar/index.en-US.md deleted file mode 100644 index 69fd80bda80723c118f8fa1abdbc53372303305c..0000000000000000000000000000000000000000 --- a/src/components/FooterToolbar/index.en-US.md +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: FooterToolbar -cols: 1 -order: 6 ---- - -A toolbar fixed at the bottom. - -## Usage - -It is fixed at the bottom of the content area and does not move along with the scroll bar, which is usually used for data collection and submission for long pages. - -## API - -Property | Description | Type | Default ----------|-------------|------|-------- -children | toolbar content, align to the right | ReactNode | - -extra | extra information, align to the left | ReactNode | - \ No newline at end of file diff --git a/src/components/FooterToolbar/index.js b/src/components/FooterToolbar/index.js deleted file mode 100644 index d43f72fb45315521f9b5cd5a71589228f8d66de8..0000000000000000000000000000000000000000 --- a/src/components/FooterToolbar/index.js +++ /dev/null @@ -1,47 +0,0 @@ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import classNames from 'classnames'; -import styles from './index.less'; - -export default class FooterToolbar extends Component { - static contextTypes = { - isMobile: PropTypes.bool, - }; - - state = { - width: undefined, - }; - - componentDidMount() { - window.addEventListener('resize', this.resizeFooterToolbar); - this.resizeFooterToolbar(); - } - - componentWillUnmount() { - window.removeEventListener('resize', this.resizeFooterToolbar); - } - - resizeFooterToolbar = () => { - const sider = document.querySelector('.ant-layout-sider'); - if (sider == null) { - return; - } - const { isMobile } = this.context; - const width = isMobile ? null : `calc(100% - ${sider.style.width})`; - const { width: stateWidth } = this.state; - if (stateWidth !== width) { - this.setState({ width }); - } - }; - - render() { - const { children, className, extra, ...restProps } = this.props; - const { width } = this.state; - return ( -
    -
    {extra}
    -
    {children}
    -
    - ); - } -} diff --git a/src/components/FooterToolbar/index.less b/src/components/FooterToolbar/index.less deleted file mode 100644 index de6606bd43cc46ce191dada6117d13b37f32603a..0000000000000000000000000000000000000000 --- a/src/components/FooterToolbar/index.less +++ /dev/null @@ -1,33 +0,0 @@ -@import '~antd/lib/style/themes/default.less'; - -.toolbar { - position: fixed; - width: 100%; - bottom: 0; - right: 0; - height: 56px; - line-height: 56px; - box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.03); - background: #fff; - border-top: 1px solid @border-color-split; - padding: 0 24px; - z-index: 9; - - &:after { - content: ''; - display: block; - clear: both; - } - - .left { - float: left; - } - - .right { - float: right; - } - - button + button { - margin-left: 8px; - } -} diff --git a/src/components/FooterToolbar/index.zh-CN.md b/src/components/FooterToolbar/index.zh-CN.md deleted file mode 100644 index 421ac08e70782ec3fb19eb6b96dc8e6d58fd51be..0000000000000000000000000000000000000000 --- a/src/components/FooterToolbar/index.zh-CN.md +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: FooterToolbar -subtitle: 底部工具栏 -cols: 1 -order: 6 ---- - -固定在底部的工具栏。 - -## 何时使用 - -固定在内容区域的底部，不随滚动条移动，常用于长页面的数据搜集和提交工作。 - -## API - -参数 | 说明 | 类型 | 默认值 -----|------|-----|------ -children | 工具栏内容，向右对齐 | ReactNode | - -extra | 额外信息，向左对齐 | ReactNode | - diff --git a/src/components/GlobalFooter/demo/basic.md b/src/components/GlobalFooter/demo/basic.md deleted file mode 100644 index 9a06bade622c4657dd9b39fa97c2e267c119d14c..0000000000000000000000000000000000000000 --- a/src/components/GlobalFooter/demo/basic.md +++ /dev/null @@ -1,37 +0,0 @@ ---- -order: 0 -title: 演示 -iframe: 400 ---- - -基本页脚。 - -````jsx -import GlobalFooter from 'ant-design-pro/lib/GlobalFooter'; -import { Icon } from 'antd'; - -const links = [{ - key: '帮助', - title: '帮助', - href: '', -}, { - key: 'github', - title: , - href: 'https://github.com/ant-design/ant-design-pro', - blankTarget: true, -}, { - key: '条款', - title: '条款', - href: '', - blankTarget: true, -}]; - -const copyright =
    Copyright 2017 蚂蚁金服体验技术部出品
    ; - -ReactDOM.render( -
    -
    - -
    -, mountNode); -```` diff --git a/src/components/GlobalFooter/index.d.ts b/src/components/GlobalFooter/index.d.ts deleted file mode 100644 index 3fa5c423eba263aa4c9d39eb49f395781c5e8f43..0000000000000000000000000000000000000000 --- a/src/components/GlobalFooter/index.d.ts +++ /dev/null @@ -1,13 +0,0 @@ -import * as React from 'react'; -export interface IGlobalFooterProps { - links?: Array<{ - key?: string; - title: React.ReactNode; - href: string; - blankTarget?: boolean; - }>; - copyright?: React.ReactNode; - style?: React.CSSProperties; -} - -export default class GlobalFooter extends React.Component {} diff --git a/src/components/GlobalFooter/index.js b/src/components/GlobalFooter/index.js deleted file mode 100644 index 1c2fb74efec05e82c1a19992cdbe09784d3bb7a8..0000000000000000000000000000000000000000 --- a/src/components/GlobalFooter/index.js +++ /dev/null @@ -1,28 +0,0 @@ -import React from 'react'; -import classNames from 'classnames'; -import styles from './index.less'; - -const GlobalFooter = ({ className, links, copyright }) => { - const clsString = classNames(styles.globalFooter, className); - return ( -
    - {links && ( -
    - {links.map(link => ( - - {link.title} - - ))} -
    - )} - {copyright &&
    {copyright}
    } -
    - ); -}; - -export default GlobalFooter; diff --git a/src/components/GlobalFooter/index.less b/src/components/GlobalFooter/index.less deleted file mode 100644 index 101dcf04511b3bc17ce1da72de1ec8ad52cd865f..0000000000000000000000000000000000000000 --- a/src/components/GlobalFooter/index.less +++ /dev/null @@ -1,29 +0,0 @@ -@import '~antd/lib/style/themes/default.less'; - -.globalFooter { - padding: 0 16px; - margin: 48px 0 24px 0; - text-align: center; - - .links { - margin-bottom: 8px; - - a { - color: @text-color-secondary; - transition: all 0.3s; - - &:not(:last-child) { - margin-right: 40px; - } - - &:hover { - color: @text-color; - } - } - } - - .copyright { - color: @text-color-secondary; - font-size: @font-size-base; - } -} diff --git a/src/components/GlobalFooter/index.md b/src/components/GlobalFooter/index.md deleted file mode 100644 index 55b4be46c9187818887c020f72ec3465d29b1294..0000000000000000000000000000000000000000 --- a/src/components/GlobalFooter/index.md +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: - en-US: GlobalFooter - zh-CN: GlobalFooter -subtitle: 全局页脚 -cols: 1 -order: 7 ---- - -页脚属于全局导航的一部分，作为对顶部导航的补充，通过传递数据控制展示内容。 - -## API - -参数 | 说明 | 类型 | 默认值 -----|------|-----|------ -links | 链接数据 | array<{ title: ReactNode, href: string, blankTarget?: boolean }> | - -copyright | 版权信息 | ReactNode | - diff --git a/src/components/GlobalHeader/RightContent.js b/src/components/GlobalHeader/RightContent.js index dad360ff08299518c7d3fdc7026c2b3b289b883f..b1a3b1604e52fa79c6a419fe1516fe263a80d51d 100644 --- a/src/components/GlobalHeader/RightContent.js +++ b/src/components/GlobalHeader/RightContent.js @@ -3,7 +3,7 @@ import { FormattedMessage, formatMessage } from 'umi/locale'; import { Spin, Tag, Menu, Icon, Avatar, Tooltip } from 'antd'; import moment from 'moment'; import groupBy from 'lodash/groupBy'; -import NoticeIcon from '../NoticeIcon'; +import NoticeIcon from 'ant-design-pro/lib/NoticeIcon'; import HeaderSearch from '../HeaderSearch'; import HeaderDropdown from '../HeaderDropdown'; import SelectLang from '../SelectLang'; diff --git a/src/components/Login/LoginItem.d.ts b/src/components/Login/LoginItem.d.ts deleted file mode 100644 index 30a7a2d6a483e2a8224fd315498f35ce72958f63..0000000000000000000000000000000000000000 --- a/src/components/Login/LoginItem.d.ts +++ /dev/null @@ -1,11 +0,0 @@ -import * as React from 'react'; -export interface ILoginItemProps { - name?: string; - rules?: any[]; - style?: React.CSSProperties; - onGetCaptcha?: () => void; - placeholder?: string; - buttonText?: React.ReactNode; -} - -export class LoginItem extends React.Component {} diff --git a/src/components/Login/LoginItem.js b/src/components/Login/LoginItem.js deleted file mode 100644 index b3cc4d48a978da65faa8d85fef62c7e00040f09a..0000000000000000000000000000000000000000 --- a/src/components/Login/LoginItem.js +++ /dev/null @@ -1,147 +0,0 @@ -import React, { Component } from 'react'; -import { Form, Input, Button, Row, Col } from 'antd'; -import omit from 'omit.js'; -import styles from './index.less'; -import ItemMap from './map'; -import LoginContext from './loginContext'; - -const FormItem = Form.Item; - -class WrapFormItem extends Component { - static defaultProps = { - getCaptchaButtonText: 'captcha', - getCaptchaSecondText: 'second', - }; - - constructor(props) { - super(props); - this.state = { - count: 0, - }; - } - - componentDidMount() { - const { updateActive, name } = this.props; - if (updateActive) { - updateActive(name); - } - } - - componentWillUnmount() { - clearInterval(this.interval); - } - - onGetCaptcha = () => { - const { onGetCaptcha } = this.props; - const result = onGetCaptcha ? onGetCaptcha() : null; - if (result === false) { - return; - } - if (result instanceof Promise) { - result.then(this.runGetCaptchaCountDown); - } else { - this.runGetCaptchaCountDown(); - } - }; - - getFormItemOptions = ({ onChange, defaultValue, customprops, rules }) => { - const options = { - rules: rules || customprops.rules, - }; - if (onChange) { - options.onChange = onChange; - } - if (defaultValue) { - options.initialValue = defaultValue; - } - return options; - }; - - runGetCaptchaCountDown = () => { - const { countDown } = this.props; - let count = countDown || 59; - this.setState({ count }); - this.interval = setInterval(() => { - count -= 1; - this.setState({ count }); - if (count === 0) { - clearInterval(this.interval); - } - }, 1000); - }; - - render() { - const { count } = this.state; - - const { - form: { getFieldDecorator }, - } = this.props; - - // 这么写是为了防止restProps中 带入 onChange, defaultValue, rules props - const { - onChange, - customprops, - defaultValue, - rules, - name, - getCaptchaButtonText, - getCaptchaSecondText, - updateActive, - type, - ...restProps - } = this.props; - - // get getFieldDecorator props - const options = this.getFormItemOptions(this.props); - - const otherProps = restProps || {}; - if (type === 'Captcha') { - const inputProps = omit(otherProps, ['onGetCaptcha', 'countDown']); - return ( - - - - {getFieldDecorator(name, options)()} - - - - - - - ); - } - return ( - - {getFieldDecorator(name, options)()} - - ); - } -} - -const LoginItem = {}; -Object.keys(ItemMap).forEach(key => { - const item = ItemMap[key]; - LoginItem[key] = props => ( - - {context => ( - - )} - - ); -}); - -export default LoginItem; diff --git a/src/components/Login/LoginSubmit.js b/src/components/Login/LoginSubmit.js deleted file mode 100644 index 4aebabf89a98a530292ba87534620e9ded8f88e7..0000000000000000000000000000000000000000 --- a/src/components/Login/LoginSubmit.js +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; -import classNames from 'classnames'; -import { Button, Form } from 'antd'; -import styles from './index.less'; - -const FormItem = Form.Item; - -const LoginSubmit = ({ className, ...rest }) => { - const clsString = classNames(styles.submit, className); - return ( - -
    - ); -} diff --git a/src/components/NoticeIcon/NoticeList.less b/src/components/NoticeIcon/NoticeList.less deleted file mode 100644 index 8435414a23e724846f5b2d8f6679f834cf8cd79e..0000000000000000000000000000000000000000 --- a/src/components/NoticeIcon/NoticeList.less +++ /dev/null @@ -1,94 +0,0 @@ -@import '~antd/lib/style/themes/default.less'; - -.list { - max-height: 400px; - overflow: auto; - &::-webkit-scrollbar { - display: none; - } - .item { - transition: all 0.3s; - overflow: hidden; - cursor: pointer; - padding-left: 24px; - padding-right: 24px; - - .meta { - width: 100%; - } - - .avatar { - background: #fff; - margin-top: 4px; - } - .iconElement { - font-size: 32px; - } - - &.read { - opacity: 0.4; - } - &:last-child { - border-bottom: 0; - } - &:hover { - background: @primary-1; - } - .title { - font-weight: normal; - margin-bottom: 8px; - } - .description { - font-size: 12px; - line-height: @line-height-base; - } - .datetime { - font-size: 12px; - margin-top: 4px; - line-height: @line-height-base; - } - .extra { - float: right; - color: @text-color-secondary; - font-weight: normal; - margin-right: 0; - margin-top: -1.5px; - } - } - .loadMore { - padding: 8px 0; - cursor: pointer; - color: @primary-6; - text-align: center; - &.loadedAll { - cursor: unset; - color: rgba(0, 0, 0, 0.25); - } - } -} - -.notFound { - text-align: center; - padding: 73px 0 88px 0; - color: @text-color-secondary; - img { - display: inline-block; - margin-bottom: 16px; - height: 76px; - } -} - -.clear { - height: 46px; - line-height: 46px; - text-align: center; - color: @text-color; - border-radius: 0 0 @border-radius-base @border-radius-base; - border-top: 1px solid @border-color-split; - transition: all 0.3s; - cursor: pointer; - - &:hover { - color: @heading-color; - } -} diff --git a/src/components/NoticeIcon/demo/basic.md b/src/components/NoticeIcon/demo/basic.md deleted file mode 100644 index dc9afeaa84b67071ac477b3cdda7f1e6b3acda9f..0000000000000000000000000000000000000000 --- a/src/components/NoticeIcon/demo/basic.md +++ /dev/null @@ -1,12 +0,0 @@ ---- -order: 1 -title: 通知图标 ---- - -通常用在导航工具栏上。 - -````jsx -import NoticeIcon from 'ant-design-pro/lib/NoticeIcon'; - -ReactDOM.render(, mountNode); -```` diff --git a/src/components/NoticeIcon/demo/popover.md b/src/components/NoticeIcon/demo/popover.md deleted file mode 100644 index e49e2a2f0bb7d57dc9efaab49942c96ab40b147b..0000000000000000000000000000000000000000 --- a/src/components/NoticeIcon/demo/popover.md +++ /dev/null @@ -1,178 +0,0 @@ ---- -order: 2 -title: 带浮层卡片 ---- - -点击展开通知卡片，展现多种类型的通知，通常放在导航工具栏。 - -````jsx -import NoticeIcon from 'ant-design-pro/lib/NoticeIcon'; -import moment from 'moment'; -import groupBy from 'lodash/groupBy'; -import { Tag } from 'antd'; - -const data = [{ - id: '000000001', - avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png', - title: '你收到了 14 份新周报', - datetime: '2017-08-09', - type: '通知', -}, { - id: '000000002', - avatar: 'https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png', - title: '你推荐的 曲妮妮 已通过第三轮面试', - datetime: '2017-08-08', - type: '通知', -}, { - id: '000000003', - avatar: 'https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png', - title: '这种模板可以区分多种通知类型', - datetime: '2017-08-07', - read: true, - type: '通知', -}, { - id: '000000004', - avatar: 'https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png', - title: '左侧图标用于区分不同的类型', - datetime: '2017-08-07', - type: '通知', -}, { - id: '000000005', - avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png', - title: '内容不要超过两行字，超出时自动截断', - datetime: '2017-08-07', - type: '通知', -}, { - id: '000000006', - avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg', - title: '曲丽丽 评论了你', - description: '描述信息描述信息描述信息', - datetime: '2017-08-07', - type: '消息', - clickClose: true, -}, { - id: '000000007', - avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg', - title: '朱偏右 回复了你', - description: '这种模板用于提醒谁与你发生了互动，左侧放『谁』的头像', - datetime: '2017-08-07', - type: '消息', - clickClose: true, -}, { - id: '000000008', - avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg', - title: '标题', - description: '这种模板用于提醒谁与你发生了互动，左侧放『谁』的头像', - datetime: '2017-08-07', - type: '消息', - clickClose: true, -}, { - id: '000000009', - title: '任务名称', - description: '任务需要在 2017-01-12 20:00 前启动', - extra: '未开始', - status: 'todo', - type: '待办', -}, { - id: '000000010', - title: '第三方紧急代码变更', - description: '冠霖提交于 2017-01-06，需在 2017-01-07 前完成代码变更任务', - extra: '马上到期', - status: 'urgent', - type: '待办', -}, { - id: '000000011', - title: '信息安全考试', - description: '指派竹尔于 2017-01-09 前完成更新并发布', - extra: '已耗时 8 天', - status: 'doing', - type: '待办', -}, { - id: '000000012', - title: 'ABCD 版本发布', - description: '冠霖提交于 2017-01-06，需在 2017-01-07 前完成代码变更任务', - extra: '进行中', - status: 'processing', - type: '待办', -}]; - -function onItemClick(item, tabProps) { - console.log(item, tabProps); -} - -function onClear(tabTitle) { - console.log(tabTitle); -} - -function getNoticeData(notices) { - if (notices.length === 0) { - return {}; - } - const newNotices = notices.map((notice) => { - const newNotice = { ...notice }; - if (newNotice.datetime) { - newNotice.datetime = moment(notice.datetime).fromNow(); - } - // transform id to item key - if (newNotice.id) { - newNotice.key = newNotice.id; - } - if (newNotice.extra && newNotice.status) { - const color = ({ - todo: '', - processing: 'blue', - urgent: 'red', - doing: 'gold', - })[newNotice.status]; - newNotice.extra = {newNotice.extra}; - } - return newNotice; - }); - return groupBy(newNotices, 'type'); -} - -const noticeData = getNoticeData(data); - -ReactDOM.render( -
    - - - - - -
    -, mountNode); -```` - -```css - -``` diff --git a/src/components/NoticeIcon/index.d.ts b/src/components/NoticeIcon/index.d.ts deleted file mode 100644 index f7d6479aa89d8584d37e0f7360b1ddc705a71ca8..0000000000000000000000000000000000000000 --- a/src/components/NoticeIcon/index.d.ts +++ /dev/null @@ -1,27 +0,0 @@ -import * as React from 'react'; -import NoticeIconTab, { INoticeIconData } from './NoticeIconTab'; - -export interface INoticeIconProps { - count?: number; - bell?: React.ReactNode; - className?: string; - loading?: boolean; - onClear?: (tabName: string) => void; - onItemClick?: (item: INoticeIconData, tabProps: INoticeIconProps) => void; - onLoadMore?: (tabProps: INoticeIconProps) => void; - onTabChange?: (tabTile: string) => void; - style?: React.CSSProperties; - onPopupVisibleChange?: (visible: boolean) => void; - popupVisible?: boolean; - locale?: { - emptyText: string; - clear: string; - loadedAll: string; - loadMore: string; - }; - clearClose?: boolean; -} - -export default class NoticeIcon extends React.Component { - public static Tab: typeof NoticeIconTab; -} diff --git a/src/components/NoticeIcon/index.en-US.md b/src/components/NoticeIcon/index.en-US.md deleted file mode 100644 index a5a5f214b1043ea09c200ea70d839128df87484b..0000000000000000000000000000000000000000 --- a/src/components/NoticeIcon/index.en-US.md +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: NoticeIcon -subtitle: Notification Menu -cols: 1 -order: 9 ---- - -用在导航工具栏上，作为整个产品统一的通知中心。 - -## API - -Property | Description | Type | Default -----|------|-----|------ -count | Total number of messages | number | - -bell | Change the bell Icon | ReactNode | `` -loading | Popup card loading status | boolean | `false` -onClear | Click to clear button the callback | function(tabName) | - -onItemClick | Click on the list item's callback | function(item, tabProps) | - -onLoadMore | Callback of click for loading more | function(tabProps, event) | - -onPopupVisibleChange | Popup Card Showing or Hiding Callbacks | function(visible) | - -onTabChange | Switching callbacks for tabs | function(tabTitle) | - -popupVisible | Popup card display state | boolean | - -locale | Default message text | Object | `{ emptyText: 'No notifications', clear: 'Clear', loadedAll: 'Loaded', loadMore: 'Loading more' }` -clearClose | Close menu after clear | boolean | `false` - -### NoticeIcon.Tab - -Property | Description | Type | Default -----|------|-----|------ -count | Unread messages count of this tab | number | list.length -emptyText | Message text when list is empty | ReactNode | - -emptyImage | Image when list is empty | string | - -list | List data, format refer to the following table | Array | `[]` -loadedAll | All messages have been loaded | boolean | `true` -loading | Loading status of this tab | boolean | `false` -name | identifier for message Tab | string | - -scrollToLoad | Scroll to load | boolean | `true` -skeletonCount | Number of skeleton when tab is loading | number | `5` -skeletonProps | Props of skeleton | SkeletonProps | `{}` -showClear | Clear button display status | boolean | `true` -title | header for message Tab | string | - - -### Tab data - -Property | Description | Type | Default -----|------|-----|------ -avatar | avatar img url | string \| ReactNode | - -title | title | ReactNode | - -description | description info | ReactNode | - -datetime | Timestamps | ReactNode | - -extra | Additional information in the upper right corner of the list item | ReactNode | - -clickClose | Close menu after clicking list item | boolean | `false` diff --git a/src/components/NoticeIcon/index.js b/src/components/NoticeIcon/index.js deleted file mode 100644 index 133819bb1e580f88020b5609c6d4afd3aae35883..0000000000000000000000000000000000000000 --- a/src/components/NoticeIcon/index.js +++ /dev/null @@ -1,159 +0,0 @@ -import React, { PureComponent, Fragment } from 'react'; -import ReactDOM from 'react-dom'; -import { Icon, Tabs, Badge, Spin } from 'antd'; -import classNames from 'classnames'; -import HeaderDropdown from '../HeaderDropdown'; -import List from './NoticeList'; -import styles from './index.less'; - -const { TabPane } = Tabs; - -export default class NoticeIcon extends PureComponent { - static Tab = TabPane; - - static defaultProps = { - onItemClick: () => {}, - onPopupVisibleChange: () => {}, - onTabChange: () => {}, - onClear: () => {}, - loading: false, - clearClose: false, - locale: { - emptyText: 'No notifications', - clear: 'Clear', - loadedAll: 'Loaded', - loadMore: 'Loading more', - }, - emptyImage: 'https://gw.alipayobjects.com/zos/rmsportal/wAhyIChODzsoKIOBHcBk.svg', - }; - - state = { - visible: false, - }; - - onItemClick = (item, tabProps) => { - const { onItemClick } = this.props; - const { clickClose } = item; - onItemClick(item, tabProps); - if (clickClose) { - this.popover.click(); - } - }; - - onClear = name => { - const { onClear, clearClose } = this.props; - onClear(name); - if (clearClose) { - this.popover.click(); - } - }; - - onTabChange = tabType => { - const { onTabChange } = this.props; - onTabChange(tabType); - }; - - onLoadMore = (tabProps, event) => { - const { onLoadMore } = this.props; - onLoadMore(tabProps, event); - }; - - getNotificationBox() { - const { visible } = this.state; - const { children, loading, locale } = this.props; - if (!children) { - return null; - } - const panes = React.Children.map(children, child => { - const { - list, - title, - name, - count, - emptyText, - emptyImage, - showClear, - loadedAll, - scrollToLoad, - skeletonCount, - skeletonProps, - loading: tabLoading, - } = child.props; - const len = list && list.length ? list.length : 0; - const msgCount = count || count === 0 ? count : len; - const tabTitle = msgCount > 0 ? `${title} (${msgCount})` : title; - return ( - - this.onClear(name)} - onClick={item => this.onItemClick(item, child.props)} - onLoadMore={event => this.onLoadMore(child.props, event)} - scrollToLoad={scrollToLoad} - showClear={showClear} - skeletonCount={skeletonCount} - skeletonProps={skeletonProps} - title={title} - visible={visible} - /> - - ); - }); - return ( - - - - {panes} - - - - ); - } - - handleVisibleChange = visible => { - const { onPopupVisibleChange } = this.props; - this.setState({ visible }); - onPopupVisibleChange(visible); - }; - - render() { - const { className, count, popupVisible, bell } = this.props; - const { visible } = this.state; - const noticeButtonClass = classNames(className, styles.noticeButton); - const notificationBox = this.getNotificationBox(); - const NoticeBellIcon = bell || ; - const trigger = ( - - - {NoticeBellIcon} - - - ); - if (!notificationBox) { - return trigger; - } - const popoverProps = {}; - if ('popupVisible' in this.props) { - popoverProps.visible = popupVisible; - } - return ( - (this.popover = ReactDOM.findDOMNode(node))} // eslint-disable-line - > - {trigger} - - ); - } -} diff --git a/src/components/NoticeIcon/index.less b/src/components/NoticeIcon/index.less deleted file mode 100644 index 3ca7c5d1e7126893c6044603f06e5c76cabed104..0000000000000000000000000000000000000000 --- a/src/components/NoticeIcon/index.less +++ /dev/null @@ -1,26 +0,0 @@ -@import '~antd/lib/style/themes/default.less'; - -.popover { - width: 336px; -} - -.noticeButton { - cursor: pointer; - display: inline-block; - transition: all 0.3s; -} - -.icon { - padding: 4px; -} - -.tabs { - :global { - .ant-tabs-nav-scroll { - text-align: center; - } - .ant-tabs-bar { - margin-bottom: 0; - } - } -} diff --git a/src/components/NoticeIcon/index.zh-CN.md b/src/components/NoticeIcon/index.zh-CN.md deleted file mode 100644 index 23dab2203ed8c6fb3db427359c0ad3b15533a089..0000000000000000000000000000000000000000 --- a/src/components/NoticeIcon/index.zh-CN.md +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: NoticeIcon -subtitle: 通知菜单 -cols: 1 -order: 9 ---- - -用在导航工具栏上，作为整个产品统一的通知中心。 - -## API - -参数 | 说明 | 类型 | 默认值 -----|------|-----|------ -count | 图标上的消息总数 | number | - -bell | translate this please -> Change the bell Icon | ReactNode | `` -loading | 弹出卡片加载状态 | boolean | `false` -onClear | 点击清空按钮的回调 | function(tabName) | - -onItemClick | 点击列表项的回调 | function(item, tabProps) | - -onLoadMore | 加载更多的回调 | function(tabProps, event) | - -onPopupVisibleChange | 弹出卡片显隐的回调 | function(visible) | - -onTabChange | 切换页签的回调 | function(tabTitle) | - -popupVisible | 控制弹层显隐 | boolean | - -locale | 默认文案 | Object | `{ emptyText: 'No notifications', clear: 'Clear', loadedAll: 'Loaded', loadMore: 'Loading more' }` -clearClose | 点击清空按钮后关闭通知菜单 | boolean | `false` - -### NoticeIcon.Tab - -参数 | 说明 | 类型 | 默认值 -----|------|-----|------ -count | 当前 Tab 未读消息数量 | number | list.length -emptyText | 针对每个 Tab 定制空数据文案 | ReactNode | - -emptyImage | 针对每个 Tab 定制空数据图片 | string | - -list | 列表数据，格式参照下表 | Array | `[]` -loadedAll | 已加载完所有消息 | boolean | `true` -loading | 当前 Tab 的加载状态 | boolean | `false` -name | 消息分类的标识符 | string | - -scrollToLoad | 允许滚动自加载 | boolean | `true` -skeletonCount | 加载时占位骨架的数量 | number | `5` -skeletonProps | 加载时占位骨架的属性 | SkeletonProps | `{}` -showClear | 是否显示清空按钮 | boolean | `true` -title | 消息分类的页签标题 | string | - - -### Tab data - -参数 | 说明 | 类型 | 默认值 -----|------|-----|------ -avatar | 头像图片链接 | string \| ReactNode | - -title | 标题 | ReactNode | - -description | 描述信息 | ReactNode | - -datetime | 时间戳 | ReactNode | - -extra | 额外信息，在列表项右上角 | ReactNode | - -clickClose | 点击列表项关闭通知菜单 | boolean | `false` diff --git a/src/components/NumberInfo/demo/basic.md b/src/components/NumberInfo/demo/basic.md deleted file mode 100644 index b399655ee40e07588b444110458e30b237a88a71..0000000000000000000000000000000000000000 --- a/src/components/NumberInfo/demo/basic.md +++ /dev/null @@ -1,30 +0,0 @@ ---- -order: 0 -title: - zh-CN: 演示 - en-US: Demo ---- - -## zh-CN - -各种数据文案的展现方式。 - -## en-US - -Used for presenting various numerical data. - -````jsx -import NumberInfo from 'ant-design-pro/lib/NumberInfo'; -import numeral from 'numeral'; - -ReactDOM.render( -
    - Visits this week} - total={numeral(12321).format('0,0')} - status="up" - subTotal={17.1} - /> -
    -, mountNode); -```` diff --git a/src/components/NumberInfo/index.d.ts b/src/components/NumberInfo/index.d.ts deleted file mode 100644 index ca93ba5d3df702af793cc15f70c7416d2610d366..0000000000000000000000000000000000000000 --- a/src/components/NumberInfo/index.d.ts +++ /dev/null @@ -1,13 +0,0 @@ -import * as React from 'react'; -export interface INumberInfoProps { - title?: React.ReactNode | string; - subTitle?: React.ReactNode | string; - total?: React.ReactNode | string; - status?: 'up' | 'down'; - theme?: string; - gap?: number; - subTotal?: number; - style?: React.CSSProperties; -} - -export default class NumberInfo extends React.Component {} diff --git a/src/components/NumberInfo/index.en-US.md b/src/components/NumberInfo/index.en-US.md deleted file mode 100644 index b82afbe4f218b36603fa0c37dbb6431696d5f3ee..0000000000000000000000000000000000000000 --- a/src/components/NumberInfo/index.en-US.md +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: NumberInfo -cols: 1 -order: 10 ---- - -Often used in data cards for highlighting the business data. - -## API - -Property | Description | Type | Default -----|------|-----|------ -title | title | ReactNode\|string | - -subTitle | subtitle | ReactNode\|string | - -total | total amount | ReactNode\|string | - -subTotal | total amount of additional information | ReactNode\|string | - -status | increase state | 'up \| down' | - -theme | state style | string | 'light' -gap | set the spacing (pixels) between numbers and descriptions | number | 8 diff --git a/src/components/NumberInfo/index.js b/src/components/NumberInfo/index.js deleted file mode 100644 index 717aee9dd746185cd7c867cb9b443c1b378f03d2..0000000000000000000000000000000000000000 --- a/src/components/NumberInfo/index.js +++ /dev/null @@ -1,41 +0,0 @@ -import React from 'react'; -import { Icon } from 'antd'; -import classNames from 'classnames'; -import styles from './index.less'; - -const NumberInfo = ({ theme, title, subTitle, total, subTotal, status, suffix, gap, ...rest }) => ( -
    - {title && ( -
    - {title} -
    - )} - {subTitle && ( -
    - {subTitle} -
    - )} -
    - - {total} - {suffix && {suffix}} - - {(status || subTotal) && ( - - {subTotal} - {status && } - - )} -
    -
    -); - -export default NumberInfo; diff --git a/src/components/NumberInfo/index.less b/src/components/NumberInfo/index.less deleted file mode 100644 index c8fad650b3b6cdad9969d1a0604c505cae1f5a2e..0000000000000000000000000000000000000000 --- a/src/components/NumberInfo/index.less +++ /dev/null @@ -1,68 +0,0 @@ -@import '~antd/lib/style/themes/default.less'; - -.numberInfo { - .suffix { - color: @text-color; - font-size: 16px; - font-style: normal; - margin-left: 4px; - } - .numberInfoTitle { - color: @text-color; - font-size: @font-size-lg; - margin-bottom: 16px; - transition: all 0.3s; - } - .numberInfoSubTitle { - color: @text-color-secondary; - font-size: @font-size-base; - height: 22px; - line-height: 22px; - overflow: hidden; - text-overflow: ellipsis; - word-break: break-all; - white-space: nowrap; - } - .numberInfoValue { - margin-top: 4px; - font-size: 0; - overflow: hidden; - text-overflow: ellipsis; - word-break: break-all; - white-space: nowrap; - & > span { - color: @heading-color; - display: inline-block; - line-height: 32px; - height: 32px; - font-size: 24px; - margin-right: 32px; - } - .subTotal { - color: @text-color-secondary; - font-size: @font-size-lg; - vertical-align: top; - margin-right: 0; - i { - font-size: 12px; - transform: scale(0.82); - margin-left: 4px; - } - :global { - .anticon-caret-up { - color: @red-6; - } - .anticon-caret-down { - color: @green-6; - } - } - } - } -} -.numberInfolight { - .numberInfoValue { - & > span { - color: @text-color; - } - } -} diff --git a/src/components/NumberInfo/index.zh-CN.md b/src/components/NumberInfo/index.zh-CN.md deleted file mode 100644 index 719853948654a5c57939640cd35b9212adde365b..0000000000000000000000000000000000000000 --- a/src/components/NumberInfo/index.zh-CN.md +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: NumberInfo -subtitle: 数据文本 -cols: 1 -order: 10 ---- - -常用在数据卡片中，用于突出展示某个业务数据。 - -## API - -参数 | 说明 | 类型 | 默认值 -----|------|-----|------ -title | 标题 | ReactNode\|string | - -subTitle | 子标题 | ReactNode\|string | - -total | 总量 | ReactNode\|string | - -subTotal | 子总量 | ReactNode\|string | - -status | 增加状态 | 'up \| down' | - -theme | 状态样式 | string | 'light' -gap | 设置数字和描述之间的间距（像素）| number | 8 diff --git a/src/components/PageHeader/breadcrumb.d.ts b/src/components/PageHeader/breadcrumb.d.ts deleted file mode 100644 index cfed402113aaffc2000b99712c13add232fd0b16..0000000000000000000000000000000000000000 --- a/src/components/PageHeader/breadcrumb.d.ts +++ /dev/null @@ -1,6 +0,0 @@ -import * as React from 'react'; -import { IPageHeaderProps } from './index'; - -export default class BreadcrumbView extends React.Component {} - -export function getBreadcrumb(breadcrumbNameMap: object, url: string): object; diff --git a/src/components/PageHeader/breadcrumb.js b/src/components/PageHeader/breadcrumb.js deleted file mode 100644 index 28c71b068c79201c980bc2c209c04407e62e1b28..0000000000000000000000000000000000000000 --- a/src/components/PageHeader/breadcrumb.js +++ /dev/null @@ -1,176 +0,0 @@ -import React, { PureComponent, createElement } from 'react'; -import pathToRegexp from 'path-to-regexp'; -import { Breadcrumb } from 'antd'; -import styles from './index.less'; -import { urlToList } from '../_utils/pathTools'; - -export const getBreadcrumb = (breadcrumbNameMap, url) => { - let breadcrumb = breadcrumbNameMap[url]; - if (!breadcrumb) { - Object.keys(breadcrumbNameMap).forEach(item => { - if (pathToRegexp(item).test(url)) { - breadcrumb = breadcrumbNameMap[item]; - } - }); - } - return breadcrumb || {}; -}; - -export default class BreadcrumbView extends PureComponent { - state = { - breadcrumb: null, - }; - - componentDidMount() { - this.getBreadcrumbDom(); - } - - componentDidUpdate(preProps) { - const { location } = this.props; - if (!location || !preProps.location) { - return; - } - const prePathname = preProps.location.pathname; - if (prePathname !== location.pathname) { - this.getBreadcrumbDom(); - } - } - - getBreadcrumbDom = () => { - const breadcrumb = this.conversionBreadcrumbList(); - this.setState({ - breadcrumb, - }); - }; - - getBreadcrumbProps = () => { - const { routes, params, location, breadcrumbNameMap } = this.props; - return { - routes, - params, - routerLocation: location, - breadcrumbNameMap, - }; - }; - - // Generated according to props - conversionFromProps = () => { - const { breadcrumbList, breadcrumbSeparator, itemRender, linkElement = 'a' } = this.props; - return ( - - {breadcrumbList.map(item => { - const title = itemRender ? itemRender(item) : item.title; - return ( - - {item.href - ? createElement( - linkElement, - { - [linkElement === 'a' ? 'href' : 'to']: item.href, - }, - title - ) - : title} - - ); - })} - - ); - }; - - conversionFromLocation = (routerLocation, breadcrumbNameMap) => { - const { breadcrumbSeparator, home, itemRender, linkElement = 'a' } = this.props; - // Convert the url to an array - const pathSnippets = urlToList(routerLocation.pathname); - // Loop data mosaic routing - const extraBreadcrumbItems = pathSnippets.map((url, index) => { - const currentBreadcrumb = getBreadcrumb(breadcrumbNameMap, url); - if (currentBreadcrumb.inherited) { - return null; - } - const isLinkable = index !== pathSnippets.length - 1 && currentBreadcrumb.component; - const name = itemRender ? itemRender(currentBreadcrumb) : currentBreadcrumb.name; - return currentBreadcrumb.name && !currentBreadcrumb.hideInBreadcrumb ? ( - - {createElement( - isLinkable ? linkElement : 'span', - { [linkElement === 'a' ? 'href' : 'to']: url }, - name - )} - - ) : null; - }); - // Add home breadcrumbs to your head - extraBreadcrumbItems.unshift( - - {createElement( - linkElement, - { - [linkElement === 'a' ? 'href' : 'to']: '/', - }, - home || 'Home' - )} - - ); - return ( - - {extraBreadcrumbItems} - - ); - }; - - /** - * 将参数转化为面包屑 - * Convert parameters into breadcrumbs - */ - conversionBreadcrumbList = () => { - const { breadcrumbList, breadcrumbSeparator } = this.props; - const { routes, params, routerLocation, breadcrumbNameMap } = this.getBreadcrumbProps(); - if (breadcrumbList && breadcrumbList.length) { - return this.conversionFromProps(); - } - // 如果传入 routes 和 params 属性 - // If pass routes and params attributes - if (routes && params) { - return ( - route.breadcrumbName)} - params={params} - itemRender={this.itemRender} - separator={breadcrumbSeparator} - /> - ); - } - // 根据 location 生成 面包屑 - // Generate breadcrumbs based on location - if (routerLocation && routerLocation.pathname) { - return this.conversionFromLocation(routerLocation, breadcrumbNameMap); - } - return null; - }; - - // 渲染Breadcrumb 子节点 - // Render the Breadcrumb child node - itemRender = (route, params, routes, paths) => { - const { linkElement = 'a' } = this.props; - const last = routes.indexOf(route) === routes.length - 1; - return last || !route.component ? ( - {route.breadcrumbName} - ) : ( - createElement( - linkElement, - { - href: paths.join('/') || '/', - to: paths.join('/') || '/', - }, - route.breadcrumbName - ) - ); - }; - - render() { - const { breadcrumb } = this.state; - return breadcrumb; - } -} diff --git a/src/components/PageHeader/demo/image.md b/src/components/PageHeader/demo/image.md deleted file mode 100644 index 511bac5d0bac833562aff5e23e182522f2c94288..0000000000000000000000000000000000000000 --- a/src/components/PageHeader/demo/image.md +++ /dev/null @@ -1,75 +0,0 @@ ---- -order: 2 -title: With Image ---- - -带图片的页头。 - -````jsx -import PageHeader from 'ant-design-pro/lib/PageHeader'; - -const content = ( -
    -

    段落示意：蚂蚁金服务设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。

    - -
    -); - -const extra = ( -
    - -
    -); - -const breadcrumbList = [{ - title: '一级菜单', - href: '/', -}, { - title: '二级菜单', - href: '/', -}, { - title: '三级菜单', -}]; - -ReactDOM.render( -
    - -
    -, mountNode); -```` - - diff --git a/src/components/PageHeader/demo/simple.md b/src/components/PageHeader/demo/simple.md deleted file mode 100644 index d0ad1f7d2f4e07208900b9e57891952cb7d39942..0000000000000000000000000000000000000000 --- a/src/components/PageHeader/demo/simple.md +++ /dev/null @@ -1,32 +0,0 @@ ---- -order: 3 -title: Simple ---- - -简单的页头。 - -````jsx -import PageHeader from 'ant-design-pro/lib/PageHeader'; - -const breadcrumbList = [{ - title: '一级菜单', - href: '/', -}, { - title: '二级菜单', - href: '/', -}, { - title: '三级菜单', -}]; - -ReactDOM.render( -
    - -
    -, mountNode); -```` - - diff --git a/src/components/PageHeader/demo/standard.md b/src/components/PageHeader/demo/standard.md deleted file mode 100644 index 5c59c933c282b913b4bb56d69ee915feb56fc29f..0000000000000000000000000000000000000000 --- a/src/components/PageHeader/demo/standard.md +++ /dev/null @@ -1,102 +0,0 @@ ---- -order: 1 -title: Standard ---- - -标准页头。 - -````jsx -import PageHeader from 'ant-design-pro/lib/PageHeader'; -import DescriptionList from 'ant-design-pro/lib/DescriptionList'; -import { Button, Menu, Dropdown, Icon, Row, Col } from 'antd'; - -const { Description } = DescriptionList; -const ButtonGroup = Button.Group; - -const description = ( - - 曲丽丽 - XX 服务 - 2017-07-07 - 12421 - -); - -const menu = ( - - 选项一 - 选项二 - 选项三 - -); - -const action = ( -
    - - - - - - - - -
    -); - -const extra = ( - - -
    状态
    -
    待审批
    - - -
    订单金额
    -
    ¥ 568.08
    - -     -); - -const breadcrumbList = [{ - title: '一级菜单', - href: '/', -}, { - title: '二级菜单', - href: '/', -}, { - title: '三级菜单', -}]; - -const tabList = [{ - key: 'detail', - tab: '详情', -}, { - key: 'rule', - tab: '规则', -}]; - -function onTabChange(key) { - console.log(key); -} - -ReactDOM.render( -
    - } - action={action} - content={description} - extraContent={extra} - breadcrumbList={breadcrumbList} - tabList={tabList} - tabActiveKey="detail" - onTabChange={onTabChange} - /> -
    -, mountNode); -```` - - diff --git a/src/components/PageHeader/demo/structure.md b/src/components/PageHeader/demo/structure.md deleted file mode 100644 index 429eed6319f6f483da6ac724242a07f0626e3f0c..0000000000000000000000000000000000000000 --- a/src/components/PageHeader/demo/structure.md +++ /dev/null @@ -1,68 +0,0 @@ ---- -order: 0 -title: Structure ---- - -基本结构，具备响应式布局功能，主要断点为 768px 和 576px，拖动窗口改变大小试试看。 - -````jsx -import PageHeader from 'ant-design-pro/lib/PageHeader'; - -const breadcrumbList = [{ - title: '面包屑', -}]; - -const tabList = [{ - key: '1', - tab: '页签一', -}, { - key: '2', - tab: '页签二', -}, { - key: '3', - tab: '页签三', -}]; - -ReactDOM.render( -
    - Title
    } - logo={
    logo
    } - action={
    action
    } - content={
    content
    } - extraContent={
    extraContent
    } - breadcrumbList={breadcrumbList} - tabList={tabList} - tabActiveKey="1" - /> -
    -, mountNode); -```` - - diff --git a/src/components/PageHeader/index.d.ts b/src/components/PageHeader/index.d.ts deleted file mode 100644 index eacbb2de903681f1eee250d83c71e4642ca41d0d..0000000000000000000000000000000000000000 --- a/src/components/PageHeader/index.d.ts +++ /dev/null @@ -1,23 +0,0 @@ -import * as React from 'react'; -export interface IPageHeaderProps { - title?: React.ReactNode | string; - logo?: React.ReactNode | string; - action?: React.ReactNode | string; - content?: React.ReactNode; - extraContent?: React.ReactNode; - routes?: any[]; - params?: any; - breadcrumbList?: Array<{ title: React.ReactNode; href?: string }>; - tabList?: Array<{ key: string; tab: React.ReactNode }>; - tabActiveKey?: string; - tabDefaultActiveKey?: string; - onTabChange?: (key: string) => void; - tabBarExtraContent?: React.ReactNode; - linkElement?: React.ReactNode; - style?: React.CSSProperties; - home?: React.ReactNode; - wide?: boolean; - hiddenBreadcrumb?: boolean; -} - -export default class PageHeader extends React.Component {} diff --git a/src/components/PageHeader/index.js b/src/components/PageHeader/index.js deleted file mode 100644 index 5d47b34568f3e1ea1ae8d35e5a2897b2e985eeff..0000000000000000000000000000000000000000 --- a/src/components/PageHeader/index.js +++ /dev/null @@ -1,82 +0,0 @@ -import React, { PureComponent } from 'react'; -import { Tabs, Skeleton } from 'antd'; -import classNames from 'classnames'; -import styles from './index.less'; -import BreadcrumbView from './breadcrumb'; - -const { TabPane } = Tabs; -export default class PageHeader extends PureComponent { - onChange = key => { - const { onTabChange } = this.props; - if (onTabChange) { - onTabChange(key); - } - }; - - render() { - const { - title, - logo, - action, - content, - extraContent, - tabList, - className, - tabActiveKey, - tabDefaultActiveKey, - tabBarExtraContent, - loading = false, - wide = false, - hiddenBreadcrumb = false, - } = this.props; - - const clsString = classNames(styles.pageHeader, className); - const activeKeyProps = {}; - if (tabDefaultActiveKey !== undefined) { - activeKeyProps.defaultActiveKey = tabDefaultActiveKey; - } - if (tabActiveKey !== undefined) { - activeKeyProps.activeKey = tabActiveKey; - } - return ( -
    -
    - - {hiddenBreadcrumb ? null : } -
    - {logo &&
    {logo}
    } -
    -
    - {title &&

    {title}

    } - {action &&
    {action}
    } -
    -
    - {content &&
    {content}
    } - {extraContent &&
    {extraContent}
    } -
    -
    -
    - {tabList && tabList.length ? ( - - {tabList.map(item => ( - - ))} - - ) : null} -     -
    -
    - ); - } -} diff --git a/src/components/PageHeader/index.less b/src/components/PageHeader/index.less deleted file mode 100644 index da947d09d5ead3fbfa8a532fcf24d33755f16724..0000000000000000000000000000000000000000 --- a/src/components/PageHeader/index.less +++ /dev/null @@ -1,161 +0,0 @@ -@import '~antd/lib/style/themes/default.less'; - -.pageHeader { - background: @component-background; - padding: 16px 32px 0 32px; - border-bottom: @border-width-base @border-style-base @border-color-split; - .wide { - max-width: 1200px; - margin: auto; - } - .detail { - display: flex; - } - - .row { - display: flex; - width: 100%; - } - - .breadcrumb { - margin-bottom: 16px; - } - - .tabs { - margin: 0 0 0 -8px; - - :global { - // 1px 可以让选中效果显示完成 - .ant-tabs-bar { - border-bottom: none; - margin-bottom: 1px; - } - } - } - - .logo { - flex: 0 1 auto; - margin-right: 16px; - padding-top: 1px; - > img { - width: 28px; - height: 28px; - border-radius: @border-radius-base; - display: block; - } - } - - .title { - font-size: 20px; - font-weight: 500; - color: @heading-color; - } - - .action { - margin-left: 56px; - min-width: 266px; - - :global { - .ant-btn-group:not(:last-child), - .ant-btn:not(:last-child) { - margin-right: 8px; - } - - .ant-btn-group > .ant-btn { - margin-right: 0; - } - } - } - - .title, - .content { - flex: auto; - } - - .action, - .extraContent, - .main { - flex: 0 1 auto; - } - - .main { - width: 100%; - } - - .title, - .action { - margin-bottom: 16px; - } - - .logo, - .content, - .extraContent { - margin-bottom: 16px; - } - - .action, - .extraContent { - text-align: right; - } - - .extraContent { - margin-left: 88px; - min-width: 242px; - } -} - -@media screen and (max-width: @screen-xl) { - .pageHeader { - .extraContent { - margin-left: 44px; - } - } -} - -@media screen and (max-width: @screen-lg) { - .pageHeader { - .extraContent { - margin-left: 20px; - } - } -} - -@media screen and (max-width: @screen-md) { - .pageHeader { - .row { - display: block; - } - - .action, - .extraContent { - margin-left: 0; - text-align: left; - } - } -} - -@media screen and (max-width: @screen-sm) { - .pageHeader { - .detail { - display: block; - } - } -} - -@media screen and (max-width: @screen-xs) { - .pageHeader { - .action { - :global { - .ant-btn-group, - .ant-btn { - display: block; - margin-bottom: 8px; - } - .ant-btn-group > .ant-btn { - display: inline-block; - margin-bottom: 0; - } - } - } - } -} diff --git a/src/components/PageHeader/index.md b/src/components/PageHeader/index.md deleted file mode 100644 index e82c8b89a81e6bfdadb3edf49c405a83daff5eda..0000000000000000000000000000000000000000 --- a/src/components/PageHeader/index.md +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: - en-US: PageHeader - zh-CN: PageHeader -subtitle: 页头 -cols: 1 -order: 11 ---- - -页头用来声明页面的主题，包含了用户所关注的最重要的信息，使用户可以快速理解当前页面是什么以及它的功能。 - -## API - -| 参数 | 说明 | 类型 | 默认值 | -|----------|------------------------------------------|-------------|-------| -| title | title 区域 | ReactNode | - | -| logo | logo区域 | ReactNode | - | -| action | 操作区，位于 title 行的行尾 | ReactNode | - | -| home | 默认的主页说明文字 | ReactNode | - | -| content | 内容区 | ReactNode | - | -| extraContent | 额外内容区，位于content的右侧 | ReactNode | - | -| breadcrumbList | 面包屑数据，配置了此属性时 `routes` `params` `location` `breadcrumbNameMap` 无效 | array<{title: ReactNode, href?: string}> | - | -| hiddenBreadcrumb |隐藏面包屑 | boolean | false | -| routes | 面包屑相关属性，router 的路由栈信息 | object[] | - | -| params | 面包屑相关属性，路由的参数 | object | - | -| location | 面包屑相关属性，当前的路由信息 | object | - | -| breadcrumbNameMap | 面包屑相关属性，路由的地址-名称映射表 | object | - | -| tabList | tab 标题列表 | array<{key: string, tab: ReactNode}> | - | -| tabActiveKey | 当前高亮的 tab 项 | string | - | -| tabDefaultActiveKey | 默认高亮的 tab 项 | string | 第一项 | -| wide | 是否定宽 | boolean | false | -| onTabChange | 切换面板的回调 | (key) => void | - | -| itemRender | 自定义节点方法 | (menuItem) => ReactNode | - | -| linkElement | 定义链接的元素，默认为 `a`，可传入 react-router 的 Link | string\|ReactElement | - | - -> 面包屑的配置方式有三种，一是直接配置 `breadcrumbList`，二是结合 `react-router@2` `react-router@3`，配置 `routes` 及 `params` 实现，类似 [面包屑 Demo](https://ant.design/components/breadcrumb-cn/#components-breadcrumb-demo-router)，三是结合 `react-router@4`，配置 `location` `breadcrumbNameMap`，优先级依次递减，脚手架中使用最后一种。 对于后两种用法，你也可以将 `routes` `params` 及 `location` `breadcrumbNameMap` 放到 context 中，组件会自动获取。 diff --git a/src/components/PageHeader/index.test.js b/src/components/PageHeader/index.test.js deleted file mode 100644 index d22706e9c231db2c8c7e3e2981b5d26f04c86750..0000000000000000000000000000000000000000 --- a/src/components/PageHeader/index.test.js +++ /dev/null @@ -1,43 +0,0 @@ -import { getBreadcrumb } from './breadcrumb'; -import { urlToList } from '../_utils/pathTools'; - -const routerData = { - '/dashboard/analysis': { - name: '分析页', - }, - '/userinfo': { - name: '用户列表', - }, - '/userinfo/:id': { - name: '用户信息', - }, - '/userinfo/:id/addr': { - name: '收货订单', - }, -}; -describe('test getBreadcrumb', () => { - it('Simple url', () => { - expect(getBreadcrumb(routerData, '/dashboard/analysis').name).toEqual('分析页'); - }); - it('Parameters url', () => { - expect(getBreadcrumb(routerData, '/userinfo/2144').name).toEqual('用户信息'); - }); - it('The middle parameter url', () => { - expect(getBreadcrumb(routerData, '/userinfo/2144/addr').name).toEqual('收货订单'); - }); - it('Loop through the parameters', () => { - const urlNameList = urlToList('/userinfo/2144/addr').map( - url => getBreadcrumb(routerData, url).name - ); - expect(urlNameList).toEqual(['用户列表', '用户信息', '收货订单']); - }); - - it('a path', () => { - const urlNameList = urlToList('/userinfo').map(url => getBreadcrumb(routerData, url).name); - expect(urlNameList).toEqual(['用户列表']); - }); - it('Secondary path', () => { - const urlNameList = urlToList('/userinfo/2144').map(url => getBreadcrumb(routerData, url).name); - expect(urlNameList).toEqual(['用户列表', '用户信息']); - }); -}); diff --git a/src/components/PageHeaderWrapper/index.js b/src/components/PageHeaderWrapper/index.js index cd745f66e8db1182493560238cc60762235dad09..09d2d01917c3fc8d135eaf4ade70c609f881e71c 100644 --- a/src/components/PageHeaderWrapper/index.js +++ b/src/components/PageHeaderWrapper/index.js @@ -1,7 +1,7 @@ import React from 'react'; import { FormattedMessage } from 'umi/locale'; import Link from 'umi/link'; -import PageHeader from '@/components/PageHeader'; +import PageHeader from 'ant-design-pro/lib/PageHeader'; import { connect } from 'dva'; import GridContent from './GridContent'; import styles from './index.less'; diff --git a/src/components/Result/demo/classic.md b/src/components/Result/demo/classic.md deleted file mode 100644 index 0cd9d14b32a1ac3327611aee7cf74bf7a636b2bf..0000000000000000000000000000000000000000 --- a/src/components/Result/demo/classic.md +++ /dev/null @@ -1,80 +0,0 @@ ---- -order: 1 -title: Classic ---- - -典型结果页面。 - -````jsx -import Result from 'ant-design-pro/lib/Result'; -import { Button, Row, Col, Icon, Steps } from 'antd'; - -const { Step } = Steps; - -const desc1 = ( -
    -
    - 曲丽丽 - -
    -
    2016-12-12 12:32
    -
    -); - -const desc2 = ( -
    -
    - 周毛毛 - -
    - -
    -); - -const extra = ( -
    -
    - 项目名称 -
    - - - 项目 ID： - 23421 - - - 负责人： - 曲丽丽 - - - 生效时间： - 2016-12-12 ~ 2017-12-12 - - - - - - - - -
    -); - -const actions = ( -
    - - - -
    -); - -ReactDOM.render( - -, mountNode); -```` diff --git a/src/components/Result/demo/error.md b/src/components/Result/demo/error.md deleted file mode 100644 index 5fd25cfdd948e1e1b458d682bdb35384eab90784..0000000000000000000000000000000000000000 --- a/src/components/Result/demo/error.md +++ /dev/null @@ -1,39 +0,0 @@ ---- -order: 2 -title: Failed ---- - -提交失败。 - -````jsx -import Result from 'ant-design-pro/lib/Result'; -import { Button, Icon } from 'antd'; - -const extra = ( -
    -
    - 您提交的内容有如下错误： -
    -
    - 您的账户已被冻结 - 立即解冻 -
    -
    - 您的账户还不具备申请资格 - 立即升级 -
    -
    -); - -const actions = ; - -ReactDOM.render( - -, mountNode); -```` diff --git a/src/components/Result/demo/structure.md b/src/components/Result/demo/structure.md deleted file mode 100644 index 7fcecfd6d0c0f539c32454b14d7a39f63c006606..0000000000000000000000000000000000000000 --- a/src/components/Result/demo/structure.md +++ /dev/null @@ -1,20 +0,0 @@ ---- -order: 0 -title: Structure ---- - -结构包含 `处理结果`，`补充信息` 以及 `操作建议` 三个部分，其中 `处理结果` 由 `提示图标`，`标题` 和 `结果描述` 组成。 - -````jsx -import Result from 'ant-design-pro/lib/Result'; - -ReactDOM.render( - 标题
    } - description={
    结果描述
    } - extra="其他补充信息，自带灰底效果" - actions={
    操作建议，一般放置按钮组
    } - /> -, mountNode); -```` diff --git a/src/components/Result/index.d.ts b/src/components/Result/index.d.ts deleted file mode 100644 index 0c34c254014f49c0d7322acc1dab47cbd2fd52b4..0000000000000000000000000000000000000000 --- a/src/components/Result/index.d.ts +++ /dev/null @@ -1,11 +0,0 @@ -import * as React from 'react'; -export interface IResultProps { - type: 'success' | 'error'; - title: React.ReactNode; - description?: React.ReactNode; - extra?: React.ReactNode; - actions?: React.ReactNode; - style?: React.CSSProperties; -} - -export default class Result extends React.Component {} diff --git a/src/components/Result/index.js b/src/components/Result/index.js deleted file mode 100644 index 89f9f31abec8ca437d3bf741411d3987a0f63714..0000000000000000000000000000000000000000 --- a/src/components/Result/index.js +++ /dev/null @@ -1,29 +0,0 @@ -import React from 'react'; -import classNames from 'classnames'; -import { Icon } from 'antd'; -import styles from './index.less'; - -export default function Result({ - className, - type, - title, - description, - extra, - actions, - ...restProps -}) { - const iconMap = { - error: , - success: , - }; - const clsString = classNames(styles.result, className); - return ( -
    -
    {iconMap[type]}
    -
    {title}
    - {description &&
    {description}
    } - {extra &&
    {extra}
    } - {actions &&
    {actions}
    } -
    - ); -} diff --git a/src/components/Result/index.less b/src/components/Result/index.less deleted file mode 100644 index 5cd2aff589606f5684fd1c8aeff6540ee81b8b6c..0000000000000000000000000000000000000000 --- a/src/components/Result/index.less +++ /dev/null @@ -1,58 +0,0 @@ -@import '~antd/lib/style/themes/default.less'; - -.result { - text-align: center; - width: 72%; - margin: 0 auto; - @media screen and (max-width: @screen-xs) { - width: 100%; - } - - .icon { - font-size: 72px; - line-height: 72px; - margin-bottom: 24px; - - & > .success { - color: @success-color; - } - - & > .error { - color: @error-color; - } - } - - .title { - font-size: 24px; - color: @heading-color; - font-weight: 500; - line-height: 32px; - margin-bottom: 16px; - } - - .description { - font-size: 14px; - line-height: 22px; - color: @text-color-secondary; - margin-bottom: 24px; - } - - .extra { - background: #fafafa; - padding: 24px 40px; - border-radius: @border-radius-sm; - text-align: left; - - @media screen and (max-width: @screen-xs) { - padding: 18px 20px; - } - } - - .actions { - margin-top: 32px; - - button:not(:last-child) { - margin-right: 8px; - } - } -} diff --git a/src/components/Result/index.md b/src/components/Result/index.md deleted file mode 100644 index dc11206cc4dc88bea7f2c9b182849361ba18c0f4..0000000000000000000000000000000000000000 --- a/src/components/Result/index.md +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: - en-US: Result - zh-CN: Result -subtitle: 处理结果 -cols: 1 -order: 12 ---- - -结果页用于对用户进行的一系列任务处理结果进行反馈。 - -## API - -| 参数 | 说明 | 类型 | 默认值 | -|----------|------------------------------------------|-------------|-------| -| type | 类型，不同类型自带对应的图标 | Enum {'success', 'error'} | - | -| title | 标题 | ReactNode | - | -| description | 结果描述 | ReactNode | - | -| extra | 补充信息，有默认的灰色背景 | ReactNode | - | -| actions | 操作建议，推荐放置跳转链接，按钮组等 | ReactNode | - | diff --git a/src/components/TagSelect/TagSelectOption.d.ts b/src/components/TagSelect/TagSelectOption.d.ts deleted file mode 100644 index 366b297a7d3ff01c2a07a5c219b1b04558b8f8ab..0000000000000000000000000000000000000000 --- a/src/components/TagSelect/TagSelectOption.d.ts +++ /dev/null @@ -1,8 +0,0 @@ -import * as React from 'react'; - -export interface ITagSelectOptionProps { - value: string | number; - style?: React.CSSProperties; -} - -export default class TagSelectOption extends React.Component {} diff --git a/src/components/TagSelect/demo/controlled.md b/src/components/TagSelect/demo/controlled.md deleted file mode 100644 index 4e9defa78218a3b8e86675982b9ab54ccd719447..0000000000000000000000000000000000000000 --- a/src/components/TagSelect/demo/controlled.md +++ /dev/null @@ -1,50 +0,0 @@ ---- -order: 3 -title: 受控模式 ---- - -结合 `Tag` 的 `TagSelect` 组件，方便的应用于筛选类目的业务场景中。 - -```jsx -import { Button } from 'antd'; -import TagSelect from 'ant-design-pro/lib/TagSelect'; - -class Demo extends React.Component { - state = { - value: ['cat1'], - }; - handleFormSubmit = value => { - this.setState({ - value, - }); - }; - checkAll = () => { - this.setState({ - value: ['cat1', 'cat2', 'cat3', 'cat4', 'cat5', 'cat6'], - }); - }; - render() { - return ( -
    - -
    - - 类目一 - 类目二 - 类目三 - 类目四 - 类目五 - 类目六 - -
    -
    - ); - } -} - -ReactDOM.render(, mountNode); -``` diff --git a/src/components/TagSelect/demo/expandable.md b/src/components/TagSelect/demo/expandable.md deleted file mode 100644 index c45a30a34ebac6ead244bf84301f9c795bc04086..0000000000000000000000000000000000000000 --- a/src/components/TagSelect/demo/expandable.md +++ /dev/null @@ -1,31 +0,0 @@ ---- -order: 1 -title: 可展开和收起 ---- - -使用 `expandable` 属性，让标签组可以收起，避免过高。 - -````jsx -import TagSelect from 'ant-design-pro/lib/TagSelect'; - -function handleFormSubmit(checkedValue) { - console.log(checkedValue); -} - -ReactDOM.render( - - 类目一 - 类目二 - 类目三 - 类目四 - 类目五 - 类目六 - 类目七 - 类目八 - 类目九 - 类目十 - 类目十一 - 类目十二 - -, mountNode); -```` diff --git a/src/components/TagSelect/demo/simple.md b/src/components/TagSelect/demo/simple.md deleted file mode 100644 index 9e7a13a495d53997b1848d4e04d44f85fd6d1bbf..0000000000000000000000000000000000000000 --- a/src/components/TagSelect/demo/simple.md +++ /dev/null @@ -1,25 +0,0 @@ ---- -order: 0 -title: 基础样例 ---- - -结合 `Tag` 的 `TagSelect` 组件，方便的应用于筛选类目的业务场景中。 - -````jsx -import TagSelect from 'ant-design-pro/lib/TagSelect'; - -function handleFormSubmit(checkedValue) { - console.log(checkedValue); -} - -ReactDOM.render( - - 类目一 - 类目二 - 类目三 - 类目四 - 类目五 - 类目六 - -, mountNode); -```` diff --git a/src/components/TagSelect/index.d.ts b/src/components/TagSelect/index.d.ts deleted file mode 100644 index 736ca52f17bb12a137d0c04b1be260b4c7c6c1e8..0000000000000000000000000000000000000000 --- a/src/components/TagSelect/index.d.ts +++ /dev/null @@ -1,17 +0,0 @@ -import * as React from 'react'; -import TagSelectOption from './TagSelectOption'; - -export interface ITagSelectProps { - onChange?: (value: string[]) => void; - expandable?: boolean; - value?: string[] | number[]; - style?: React.CSSProperties; - hideCheckAll?: boolean; -} - -export default class TagSelect extends React.Component { - public static Option: typeof TagSelectOption; - private children: - | React.ReactElement - | Array>; -} diff --git a/src/components/TagSelect/index.js b/src/components/TagSelect/index.js deleted file mode 100644 index f65764f54ac9f2104e8051a0a8fe73b65b6371cd..0000000000000000000000000000000000000000 --- a/src/components/TagSelect/index.js +++ /dev/null @@ -1,130 +0,0 @@ -import React, { Component } from 'react'; -import classNames from 'classnames'; -import { Tag, Icon } from 'antd'; - -import styles from './index.less'; - -const { CheckableTag } = Tag; - -const TagSelectOption = ({ children, checked, onChange, value }) => ( - onChange(value, state)}> - {children} - -); - -TagSelectOption.isTagSelectOption = true; - -class TagSelect extends Component { - static defaultProps = { - hideCheckAll: false, - }; - - constructor(props) { - super(props); - this.state = { - expand: false, - value: props.value || props.defaultValue || [], - }; - } - - static getDerivedStateFromProps(nextProps) { - if ('value' in nextProps) { - return { value: nextProps.value || [] }; - } - return null; - } - - onChange = value => { - const { onChange } = this.props; - if (!('value' in this.props)) { - this.setState({ value }); - } - if (onChange) { - onChange(value); - } - }; - - onSelectAll = checked => { - let checkedTags = []; - if (checked) { - checkedTags = this.getAllTags(); - } - this.onChange(checkedTags); - }; - - getAllTags() { - let { children } = this.props; - children = React.Children.toArray(children); - const checkedTags = children - .filter(child => this.isTagSelectOption(child)) - .map(child => child.props.value); - return checkedTags || []; - } - - handleTagChange = (value, checked) => { - const { value: StateValue } = this.state; - const checkedTags = [...StateValue]; - - const index = checkedTags.indexOf(value); - if (checked && index === -1) { - checkedTags.push(value); - } else if (!checked && index > -1) { - checkedTags.splice(index, 1); - } - this.onChange(checkedTags); - }; - - handleExpand = () => { - const { expand } = this.state; - this.setState({ - expand: !expand, - }); - }; - - isTagSelectOption = node => - node && - node.type && - (node.type.isTagSelectOption || node.type.displayName === 'TagSelectOption'); - - render() { - const { value, expand } = this.state; - const { children, hideCheckAll, className, style, expandable } = this.props; - - const checkedAll = this.getAllTags().length === value.length; - - const cls = classNames(styles.tagSelect, className, { - [styles.hasExpandTag]: expandable, - [styles.expanded]: expand, - }); - return ( -
    - {hideCheckAll ? null : ( - - 全部 - - )} - {value && - React.Children.map(children, child => { - if (this.isTagSelectOption(child)) { - return React.cloneElement(child, { - key: `tag-select-${child.props.value}`, - value: child.props.value, - checked: value.indexOf(child.props.value) > -1, - onChange: this.handleTagChange, - }); - } - return child; - })} - {expandable && ( - - {expand ? '收起' : '展开'} - - )} -
    - ); - } -} - -TagSelect.Option = TagSelectOption; - -export default TagSelect; diff --git a/src/components/TagSelect/index.less b/src/components/TagSelect/index.less deleted file mode 100644 index 834b39a6dba63919c8444e713548740b8b23d943..0000000000000000000000000000000000000000 --- a/src/components/TagSelect/index.less +++ /dev/null @@ -1,33 +0,0 @@ -@import '~antd/lib/style/themes/default.less'; - -.tagSelect { - user-select: none; - margin-left: -8px; - position: relative; - overflow: hidden; - max-height: 32px; - line-height: 32px; - transition: all 0.3s; - :global { - .ant-tag { - padding: 0 8px; - margin-right: 24px; - font-size: @font-size-base; - } - } - &.expanded { - transition: all 0.3s; - max-height: 200px; - } - .trigger { - position: absolute; - top: 0; - right: 0; - i { - font-size: 12px; - } - } - &.hasExpandTag { - padding-right: 50px; - } -} diff --git a/src/components/TagSelect/index.md b/src/components/TagSelect/index.md deleted file mode 100644 index 25a42b57a114818e4de2d30d58124acfde99eef7..0000000000000000000000000000000000000000 --- a/src/components/TagSelect/index.md +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: - en-US: TagSelect - zh-CN: TagSelect -subtitle: 标签选择器 -cols: 1 -order: 13 ---- - -可进行多选，带折叠收起和展开更多功能，常用于对列表进行筛选。 - -## API - -### TagSelect - -| 参数 | 说明 | 类型 | 默认值 | -|----------|------------------------------------------|-------------|-------| -| value |选中的项 |string[] \| number[] | | -| defaultValue |默认选中的项 |string[] \| number[] | | -| onChange | 标签选择的回调函数 | Function(checkedTags) | | -| expandable | 是否展示 `展开/收起` 按钮 | Boolean | false | -| hideCheckAll | 隐藏 `全部` 按钮 | Boolean | false | - -### TagSelectOption - -| 参数 | 说明 | 类型 | 默认值 | -|----------|------------------------------------------|-------------|-------| -| value | TagSelect的值 | string\| number | - | -| children | tag的内容 | string \| ReactNode | - | diff --git a/src/components/Trend/demo/basic.md b/src/components/Trend/demo/basic.md deleted file mode 100644 index da771dc2f03742b09be1a903c0ce96c26997e759..0000000000000000000000000000000000000000 --- a/src/components/Trend/demo/basic.md +++ /dev/null @@ -1,17 +0,0 @@ ---- -order: 0 -title: 演示 ---- - -在数值背后添加一个小图标来标识涨跌情况。 - -```jsx -import Trend from 'ant-design-pro/lib/Trend'; - -ReactDOM.render( -
    - 12% - 11% -
    -, mountNode); -``` diff --git a/src/components/Trend/demo/reverse.md b/src/components/Trend/demo/reverse.md deleted file mode 100644 index 26f736672cafedc0f0ea6c267eebe4c929fd9df2..0000000000000000000000000000000000000000 --- a/src/components/Trend/demo/reverse.md +++ /dev/null @@ -1,17 +0,0 @@ ---- -order: 0 -title: 颜色反转 ---- - -在数值背后添加一个小图标来标识涨跌情况。 - -```jsx -import Trend from 'ant-design-pro/lib/Trend'; - -ReactDOM.render( -
    - 12% - 11% -
    -, mountNode); -``` diff --git a/src/components/Trend/index.d.ts b/src/components/Trend/index.d.ts deleted file mode 100644 index 7dc02010301cb3194c41d91b6bf01ac1dbdce1b8..0000000000000000000000000000000000000000 --- a/src/components/Trend/index.d.ts +++ /dev/null @@ -1,10 +0,0 @@ -import * as React from 'react'; - -export interface ITrendProps { - colorful?: boolean; - flag: 'up' | 'down'; - style?: React.CSSProperties; - reverseColor?: boolean; -} - -export default class Trend extends React.Component {} diff --git a/src/components/Trend/index.js b/src/components/Trend/index.js deleted file mode 100644 index c476ef62c722f10ca6dcf05c121111f9f91d89db..0000000000000000000000000000000000000000 --- a/src/components/Trend/index.js +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react'; -import { Icon } from 'antd'; -import classNames from 'classnames'; -import styles from './index.less'; - -const Trend = ({ colorful = true, reverseColor = false, flag, children, className, ...rest }) => { - const classString = classNames( - styles.trendItem, - { - [styles.trendItemGrey]: !colorful, - [styles.reverseColor]: reverseColor && colorful, - }, - className - ); - return ( -
    - {children} - {flag && ( - - - - )} -
    - ); -}; - -export default Trend; diff --git a/src/components/Trend/index.less b/src/components/Trend/index.less deleted file mode 100644 index b14b802cb2db73a4e25e9517661498e86866d4d3..0000000000000000000000000000000000000000 --- a/src/components/Trend/index.less +++ /dev/null @@ -1,37 +0,0 @@ -@import '~antd/lib/style/themes/default.less'; - -.trendItem { - display: inline-block; - font-size: @font-size-base; - line-height: 22px; - - .up, - .down { - margin-left: 4px; - position: relative; - top: 1px; - i { - font-size: 12px; - transform: scale(0.83); - } - } - .up { - color: @red-6; - } - .down { - color: @green-6; - top: -1px; - } - - &.trendItemGrey .up, - &.trendItemGrey .down { - color: @text-color; - } - - &.reverseColor .up { - color: @green-6; - } - &.reverseColor .down { - color: @red-6; - } -} diff --git a/src/components/Trend/index.md b/src/components/Trend/index.md deleted file mode 100644 index 3e3ac07a57cf8c20b71ccf8fe21ed27820db2804..0000000000000000000000000000000000000000 --- a/src/components/Trend/index.md +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: - en-US: Trend - zh-CN: Trend -subtitle: 趋势标记 -cols: 1 -order: 14 ---- - -趋势符号，标记上升和下降趋势。通常用绿色代表“好”，红色代表“不好”，股票涨跌场景除外。 - -## API - -```html -50% -``` - -| 参数 | 说明 | 类型 | 默认值 | -|----------|------------------------------------------|-------------|-------| -| colorful | 是否彩色标记 | Boolean | true | -| flag | 上升下降标识：`up|down` | string | - | -| reverseColor | 颜色反转 | Boolean | false | diff --git a/src/global.js b/src/global.js index 62f8ccebefe899371f39e0419cc3f82d514fafc9..102ad38451c11ab72b36768be60d1e2ec06b36c9 100644 --- a/src/global.js +++ b/src/global.js @@ -1,6 +1,7 @@ import React from 'react'; import { notification, Button, message } from 'antd'; import { formatMessage } from 'umi/locale'; +import 'ant-design-pro/dist/ant-design-pro.css'; // Notify user if offline now window.addEventListener('sw.offline', () => { diff --git a/src/layouts/Footer.js b/src/layouts/Footer.js index 693c81721e1c41c93a0de2dee321ea358f9d4455..fcf42ce70454be04c4dbcc9bbaa0e622483babc7 100644 --- a/src/layouts/Footer.js +++ b/src/layouts/Footer.js @@ -1,6 +1,6 @@ import React, { Fragment } from 'react'; import { Layout, Icon } from 'antd'; -import GlobalFooter from '@/components/GlobalFooter'; +import GlobalFooter from 'ant-design-pro/lib/GlobalFooter'; const { Footer } = Layout; const FooterView = () => ( diff --git a/src/layouts/UserLayout.js b/src/layouts/UserLayout.js index 16b70ac77f40e57fc10411f1ff95efc9c8c49205..79235f948be94dd19c92af9f95be7059ec1726ef 100644 --- a/src/layouts/UserLayout.js +++ b/src/layouts/UserLayout.js @@ -2,7 +2,7 @@ import React, { Fragment } from 'react'; import { formatMessage } from 'umi/locale'; import Link from 'umi/link'; import { Icon } from 'antd'; -import GlobalFooter from '@/components/GlobalFooter'; +import GlobalFooter from 'ant-design-pro/lib/GlobalFooter'; import SelectLang from '@/components/SelectLang'; import styles from './UserLayout.less'; import logo from '../assets/logo.svg'; diff --git a/src/pages/404.js b/src/pages/404.js index 34921c02b789dff7b692f12d6b1ceb9a562ce372..627797aeff6b3dca7e722ba15a8c5e75013b6e5c 100644 --- a/src/pages/404.js +++ b/src/pages/404.js @@ -1,7 +1,7 @@ import React from 'react'; import Link from 'umi/link'; import { formatMessage } from 'umi/locale'; -import Exception from '@/components/Exception'; +import Exception from 'ant-design-pro/lib/Exception'; export default () => ( ({ diff --git a/src/pages/Authorized.js b/src/pages/Authorized.js index c29d9610e7b2873c8ca5e0085a865cfc6ab9ffb0..5c1b819925522c4cd43bb745a2bf160d3337f475 100644 --- a/src/pages/Authorized.js +++ b/src/pages/Authorized.js @@ -1,5 +1,5 @@ import React from 'react'; -import RenderAuthorized from '@/components/Authorized'; +import RenderAuthorized from 'ant-design-pro/lib/Authorized'; import { getAuthority } from '@/utils/authority'; import Redirect from 'umi/redirect'; diff --git a/src/pages/Dashboard/IntroduceRow.js b/src/pages/Dashboard/IntroduceRow.js index 7262826facd502554097616192dc6af1a1df4514..8e9020e79bacc6dfbed4c43bb34ff29eea1e57f1 100755 --- a/src/pages/Dashboard/IntroduceRow.js +++ b/src/pages/Dashboard/IntroduceRow.js @@ -2,8 +2,8 @@ import React, { memo } from 'react'; import { Row, Col, Icon, Tooltip } from 'antd'; import { FormattedMessage } from 'umi/locale'; import styles from './Analysis.less'; -import { ChartCard, MiniArea, MiniBar, MiniProgress, Field } from '@/components/Charts'; -import Trend from '@/components/Trend'; +import { ChartCard, MiniArea, MiniBar, MiniProgress, Field } from 'ant-design-pro/lib/Charts'; +import Trend from 'ant-design-pro/lib/Trend'; import numeral from 'numeral'; import Yuan from '@/utils/Yuan'; diff --git a/src/pages/Dashboard/Monitor.js b/src/pages/Dashboard/Monitor.js index 629091747c22a65cc6e62d7d4e87af362c2fc7fb..536c90ccf5d82801212e84b0fa7628cb475ea8ce 100644 --- a/src/pages/Dashboard/Monitor.js +++ b/src/pages/Dashboard/Monitor.js @@ -2,9 +2,9 @@ import React, { PureComponent } from 'react'; import { connect } from 'dva'; import { formatMessage, FormattedMessage } from 'umi/locale'; import { Row, Col, Card, Tooltip } from 'antd'; -import { Pie, WaterWave, Gauge, TagCloud } from '@/components/Charts'; -import NumberInfo from '@/components/NumberInfo'; -import CountDown from '@/components/CountDown'; +import { Pie, WaterWave, Gauge, TagCloud } from 'ant-design-pro/lib/Charts'; +import NumberInfo from 'ant-design-pro/lib/NumberInfo'; +import CountDown from 'ant-design-pro/lib/CountDown'; import ActiveChart from '@/components/ActiveChart'; import numeral from 'numeral'; import GridContent from '@/components/PageHeaderWrapper/GridContent'; diff --git a/src/pages/Dashboard/OfflineData.js b/src/pages/Dashboard/OfflineData.js index f7d06ef07b8f10f93a86320b3b17d081816a462f..e25210069733272de497cfaddcbe1154c777bb74 100755 --- a/src/pages/Dashboard/OfflineData.js +++ b/src/pages/Dashboard/OfflineData.js @@ -1,9 +1,9 @@ import React, { memo } from 'react'; import { Card, Tabs, Row, Col } from 'antd'; import { formatMessage, FormattedMessage } from 'umi/locale'; +import { TimelineChart, Pie } from 'ant-design-pro/lib/Charts'; +import NumberInfo from 'ant-design-pro/lib/NumberInfo'; import styles from './Analysis.less'; -import { TimelineChart, Pie } from '@/components/Charts'; -import NumberInfo from '@/components/NumberInfo'; const CustomTab = ({ data, currentTabKey: currentKey }) => ( diff --git a/src/pages/Dashboard/ProportionSales.js b/src/pages/Dashboard/ProportionSales.js index ff16a7d231751d8311b76078df1f182dbfcce34d..47b011edb6b98a68c8009000dd98eef34d790f9f 100755 --- a/src/pages/Dashboard/ProportionSales.js +++ b/src/pages/Dashboard/ProportionSales.js @@ -2,7 +2,7 @@ import React, { memo } from 'react'; import { Card, Radio } from 'antd'; import { FormattedMessage } from 'umi/locale'; import styles from './Analysis.less'; -import { Pie } from '@/components/Charts'; +import { Pie } from 'ant-design-pro/lib/Charts'; import Yuan from '@/utils/Yuan'; const ProportionSales = memo( diff --git a/src/pages/Dashboard/SalesCard.js b/src/pages/Dashboard/SalesCard.js index 3ab577757067c329a79028cbec08deb3dfc61787..453a4e17cc1999cb6932c69e1b9d1499e96464c1 100755 --- a/src/pages/Dashboard/SalesCard.js +++ b/src/pages/Dashboard/SalesCard.js @@ -2,8 +2,8 @@ import React, { memo } from 'react'; import { Row, Col, Card, Tabs, DatePicker } from 'antd'; import { FormattedMessage, formatMessage } from 'umi/locale'; import numeral from 'numeral'; +import { Bar } from 'ant-design-pro/lib/Charts'; import styles from './Analysis.less'; -import { Bar } from '@/components/Charts'; const { RangePicker } = DatePicker; const { TabPane } = Tabs; diff --git a/src/pages/Dashboard/TopSearch.js b/src/pages/Dashboard/TopSearch.js index 4e75ea7d51ebba6a5d52e336c24d318f8e5d5a41..5ae05a12e26943c8a07799839e4cb3f0aa3f56ad 100755 --- a/src/pages/Dashboard/TopSearch.js +++ b/src/pages/Dashboard/TopSearch.js @@ -1,11 +1,11 @@ import React, { memo } from 'react'; import { Row, Col, Table, Tooltip, Card, Icon } from 'antd'; import { FormattedMessage } from 'umi/locale'; -import Trend from '@/components/Trend'; +import Trend from 'ant-design-pro/lib/Trend'; import numeral from 'numeral'; +import NumberInfo from 'ant-design-pro/lib/NumberInfo'; +import { MiniArea } from 'ant-design-pro/lib/Charts'; import styles from './Analysis.less'; -import NumberInfo from '@/components/NumberInfo'; -import { MiniArea } from '@/components/Charts'; const columns = [ { diff --git a/src/pages/Dashboard/Workplace.js b/src/pages/Dashboard/Workplace.js index e9e44d4583c317615af21dbe623530a5f029f340..3a6e260740d7ae0302a56c98b2c5dc741b580085 100644 --- a/src/pages/Dashboard/Workplace.js +++ b/src/pages/Dashboard/Workplace.js @@ -4,7 +4,7 @@ import { connect } from 'dva'; import Link from 'umi/link'; import { Row, Col, Card, List, Avatar } from 'antd'; -import { Radar } from '@/components/Charts'; +import { Radar } from 'ant-design-pro/lib/Charts'; import EditableLinkGroup from '@/components/EditableLinkGroup'; import PageHeaderWrapper from '@/components/PageHeaderWrapper'; diff --git a/src/pages/Exception/403.js b/src/pages/Exception/403.js index 35e4ca3a12f36701d7120cd2d840c44ebca1b5dc..fd78e0ce1a40e5f144bc1f85e951439ac359c947 100644 --- a/src/pages/Exception/403.js +++ b/src/pages/Exception/403.js @@ -1,7 +1,7 @@ import React from 'react'; import { formatMessage } from 'umi/locale'; import Link from 'umi/link'; -import Exception from '@/components/Exception'; +import Exception from 'ant-design-pro/lib/Exception'; const Exception403 = () => ( ( ( ({ diff --git a/src/pages/List/Applications.js b/src/pages/List/Applications.js index 4f32f8e6637683959f93c6d97d14c849d9d71207..12c8a2e08ce7fd4b2865e9951468c3dca751673d 100644 --- a/src/pages/List/Applications.js +++ b/src/pages/List/Applications.js @@ -2,7 +2,7 @@ import React, { PureComponent } from 'react'; import numeral from 'numeral'; import { connect } from 'dva'; import { Row, Col, Form, Card, Select, Icon, Avatar, List, Tooltip, Dropdown, Menu } from 'antd'; -import TagSelect from '@/components/TagSelect'; +import TagSelect from 'ant-design-pro/lib/TagSelect'; import StandardFormRow from '@/components/StandardFormRow'; import { formatWan } from '@/utils/utils'; diff --git a/src/pages/List/Articles.js b/src/pages/List/Articles.js index 5df46d5fc11f7d7ba0c67b7cdc40a901a24a1d34..67298c8cadee20719a49390c0916120dc241db1f 100644 --- a/src/pages/List/Articles.js +++ b/src/pages/List/Articles.js @@ -2,7 +2,7 @@ import React, { Component, Fragment } from 'react'; import { connect } from 'dva'; import { Form, Card, Select, List, Tag, Icon, Row, Col, Button } from 'antd'; -import TagSelect from '@/components/TagSelect'; +import TagSelect from 'ant-design-pro/lib/TagSelect'; import StandardFormRow from '@/components/StandardFormRow'; import ArticleListContent from '@/components/ArticleListContent'; import styles from './Articles.less'; diff --git a/src/pages/List/BasicList.js b/src/pages/List/BasicList.js index b52a29999b999571e70e19c01c60699395d97acd..68d8efa26c3c729056f21544cddd4be900d2056a 100644 --- a/src/pages/List/BasicList.js +++ b/src/pages/List/BasicList.js @@ -22,7 +22,7 @@ import { } from 'antd'; import PageHeaderWrapper from '@/components/PageHeaderWrapper'; -import Result from '@/components/Result'; +import Result from 'ant-design-pro/lib/Result'; import styles from './BasicList.less'; diff --git a/src/pages/List/CardList.js b/src/pages/List/CardList.js index 03f799a14feb9d70ec47a9ad7fcaf739123d2ae4..611e63006b71bb3bd71378f4ccc04ac0115e60b2 100644 --- a/src/pages/List/CardList.js +++ b/src/pages/List/CardList.js @@ -2,7 +2,7 @@ import React, { PureComponent } from 'react'; import { connect } from 'dva'; import { Card, Button, Icon, List } from 'antd'; -import Ellipsis from '@/components/Ellipsis'; +import Ellipsis from 'ant-design-pro/lib/Ellipsis'; import PageHeaderWrapper from '@/components/PageHeaderWrapper'; import styles from './CardList.less'; diff --git a/src/pages/List/Projects.js b/src/pages/List/Projects.js index 430ca4201803d71f85fb84a98b2ca3fa4bdac9c2..8fbc1ea326a463020e75b4db565c9efd71e79f3a 100644 --- a/src/pages/List/Projects.js +++ b/src/pages/List/Projects.js @@ -3,9 +3,9 @@ import moment from 'moment'; import { connect } from 'dva'; import { Row, Col, Form, Card, Select, List } from 'antd'; -import TagSelect from '@/components/TagSelect'; -import AvatarList from '@/components/AvatarList'; -import Ellipsis from '@/components/Ellipsis'; +import TagSelect from 'ant-design-pro/lib/TagSelect'; +import AvatarList from 'ant-design-pro/lib/AvatarList'; +import Ellipsis from 'ant-design-pro/lib/Ellipsis'; import StandardFormRow from '@/components/StandardFormRow'; import styles from './Projects.less'; diff --git a/src/pages/Profile/AdvancedProfile.js b/src/pages/Profile/AdvancedProfile.js index 0006f993af920de30a7921cbbd2d2a9af74e66c7..881926c987cac0b6e482309457e262bb9e5ecf54 100644 --- a/src/pages/Profile/AdvancedProfile.js +++ b/src/pages/Profile/AdvancedProfile.js @@ -18,7 +18,7 @@ import { Divider, } from 'antd'; import classNames from 'classnames'; -import DescriptionList from '@/components/DescriptionList'; +import DescriptionList from 'ant-design-pro/lib/DescriptionList'; import PageHeaderWrapper from '@/components/PageHeaderWrapper'; import styles from './AdvancedProfile.less'; diff --git a/src/pages/Profile/BasicProfile.js b/src/pages/Profile/BasicProfile.js index bd0b7c99fa54d7dff75efe62f87a06b9c440d626..21f8b2ad65cc571529ac88bc1e69cbb7a2731a51 100644 --- a/src/pages/Profile/BasicProfile.js +++ b/src/pages/Profile/BasicProfile.js @@ -1,7 +1,7 @@ import React, { Component } from 'react'; import { connect } from 'dva'; import { Card, Badge, Table, Divider } from 'antd'; -import DescriptionList from '@/components/DescriptionList'; +import DescriptionList from 'ant-design-pro/lib/DescriptionList'; import PageHeaderWrapper from '@/components/PageHeaderWrapper'; import styles from './BasicProfile.less'; diff --git a/src/pages/Result/Error.js b/src/pages/Result/Error.js index fba2da6d13c08785b0443c8760308b0aeebd2863..1e0452c620104cbb3319fa8273f418d52dad8a51 100644 --- a/src/pages/Result/Error.js +++ b/src/pages/Result/Error.js @@ -1,7 +1,7 @@ import React, { Fragment } from 'react'; import { formatMessage, FormattedMessage } from 'umi/locale'; import { Button, Icon, Card } from 'antd'; -import Result from '@/components/Result'; +import Result from 'ant-design-pro/lib/Result'; import PageHeaderWrapper from '@/components/PageHeaderWrapper'; const extra = ( diff --git a/src/pages/Result/Success.js b/src/pages/Result/Success.js index 74d19dc38c23dc39c73f107c6407cb577bbcb3e7..6180c729648ea6aaa07892b4ae52aa6f91027fb5 100644 --- a/src/pages/Result/Success.js +++ b/src/pages/Result/Success.js @@ -1,7 +1,7 @@ import React, { Fragment } from 'react'; import { formatMessage, FormattedMessage } from 'umi/locale'; import { Button, Row, Col, Icon, Steps, Card } from 'antd'; -import Result from '@/components/Result'; +import Result from 'ant-design-pro/lib/Result'; import PageHeaderWrapper from '@/components/PageHeaderWrapper'; const { Step } = Steps; diff --git a/src/pages/User/Login.js b/src/pages/User/Login.js index 54dd5c40d9282b50ff7003d709bbfbf3758a4d41..84e301f2be5deda5c3fc041c79ea5bd2872e4578 100644 --- a/src/pages/User/Login.js +++ b/src/pages/User/Login.js @@ -3,7 +3,7 @@ import { connect } from 'dva'; import { formatMessage, FormattedMessage } from 'umi/locale'; import Link from 'umi/link'; import { Checkbox, Alert, Icon } from 'antd'; -import Login from '@/components/Login'; +import Login from 'ant-design-pro/lib/Login'; import styles from './Login.less'; const { Tab, UserName, Password, Mobile, Captcha, Submit } = Login; diff --git a/src/pages/User/RegisterResult.js b/src/pages/User/RegisterResult.js index 6e338b277b917cd3d23c3b883f7c710ec306018c..ea2d905b3742b8aafc210ecd7a287c37f8bd4535 100644 --- a/src/pages/User/RegisterResult.js +++ b/src/pages/User/RegisterResult.js @@ -2,7 +2,7 @@ import React from 'react'; import { formatMessage, FormattedMessage } from 'umi/locale'; import { Button } from 'antd'; import Link from 'umi/link'; -import Result from '@/components/Result'; +import Result from 'ant-design-pro/lib/Result'; import styles from './RegisterResult.less'; const actions = ( diff --git a/src/utils/Authorized.js b/src/utils/Authorized.js index 8c420cbaa1441f2fa4f52e4c97b8aa327cddce26..25948912b62f33f71f2ccbec1cea3668cefe827f 100644 --- a/src/utils/Authorized.js +++ b/src/utils/Authorized.js @@ -1,4 +1,4 @@ -import RenderAuthorized from '@/components/Authorized'; +import RenderAuthorized from 'ant-design-pro/lib/Authorized'; import { getAuthority } from './authority'; let Authorized = RenderAuthorized(getAuthority()); // eslint-disable-line diff --git a/src/utils/Yuan.js b/src/utils/Yuan.js index 434a57fb7cfc547015cfff71ac427b85be27817b..415e95574b059a85ba89116446f6f72620e34bdd 100644 --- a/src/utils/Yuan.js +++ b/src/utils/Yuan.js @@ -1,5 +1,5 @@ import React from 'react'; -import { yuan } from '@/components/Charts'; +import { yuan } from 'ant-design-pro/lib/Charts'; /** * 减少使用 dangerouslySetInnerHTML */