10 |
11 |
12 | );
13 | }
14 | }
15 |
16 | export default Detail;
17 |
--------------------------------------------------------------------------------
/src/examples/antd/spin/spin_icon/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Spin, Icon } from 'quant-ui';
3 |
4 |
5 | const antIcon =
8 |
11 | );
12 | }
13 | }
14 | export default Detail;
15 |
--------------------------------------------------------------------------------
/config/jest/fileTransform.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const path = require('path');
4 |
5 | // This is a custom Jest transformer turning file imports into filenames.
6 | // http://facebook.github.io/jest/docs/en/webpack.html
7 |
8 | module.exports = {
9 | process(src, filename) {
10 | return `module.exports = ${JSON.stringify(path.basename(filename))};`;
11 | },
12 | };
13 |
--------------------------------------------------------------------------------
/src/examples/antd/upload/upload_picturesList/style.less:
--------------------------------------------------------------------------------
1 | .upload-list-inline .ant-upload-list-item {
2 | float: left;
3 | width: 200px;
4 | margin-right: 8px;
5 | }
6 | .upload-list-inline .ant-upload-animate-enter {
7 | animation-name: uploadAnimateInlineIn;
8 | }
9 | .upload-list-inline .ant-upload-animate-leave {
10 | animation-name: uploadAnimateInlineOut;
11 | }
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 |
6 | # testing
7 | /coverage
8 |
9 | # production
10 | /build
11 |
12 | # misc
13 | .DS_Store
14 | .env.local
15 | .env.development.local
16 | .env.test.local
17 | .env.production.local
18 |
19 | npm-debug.log*
20 | yarn-debug.log*
21 | yarn-error.log*
22 |
--------------------------------------------------------------------------------
/src/examples/antd/form/formitems_addsub/style.less:
--------------------------------------------------------------------------------
1 | .dynamic-delete-button {
2 | cursor: pointer;
3 | position: relative;
4 | top: 4px;
5 | font-size: 24px;
6 | color: #999;
7 | transition: all .3s;
8 | }
9 | .dynamic-delete-button:hover {
10 | color: #777;
11 | }
12 | .dynamic-delete-button[disabled] {
13 | cursor: not-allowed;
14 | opacity: 0.5;
15 | }
--------------------------------------------------------------------------------
/src/component/utils/setCookie.js:
--------------------------------------------------------------------------------
1 | /**
2 | *
3 | * @desc 设置Cookie
4 | * @param {String} name
5 | * @param {String} value
6 | * @param {Number} days
7 | */
8 | function setCookie(name, value, days) {
9 | var date = new Date();
10 | date.setDate(date.getDate() + days);
11 | document.cookie = name + '=' + value + ';expires=' + date;
12 | }
13 |
14 | module.exports = setCookie
--------------------------------------------------------------------------------
/src/examples/antd/affix/AffixedState/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Button, Affix } from 'quant-ui';
3 | class Detail extends Component {
4 |
5 | render() {
6 | return (
7 | throttle方法函数节流
9 |适用于限制`resize`和`scroll`等函数的调用频率
10 |
8 |
11 | );
12 | }
13 | }
14 | export default Detail;
15 |
--------------------------------------------------------------------------------
/config/jest/cssTransform.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | // This is a custom Jest transformer turning style imports into empty objects.
4 | // http://facebook.github.io/jest/docs/en/webpack.html
5 |
6 | module.exports = {
7 | process() {
8 | return 'module.exports = {};';
9 | },
10 | getCacheKey() {
11 | // The output is always the same.
12 | return 'cssTransform';
13 | },
14 | };
15 |
--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | }
10 | ],
11 | "start_url": "./index.html",
12 | "display": "standalone",
13 | "theme_color": "#000000",
14 | "background_color": "#ffffff"
15 | }
16 |
--------------------------------------------------------------------------------
/src/examples/antd/switch/switch_size/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Switch } from 'quant-ui';
3 |
4 | class Detail extends Component {
5 |
6 | render() {
7 | return (
8 | debounce函数防抖
9 |与throttle不同的是，debounce保证一个函数在多少毫秒内不再被触发，只会执行一次
10 |
9 |
11 |
13 | );
14 | }
15 | }
16 |
17 | export default Detail;
18 |
--------------------------------------------------------------------------------
/src/examples/antd/switch/switch_basic/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Switch } from 'quant-ui';
3 |
4 | function onChange(checked) {
5 | console.log('switch to ' + checked);
6 | }
7 | class Detail extends Component {
8 |
9 | render() {
10 | return (
11 | 11 |
9 |
11 |
13 | );
14 | }
15 | }
16 |
17 | export default Detail;
18 |
--------------------------------------------------------------------------------
/src/examples/UI/Color/Basic1/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { colorPicker} from 'quant-ui';
3 | let { SketchPicker } = colorPicker;
4 | class Detail extends Component {
5 | onChange = (color, event) =>{
6 | console.log(color, event)
7 | }
8 | render() {
9 | return (
10 | 11 |
10 |
12 | );
13 | }
14 | }
15 | export default Detail;
16 |
--------------------------------------------------------------------------------
/src/examples/UI/Color/Basic3/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { colorPicker} from 'quant-ui';
3 | let { SwatchesPicker } = colorPicker;
4 | class Detail extends Component {
5 | onChange = (color, event) =>{
6 | console.log(color, event)
7 | }
8 | render() {
9 | return (
10 |
9 |
11 |
13 | );
14 | }
15 | }
16 |
17 | export default Detail;
18 |
--------------------------------------------------------------------------------
/src/examples/antd/Badge/ToClick/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import {Avatar,Badge } from 'quant-ui';
3 |
4 | class Detail extends Component {
5 | render() {
6 | return (
7 |
8 | 11 |
11 |
14 | );
15 | }
16 | }
17 |
18 | export default Detail;
19 |
--------------------------------------------------------------------------------
/src/component/theme/index.js:
--------------------------------------------------------------------------------
1 | const getCurrentColor = () =>{
2 | return window.localStorage.getItem("quant-theme")||"default"
3 | }
4 | const setCurrentColor = (color) =>{
5 | window.localStorage.setItem("quant-theme",color)
6 | }
7 | const refreshColor = () =>{
8 | window.location.reload()
9 | }
10 | export default {
11 | getCurrentColor, //获取当前主题颜色
12 | refreshColor, //刷新主题颜色
13 | setCurrentColor, //设置当前主题颜色
14 | }
--------------------------------------------------------------------------------
/src/examples/antd/Table/Search/style.less:
--------------------------------------------------------------------------------
1 | .custom-filter-dropdown {
2 | padding: 8px;
3 | border-radius: 6px;
4 | background: #fff;
5 | box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
6 | }
7 |
8 | .custom-filter-dropdown input {
9 | width: 130px;
10 | margin-right: 8px;
11 | }
12 |
13 | .custom-filter-dropdown button {
14 | margin-right: 8px;
15 | }
16 |
17 | .highlight {
18 | color: #f50;
19 | }
--------------------------------------------------------------------------------
/src/examples/antd/pagination/pageskip/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Pagination } from 'quant-ui';
3 |
4 | function onChange(pageNumber) {
5 | console.log('Page: ', pageNumber);
6 | }
7 |
8 | class Detail extends Component {
9 |
10 | render() {
11 | return (
12 |
10 |
11 |
12 | );
13 | }
14 | }
15 | export default Detail;
--------------------------------------------------------------------------------
/src/examples/antd/progress/progress_circle/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Progress } from 'quant-ui';
3 |
4 | class Detail extends Component {
5 | render() {
6 | return (
7 |
8 |
9 |
10 |
11 |
12 | );
13 | }
14 | }
15 | export default Detail;
16 |
--------------------------------------------------------------------------------
/src/examples/antd/progress/progress_style/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Progress } from 'quant-ui';
3 |
4 | class Detail extends Component {
5 |
6 | render() {
7 | return (
8 |
9 |
12 | );
13 | }
14 | }
15 | export default Detail;
16 |
--------------------------------------------------------------------------------
/src/examples/antd/steps/stepsmini/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Steps } from 'quant-ui';
3 |
4 | const Step = Steps.Step;
5 |
6 | class Detail extends Component {
7 |
8 | render() {
9 | return (
10 | Card content
10 |Card content
11 |Card content
12 |
8 |
9 |
10 |
11 |
12 |
13 | );
14 | }
15 | }
16 | export default Detail;
17 |
--------------------------------------------------------------------------------
/src/component/authorized/Authorized.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import CheckPermissions from './CheckPermissions';
3 |
4 | class Authorized extends React.Component {
5 | render() {
6 | const { children, authority, noMatch = null } = this.props;
7 | const childrenRender = typeof children === 'undefined' ? null : children;
8 | return CheckPermissions(authority, childrenRender, noMatch);
9 | }
10 | }
11 |
12 | export default Authorized;
13 |
--------------------------------------------------------------------------------
/src/component/header-search/index.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | export interface IHeaderSearchProps {
3 | placeholder?: string;
4 | dataSource?: string[];
5 | onSearch?: (value: string) => void;
6 | onChange?: (value: string) => void;
7 | onPressEnter?: (value: string) => void;
8 | style?: React.CSSProperties;
9 | className?: string;
10 | }
11 |
12 | export default class HeaderSearch extends React.Component
8 |
9 |
10 |
11 |
12 | );
13 | }
14 | }
15 | export default Detail;
16 |
--------------------------------------------------------------------------------
/src/examples/antd/input/input_size/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Input } from 'quant-ui';
3 | import './style.less';
4 | class Detail extends Component {
5 | render() {
6 | return (
7 |
8 |
9 |
10 |
11 |
12 | );
13 | }
14 | }
15 | export default Detail;
16 |
--------------------------------------------------------------------------------
/src/examples/antd/rate/method.js:
--------------------------------------------------------------------------------
1 |
2 | const method = [
3 | {
4 | title: "methods",
5 | method: [
6 | {
7 | key:'1',
8 | function:'blur()',
9 | description:'移除焦点'
10 |
11 | },
12 | {
13 | key: "2",
14 | function:'focus()',
15 | description:'获取焦点'
16 | },
17 | ]
18 | },
19 |
20 |
21 | ];
22 |
23 | export default {
24 | method
25 | }
--------------------------------------------------------------------------------
/src/examples/antd/rate/rate_others/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Rate, Icon } from 'quant-ui';
3 |
4 | class Detail extends Component {
5 |
6 | render() {
7 | return (
8 |
9 |
11 |
13 |
15 | );
16 | }
17 | }
18 |
19 | export default Detail;
20 |
--------------------------------------------------------------------------------
/src/examples/antd/timePicker/timePicker_basic/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { TimePicker } from 'quant-ui';
3 | import moment from 'moment';
4 |
5 | function onChange(time, timeString) {
6 | console.log(time, timeString);
7 | }
8 |
9 | class Detail extends Component {
10 |
11 | render() {
12 | return (
13 | 11 |
13 |
Card content
10 |Card content
11 |Card content
12 |
9 |
10 |
12 |
鼠标放在状态点上时显示文字 13 |
14 | );
15 | }
16 | }
17 | export default Detail;
--------------------------------------------------------------------------------
/src/examples/antd/datePicker/method.js:
--------------------------------------------------------------------------------
1 |
2 | const method = [
3 | {
4 | title: "methods",
5 | method: [
6 | {
7 | key:'1',
8 | function:'blur()',
9 | description:'移除焦点'
10 |
11 | },
12 | {
13 | key: "2",
14 | function:'focus()',
15 | description:'获取焦点'
16 | },
17 | ]
18 | },
19 |
20 |
21 | ];
22 |
23 | export default {
24 | method
25 | }
--------------------------------------------------------------------------------
/src/examples/antd/inputNumber/method.js:
--------------------------------------------------------------------------------
1 |
2 | const method = [
3 | {
4 | title: "methods",
5 | method: [
6 | {
7 | key:'1',
8 | function:'blur()',
9 | description:'移除焦点'
10 |
11 | },
12 | {
13 | key: "2",
14 | function:'focus()',
15 | description:'获取焦点'
16 | },
17 | ]
18 | },
19 |
20 |
21 | ];
22 |
23 | export default {
24 | method
25 | }
--------------------------------------------------------------------------------
/src/examples/antd/timePicker/method.js:
--------------------------------------------------------------------------------
1 |
2 | const method = [
3 | {
4 | title: "methods",
5 | method: [
6 | {
7 | key:'1',
8 | function:'blur()',
9 | description:'移除焦点'
10 |
11 | },
12 | {
13 | key: "2",
14 | function:'focus()',
15 | description:'获取焦点'
16 | },
17 | ]
18 | },
19 |
20 |
21 | ];
22 |
23 | export default {
24 | method
25 | }
--------------------------------------------------------------------------------
/src/examples/antd/treeSelect/method.js:
--------------------------------------------------------------------------------
1 |
2 | const method = [
3 | {
4 | title: "methods",
5 | method: [
6 | {
7 | key:'1',
8 | function:'blur()',
9 | description:'移除焦点'
10 |
11 | },
12 | {
13 | key: "2",
14 | function:'focus()',
15 | description:'获取焦点'
16 | },
17 | ]
18 | },
19 |
20 |
21 | ];
22 |
23 | export default {
24 | method
25 | }
--------------------------------------------------------------------------------
/src/examples/antd/progress/progress_basic/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Progress } from 'quant-ui';
3 |
4 | class Detail extends Component {
5 | render() {
6 | return (
7 | 鼠标放在状态点上时显示文字 13 |
8 |
9 |
10 |
11 |
12 |
13 |
14 | );
15 | }
16 | }
17 | export default Detail;
18 |
--------------------------------------------------------------------------------
/src/examples/antd/radio/radio_group_name/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Radio } from 'quant-ui';
3 |
4 | const RadioGroup = Radio.Group;
5 | class Detail extends Component {
6 | render() {
7 | return (
8 |
6 |
9 | )
10 |
11 | class Detail extends Component {
12 |
13 | render() {
14 | return (
15 | Content
7 |Content
8 |
6 |
12 | );
13 | }
14 | }
15 |
16 | export default App;
17 |
--------------------------------------------------------------------------------
/src/theme/green.less:
--------------------------------------------------------------------------------
1 | @import "../component/theme/index.less";
2 | @ant-prefix : ant;
3 |
4 | // -------- Colors -----------
5 | @primary-color : #1DA57A;
6 | @info-color : #1DA57A;
7 | @success-color : #1DA57A;
8 | @processing-color : #1DA57A;
9 | @error-color : red;
10 | @highlight-color : #1DA57A;
11 | @warning-color : #1DA57A;
12 | @normal-color : #d9d9d9;
13 |
14 | @import "../examples/HeaderCustom.less";
15 | @import "../App.less";
--------------------------------------------------------------------------------
/src/theme/purple.less:
--------------------------------------------------------------------------------
1 | @import "../component/theme/index.less";
2 | @ant-prefix : ant;
3 |
4 | // -------- Colors -----------
5 | @primary-color : #CC99FF;
6 | @info-color : #CC99FF;
7 | @success-color : #CC99FF;
8 | @processing-color : #CC99FF;
9 | @error-color : #CC99FF;
10 | @highlight-color : #CC99FF;
11 | @warning-color : #CC99FF;
12 | @normal-color : #d9d9d9;
13 |
14 | @import "../examples/HeaderCustom.less";
15 | @import "../App.less";
--------------------------------------------------------------------------------
/src/component/ellipsis/index.less:
--------------------------------------------------------------------------------
1 | .quant-ellipsis {
2 | overflow: hidden;
3 | display: inline-block;
4 | word-break: break-all;
5 | width: 100%;
6 | }
7 |
8 | .quant-ellipsis-lines {
9 | position: relative;
10 | .shadow {
11 | display: block;
12 | position: relative;
13 | color: transparent;
14 | opacity: 0;
15 | z-index: -999;
16 | }
17 | }
18 |
19 | .quant-ellipsis-lineClamp {
20 | position: relative;
21 | overflow: hidden;
22 | text-overflow: ellipsis;
23 | display: -webkit-box;
24 | }
25 |
--------------------------------------------------------------------------------
/src/examples/antd/alert/alert_style/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Alert } from 'quant-ui';
3 | class Detail extends Component {
4 |
5 | render() {
6 | return (
7 | 高德地图
7 | 8 |9 | 高德地图api官网插件比较多，demo非常详细，可自行选择官网组件 10 |
11 |
8 |
10 |
12 |
14 |
16 | );
17 | }
18 | }
19 | export default Detail;
20 |
--------------------------------------------------------------------------------
/src/examples/antd/progress/progress_basic_small/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Progress } from 'quant-ui';
3 |
4 | class Detail extends Component {
5 | render() {
6 | return (
7 | 10 |
12 |
14 |
8 |
9 |
10 |
11 |
12 |
13 | );
14 | }
15 | }
16 | export default Detail;
17 |
--------------------------------------------------------------------------------
/src/component/header-search/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title:
3 | en-US: HeaderSearch
4 | zh-CN: HeaderSearch
5 | subtitle: 顶部搜索框
6 | cols: 1
7 | order: 8
8 | ---
9 |
10 | 通常作为全局搜索的入口，放置在导航工具条右侧。
11 |
12 | ## API
13 |
14 | 参数 | 说明 | 类型 | 默认值
15 | ----|------|-----|------
16 | placeholder | 占位文字 | string | -
17 | dataSource | 当前提示内容列表 | string[] | -
18 | onSearch | 选择某项或按下回车时的回调 | function(value) | -
19 | onChange | 输入搜索字符的回调 | function(value) | -
20 | onPressEnter | 按下回车时的回调 | function(value) | -
21 | defaultOpen | 输入框首次显示是否打开 | boolean | false
22 |
--------------------------------------------------------------------------------
/src/examples/Code.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import {Collapse } from 'quant-ui';
3 | const Panel = Collapse.Panel;
4 | class Code extends Component {
5 | render() {
6 | return (
7 |
11 |
13 |
15 | );
16 | }
17 | }
18 | export default Detail;
--------------------------------------------------------------------------------
/src/examples/antd/icon/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Card, Button, Tabs } from 'quant-ui';
3 | import Api from '../../API.js';
4 | import data from './api.js';
5 |
6 | import Code from '../../Code.js';
7 | const TabPane = Tabs.TabPane;
8 | class App extends Component {
9 | render() {
10 | return (
11 | 13 |
12 |
17 | );
18 | }
19 | }
20 |
21 | export default App;
22 |
--------------------------------------------------------------------------------
/src/examples/antd/modal/modal_manual/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Modal, Button } from 'quant-ui';
3 |
4 |
5 | function success() {
6 | const modal = Modal.success({
7 | title: 'This is a notification message',
8 | content: 'This modal will be destroyed after 1 second',
9 | });
10 | setTimeout(() => modal.destroy(), 1000);
11 | }
12 |
13 | class Detail extends Component {
14 | render() {
15 | return (
16 |
17 | );
18 | }
19 | }
20 | export default Detail;
21 |
--------------------------------------------------------------------------------
/src/examples/antd/pagination/upAnddown/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Pagination } from 'quant-ui';
3 |
4 | function itemRender(current, type, originalElement) {
5 | if (type === 'prev') {
6 | return Previous;
7 | }
8 | if (type === 'next') {
9 | return Next;
10 | }
11 | return originalElement;
12 | }
13 |
14 | class Detail extends Component {
15 |
16 | render() {
17 | return (
18 | Icon图标
13 | 14 | 15 | 16 |
22 |
23 |
24 |
25 | );
26 | ReactDOM.render(
27 |
7 |
8 |
9 |
10 |
11 |
12 | );
13 | }
14 | }
15 | export default Detail;
16 |
--------------------------------------------------------------------------------
/src/examples/antd/input/input_auto_textarea/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Input } from 'quant-ui';
3 | const { TextArea } = Input;
4 | class Detail extends Component {
5 | render() {
6 | return (
7 |
8 |
9 |
10 |
11 |
12 | );
13 | }
14 | }
15 | export default Detail;
16 |
--------------------------------------------------------------------------------
/src/examples/antd/pagination/pagemini/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Pagination } from 'quant-ui';
3 |
4 | function showTotal(total) {
5 | return `Total` +total +`sitems`;
6 | }
7 |
8 | class Detail extends Component {
9 |
10 | render() {
11 | return (
12 |
13 |
17 | );
18 | }
19 | }
20 | export default Detail;
21 |
--------------------------------------------------------------------------------
/src/examples/antd/steps/stepsver/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Steps } from 'quant-ui';
3 |
4 | const Step = Steps.Step;
5 |
6 | class Detail extends Component {
7 |
8 | render() {
9 | return (
10 |
8 |
12 | );
13 | }
14 | }
15 | export default Detail;
--------------------------------------------------------------------------------
/src/examples/antd/rate/rate_writing/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Rate } from 'quant-ui';
3 |
4 | class Detail extends Component {
5 | state = {
6 | value: 3,
7 | }
8 |
9 | handleChange = (value) => {
10 | this.setState({ value });
11 | }
12 |
13 | render() {
14 | const { value } = this.state;
15 | return (
16 |
17 |
10 |
11 |
13 |
14 |
16 |
17 | );
18 | }
19 | }
20 | export default Detail;
--------------------------------------------------------------------------------
/src/examples/antd/switch/switch_word_icon/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Switch, Icon } from 'quant-ui';
3 |
4 | class Detail extends Component {
5 | render() {
6 | return (
7 |
8 |
10 |
12 |
14 | );
15 | }
16 | }
17 |
18 | export default Detail;
19 |
--------------------------------------------------------------------------------
/src/component/entry-table/style.less:
--------------------------------------------------------------------------------
1 | .entry-table-title{
2 | width: 100%;
3 | position: relative;
4 | }
5 | .entry-table-dragSource{
6 | opacity: 0.4;
7 | }
8 | .entry-table-dragSource::after{
9 | content: "";
10 | top: -17px;
11 | position: absolute;
12 | display: inline-block;
13 | right: -17px;
14 | border-right: 2px @primary-color dashed;
15 | height: 54px;
16 | }
17 | .entry-table-notmove{
18 | cursor:not-allowed;
19 | }
20 | .entry-table-move{
21 | cursor: w-resize;
22 | }
23 | .entry-table-sizable{
24 | border-right: 2px @primary-color dashed
25 | }
--------------------------------------------------------------------------------
/src/examples/antd/affix/ScrollPane/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Button, Affix } from 'quant-ui';
3 | import "./style.less";
4 | class Detail extends Component {
5 |
6 | render() {
7 | return (
8 | 10 |
12 |
{ this.container = node; }}>
9 |
17 | );
18 | }
19 | }
20 | export default Detail;
21 |
--------------------------------------------------------------------------------
/src/examples/page/map/MapWithSpot/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import {ReactQMap} from 'quant-ui';
3 |
4 | class MapWithSpot extends Component {
5 | render() {
6 | return (
7 |
10 | this.container}>
11 |
14 |
15 |
16 |
8 |
14 | )
15 | }
16 | }
17 |
18 | export default MapWithSpot;
--------------------------------------------------------------------------------
/src/examples/antd/Card/NoBorder/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Card } from 'quant-ui';
3 |
4 |
5 | class Detail extends Component {
6 | render() {
7 | return (
8 |
9 |
10 |
14 |
15 | );
16 | }
17 | }
18 | export default Detail;
--------------------------------------------------------------------------------
/src/component/language/setLanguageData.js:
--------------------------------------------------------------------------------
1 | import getAllLanguage from './getAllLanguage';
2 | export default function(language){
3 | let allLanguage = getAllLanguage();
4 | let arr_allLanguage = Object.keys(allLanguage);
5 | let arr_language = Object.keys(language);
6 | arr_language.forEach((l)=>{
7 | if(!!arr_allLanguage.includes(l)){
8 | allLanguage[l] = {...allLanguage[l],...language[l]}
9 | }else{
10 | allLanguage[l] = {...{},...language[l]}
11 | }
12 | })
13 | window.localStorage.setItem("quant-language",JSON.stringify(allLanguage));
14 | }
--------------------------------------------------------------------------------
/src/component/notice-icon/index.less:
--------------------------------------------------------------------------------
1 | @import '~antd/lib/style/themes/default.less';
2 |
3 | .quant-notice-icon-popover {
4 | width: 336px;
5 | .ant-popover-inner-content {
6 | padding: 0;
7 | }
8 | }
9 |
10 | .quant-notice-icon-noticeButton {
11 | cursor: pointer;
12 | display: inline-block;
13 | transition: all 0.3s;
14 | }
15 |
16 | .quant-notice-icon-icon {
17 | font-size: 16px;
18 | padding: 4px;
19 | }
20 |
21 | .quant-notice-icon-tabs {
22 | .ant-tabs-nav-scroll {
23 | text-align: center;
24 | }
25 | .ant-tabs-bar {
26 | margin-bottom: 4px;
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/src/component/language/index.js:
--------------------------------------------------------------------------------
1 | import getAllLanguage from './getAllLanguage';
2 | import getCurrentLanguage from './getCurrentLanguage';
3 | import getLanguageData from './getLanguageData';
4 | import refreshLanguage from './refreshLanguage';
5 | import setCurrentLanguage from './setCurrentLanguage';
6 | import setLanguageData from './setLanguageData';
7 | export default {
8 | getAllLanguage, //获取所有语言数据
9 | getCurrentLanguage, //获取当前语言类型
10 | getLanguageData, //获取翻译当前语言
11 | refreshLanguage, //刷新语言
12 | setCurrentLanguage, //设置当前语言类型
13 | setLanguageData, //设置语言数据
14 | }
--------------------------------------------------------------------------------
/src/component/notice-icon/NoticeIconTab.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | export interface INoticeIconData {
3 | avatar?: string;
4 | title?: React.ReactNode;
5 | description?: React.ReactNode;
6 | datetime?: React.ReactNode;
7 | extra?: React.ReactNode;
8 | style?: React.CSSProperties;
9 | }
10 |
11 | export interface INoticeIconTabProps {
12 | list?: INoticeIconData[];
13 | title?: string;
14 | emptyText?: React.ReactNode;
15 | emptyImage?: string;
16 | style?: React.CSSProperties;
17 | }
18 |
19 | export default class NoticeIconTab extends React.ComponentCard content
11 |Card content
12 |Card content
13 |
8 |
9 |
15 | );
16 | }
17 | }
18 | export default Detail;
--------------------------------------------------------------------------------
/src/examples/antd/timePicker/timerPicker_size/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { TimePicker } from 'quant-ui';
3 | import moment from 'moment';
4 |
5 | class Detail extends Component {
6 |
7 | render() {
8 | return (
9 |
10 |
17 | );
18 | }
19 | }
20 |
21 | export default Detail;
22 |
--------------------------------------------------------------------------------
/src/examples/antd/alert/alert_banner/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Alert } from 'quant-ui';
3 | class Detail extends Component {
4 |
5 | render() {
6 | return (
7 |
8 |
10 |
12 |
14 |
16 | );
17 | }
18 | }
19 | export default Detail;
20 |
--------------------------------------------------------------------------------
/src/examples/antd/autoComplete/autoCL/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { AutoComplete, Input } from 'quant-ui';
3 |
4 | const dataSource = ['Burns Bay Road', 'Downing Street', 'Wall Street'];
5 |
6 | class Detail extends Component {
7 |
8 | render() {
9 |
10 | return (
11 | 10 |
12 |
14 |
18 |
20 | 21 |
22 | );
23 | }
24 | }
25 |
26 | export default Detail;
27 |
--------------------------------------------------------------------------------
/src/examples/page/map/BasicMap/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import {ReactQMap} from 'quant-ui';
3 |
4 | class BasicMap extends Component {
5 | render() {
6 | return (
7 | 20 | 21 |
8 |
14 | )
15 | }
16 | }
17 |
18 | export default BasicMap;
--------------------------------------------------------------------------------
/src/examples/antd/Carousel/Vertical/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Carousel } from 'quant-ui';
3 | import "./style.less";
4 |
5 | class Detail extends Component {
6 |
7 | render() {
8 | return (
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | );
18 | }
19 | }
20 | export default Detail;
--------------------------------------------------------------------------------
/src/examples/UI/Ellipsis/Basic2/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Ellipsis } from 'quant-ui';
3 |
4 |
5 | const article = 1
2
3
4
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.
; 6 | class Detail extends Component { 7 | 8 | render() { 9 | return ( 10 |
11 | {article}
12 |
13 | );
14 | }
15 | }
16 | export default Detail;
17 |
--------------------------------------------------------------------------------
/src/examples/antd/Carousel/FadeIn/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Carousel } from 'quant-ui';
3 | import "./style.less";
4 |
5 | class Detail extends Component {
6 |
7 | render() {
8 | return (
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | );
18 | }
19 | }
20 | export default Detail;
--------------------------------------------------------------------------------
/src/examples/antd/notification/notification_basic/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Button, notification } from 'quant-ui';
3 |
4 | const openNotification = () => {
5 | notification.open({
6 | message: 'Notification Title',
7 | description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
8 | });
9 | };
10 |
11 | class Detail extends Component {
12 | render() {
13 | return (
14 |
15 | );
16 | }
17 | }
18 | export default Detail;
19 |
--------------------------------------------------------------------------------
/src/examples/antd/steps/stepsicon/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Steps, Icon } from 'quant-ui';
3 |
4 | const Step = Steps.Step;
5 |
6 | class Detail extends Component {
7 |
8 | render() {
9 | return (
10 | 1
2
3
4
15 |
18 | );
19 | }
20 | }
21 |
22 | export default Detail;
23 |
--------------------------------------------------------------------------------
/src/examples/antd/timePicker/timerPicker_format/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { TimePicker } from 'quant-ui';
3 | import moment from 'moment';
4 |
5 | function onChange(time, timeString) {
6 | console.log(time, timeString);
7 | }
8 | class Detail extends Component {
9 |
10 | render() {
11 | return (
12 |
13 |
19 | );
20 | }
21 | }
22 |
23 | export default Detail;
24 |
--------------------------------------------------------------------------------
/src/examples/antd/notification/notification_duration/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Button, notification } from 'quant-ui';
3 |
4 | const openNotification = () => {
5 | const args = {
6 | message: 'Notification Title',
7 | description: 'I will never close automatically. I will be close automatically. I will never close automatically.',
8 | duration: 0,
9 | };
10 | notification.open(args);
11 | };
12 | class Detail extends Component {
13 | render() {
14 | return (
15 |
16 | );
17 | }
18 | }
19 | export default Detail;
20 |
--------------------------------------------------------------------------------
/src/examples/util/Utiles/Basic2/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import {utils} from 'quant-ui';
3 | const {currency} = utils
4 | class Detail extends Component {
5 | render() {
6 | return (
7 |
8 |
18 | );
19 | }
20 | }
21 | export default Detail;
22 |
--------------------------------------------------------------------------------
/src/examples/antd/pagination/sumpagination/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Pagination } from 'quant-ui';
3 |
4 | class Detail extends Component {
5 |
6 | render() {
7 | return (
8 | currency方法
9 |currency.add( value )
10 |currency.subtract( value )
11 |currency.multiply( number )
12 |currency.divide( number )
13 |currency.distribute( number )
14 |currency.format([ boolean ])
15 |currency.dollars
16 |currency.cents
17 |
9 | 'Total ' +total+ ' items'}
12 | pageSize={20}
13 | defaultCurrent={1}
14 | />
15 |
16 | range[0]+'-'+range[1]+' of '+ total +'items'}
19 | pageSize={20}
20 | defaultCurrent={1}
21 | />
22 |
23 | );
24 | }
25 | }
26 | export default Detail;
27 |
--------------------------------------------------------------------------------
/src/examples/antd/Carousel/method.js:
--------------------------------------------------------------------------------
1 |
2 | const method = [
3 | {
4 | title: "methods",
5 | method: [
6 | {
7 | key:'1',
8 | function:'goTo(slideNumber)',
9 | description:'切换到指定面板'
10 |
11 | },
12 | {
13 | key: "2",
14 | function:'next()',
15 | description:'切换到下一面板'
16 | },
17 | {
18 | key: "3",
19 | function:'prev()',
20 | description:'切换到上一面板'
21 | },
22 |
23 | ]
24 | },
25 |
26 |
27 | ];
28 |
29 | export default {
30 | method
31 | }
--------------------------------------------------------------------------------
/src/component/color-picker/index.js:
--------------------------------------------------------------------------------
1 | import {
2 | SketchPicker,
3 | AlphaPicker,
4 | BlockPicker,
5 | ChromePicker,
6 | CirclePicker,
7 | CompactPicker,
8 | GithubPicker,
9 | HuePicker,
10 | MaterialPicker,
11 | PhotoshopPicker,
12 | SliderPicker,
13 | SwatchesPicker,
14 | TwitterPicker,
15 | } from 'react-color';
16 | export default {
17 | SketchPicker,
18 | AlphaPicker,
19 | BlockPicker,
20 | ChromePicker,
21 | CirclePicker,
22 | CompactPicker,
23 | GithubPicker,
24 | HuePicker,
25 | MaterialPicker,
26 | PhotoshopPicker,
27 | SliderPicker,
28 | SwatchesPicker,
29 | TwitterPicker,
30 | };
--------------------------------------------------------------------------------
/src/examples/antd/alert/alert_Smooth/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Alert } from 'quant-ui';
3 |
4 | class Detail extends Component {
5 | state = {
6 | visible: true,
7 | }
8 |
9 | handleClose = () => {
10 | this.setState({ visible: false });
11 | }
12 |
13 | render() {
14 | return (
15 | 16 |
16 | {
17 | this.state.visible ? (
18 |
28 | );
29 | }
30 | }
31 |
32 | export default Detail;
33 |
--------------------------------------------------------------------------------
/src/examples/UI/Ellipsis/Basic1/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Ellipsis } from 'quant-ui';
3 |
4 |
5 | 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.';
6 | class Detail extends Component {
7 |
8 | render() {
9 | return (
10 | placeholder text here
27 |
11 | {article}
12 | {article}
14 |
15 | );
16 | }
17 | }
18 | export default Detail;
19 |
--------------------------------------------------------------------------------
/src/examples/antd/Avatar/Type/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Avatar } from 'quant-ui';
3 | class Detail extends Component {
4 | render() {
5 | return (
6 | Show Tooltip
13 |
7 | U
9 | USER
10 | U
12 |
14 | );
15 | }
16 | }
17 | export default Detail;
--------------------------------------------------------------------------------
/src/examples/antd/Badge/RedDot/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Icon, Badge } from 'quant-ui';
3 |
4 | class Detail extends Component {
5 | render() {
6 | return (
7 |
18 | );
19 | }
20 | }
21 | export default Detail;
--------------------------------------------------------------------------------
/src/examples/antd/Card/FlexibleContent/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Card } from 'quant-ui';
3 |
4 | const { Meta } = Card;
5 |
6 | class Detail extends Component {
7 | render() {
8 | return (
9 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | );
20 | }
21 | }
22 | export default Detail;
--------------------------------------------------------------------------------
/src/examples/antd/slider/slider_basic/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Slider, Switch } from 'quant-ui';
3 |
4 | class Detail extends Component {
5 | state = {
6 | disabled: false,
7 | };
8 |
9 | handleDisabledChange = (disabled) => {
10 | this.setState({ disabled });
11 | }
12 |
13 | render() {
14 | const { disabled } = this.state;
15 | return (
16 | 1
2
3
4
17 |
21 | );
22 | }
23 | }
24 |
25 | export default Detail;
26 |
--------------------------------------------------------------------------------
/src/examples/antd/inputNumber/inputNumber_disabled/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { InputNumber, Button } from 'quant-ui';
3 |
4 | class Detail extends Component {
5 | state = {
6 | disabled: true,
7 | };
8 |
9 | toggle = () => {
10 | this.setState({
11 | disabled: !this.state.disabled,
12 | });
13 | }
14 |
15 | render() {
16 | return (
17 |
18 |
23 | );
24 | }
25 | }
26 |
27 |
28 | export default Detail;
29 |
--------------------------------------------------------------------------------
/src/examples/antd/inputNumber/inputNumber_size/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { InputNumber } from 'quant-ui';
3 | import './style.less';
4 |
5 | function onChange(value) {
6 | console.log('changed', value);
7 | }
8 |
9 | class Detail extends Component {
10 | render() {
11 |
12 | return (
13 |
20 |
21 |
22 |
14 |
18 | );
19 | }
20 | }
21 |
22 | export default Detail;
23 |
--------------------------------------------------------------------------------
/src/examples/antd/notification/notification_icon_auto/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Button, notification,Icon } from 'quant-ui';
3 |
4 | const openNotification = () => {
5 | notification.open({
6 | message: 'Notification Title',
7 | description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
8 | icon:
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | );
20 | }
21 | }
22 | export default Detail;
--------------------------------------------------------------------------------
/src/examples/antd/radio/radio_group/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Radio } from 'quant-ui';
3 |
4 | const RadioGroup = Radio.Group;
5 | class Detail extends Component {
6 | state = {
7 | value: 1,
8 | }
9 |
10 | onChange = (e) => {
11 | console.log('radio checked', e.target.value);
12 | this.setState({
13 | value: e.target.value,
14 | });
15 | }
16 |
17 | render() {
18 | return (
19 | 1
2
3
4
8 |
9 |
10 |
11 |
12 |
13 | 14 | 15 | 16 | 17 |
18 | );
19 | }
20 | }
21 | export default Detail;
22 |
--------------------------------------------------------------------------------
/src/examples/antd/notification/notification_updata/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Button, notification } from 'quant-ui';
3 |
4 | const key = 'updatable';
5 |
6 | const openNotification = () => {
7 | notification.open({
8 | key,
9 | message: 'Notification Title',
10 | description: 'description.',
11 | });
12 | setTimeout(() => {
13 | notification.open({
14 | key,
15 | message: 'New Title',
16 | description: 'New description.',
17 | });
18 | }, 1000);
19 | };
20 | class Detail extends Component {
21 | render() {
22 | return (
23 |
24 | );
25 | }
26 | }
27 | export default Detail;
28 |
--------------------------------------------------------------------------------
/src/examples/antd/select/select_auto/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Select } from 'quant-ui';
3 |
4 | const Option = Select.Option;
5 |
6 | const children = [];
7 | for (let i = 10; i < 36; i++) {
8 | children.push();
9 | }
10 |
11 | function handleChange(value) {
12 | console.log(`selected ${value}`);
13 | }
14 |
15 | class Detail extends Component {
16 |
17 | render() {
18 | return (
19 |
27 | );
28 | }
29 | }
30 |
31 | export default Detail;
32 |
--------------------------------------------------------------------------------
/src/examples/antd/select/select_tags/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Select } from 'quant-ui';
3 |
4 | const Option = Select.Option;
5 |
6 | const children = [];
7 | for (let i = 10; i < 36; i++) {
8 | children.push();
9 | }
10 |
11 | function handleChange(value) {
12 | console.log('selected' +value);
13 | }
14 |
15 | class Detail extends Component {
16 |
17 | render() {
18 | return (
19 |
27 | );
28 | }
29 | }
30 |
31 | export default Detail;
32 |
--------------------------------------------------------------------------------
/src/component/utils/index.js:
--------------------------------------------------------------------------------
1 | import compare from "./compare"
2 | import throttle from "./compare"
3 | import debounce from "./debounce"
4 | import currency from "./currency"
5 | import parseQueryString from "./parseQueryString"
6 | import stringfyQueryString from "./stringfyQueryString"
7 | import getExplore from "./getExplore"
8 | import getOS from "./getOS"
9 | import getCookie from "./getCookie"
10 | import removeCookie from "./removeCookie"
11 | import setCookie from "./setCookie"
12 | export default {
13 | compare,
14 | throttle,
15 | debounce,
16 | currency,
17 | parseQueryString,
18 | stringfyQueryString,
19 | getExplore,
20 | getOS,
21 | getCookie,
22 | removeCookie,
23 | setCookie
24 | };
--------------------------------------------------------------------------------
/src/examples/animation/BasicAnimations/api.js:
--------------------------------------------------------------------------------
1 |
2 | const api = [
3 | {
4 | title: "API",
5 | api: [
6 | {
7 | key: "1",
8 | parameter: "format", //字段名
9 | instructions: '时间格式化显示', //描述
10 | type: ' Function(time)', //类型
11 | default: "-", //默认值
12 | must: '',
13 | },{
14 | key: "2",
15 | parameter: "target", //字段名
16 | instructions: '目标时间', //描述
17 | type: 'Date', //类型
18 | default: "", //默认值
19 | must: '',
20 | },{
21 | key: "3",
22 | parameter: "onEnd", //字段名
23 | instructions: ' 倒计时结束回调', //描述
24 | type: 'funtion', //类型
25 | default: "", //默认值
26 | must: '',
27 | }
28 | ]
29 | }
30 | ];
31 |
32 | export default {
33 | api
34 | }
--------------------------------------------------------------------------------
/src/examples/antd/Card/LoadingCard/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Card, Button } from 'quant-ui';
3 |
4 |
5 | class Detail extends Component {
6 | state = {
7 | loading: true,
8 | }
9 | handleClick = () => {
10 | this.setState({ loading: !this.state.loading });
11 | }
12 | render() {
13 | return (
14 | 13 | 14 | 15 | 16 | 17 |
15 |
16 | Whatever content
17 |
18 |
19 |
20 | );
21 | }
22 | }
23 | export default Detail;
--------------------------------------------------------------------------------
/src/examples/UI/NProgress/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import {Button, Nprogress } from 'quant-ui';
3 | class NProgressCode extends Component {
4 | nprogressStart = () => {
5 | Nprogress.start();
6 | };
7 | nprogressDone = () => {
8 | Nprogress.done();
9 | };
10 | render() {
11 | return (
12 |
13 |
22 | );
23 | }
24 | }
25 |
26 | export default NProgressCode;
27 |
--------------------------------------------------------------------------------
/src/examples/antd/message/message_others/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { message, Button } from 'quant-ui';
3 |
4 | const success = () => {
5 | message.success('This is a message of success');
6 | };
7 |
8 | const error = () => {
9 | message.error('This is a message of error');
10 | };
11 |
12 | const warning = () => {
13 | message.warning('This is message of warning');
14 | };
15 | class Detail extends Component {
16 |
17 | render() {
18 | return (
19 | 14 | 15 | Nprogress.start() — 显示进度条 16 |
17 |18 | 19 | Nprogress.done() — 进度条完成 20 |
21 |
20 |
21 |
22 |
23 |
24 |
25 |
26 | );
27 | }
28 | }
29 | export default Detail;
30 |
--------------------------------------------------------------------------------
/src/examples/antd/mention/mention_basic/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Mention } from 'quant-ui';
3 |
4 | const { toString, toContentState } = Mention;
5 |
6 | function onChange(contentState) {
7 | console.log(toString(contentState));
8 | }
9 |
10 | function onSelect(suggestion) {
11 | console.log('onSelect', suggestion);
12 | }
13 | class Detail extends Component {
14 | render() {
15 |
16 | return (
17 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | );
19 | }
20 | }
21 | export default Detail;
22 |
--------------------------------------------------------------------------------
/src/examples/antd/select/select_multi/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Select } from 'quant-ui';
3 |
4 | const Option = Select.Option;
5 |
6 | const children = [];
7 | for (let i = 10; i < 36; i++) {
8 | children.push();
9 | }
10 |
11 | function handleChange(value) {
12 | console.log('selected'+value);
13 | }
14 | class Detail extends Component {
15 |
16 | render() {
17 | return (
18 |
27 | );
28 | }
29 | }
30 |
31 | export default Detail;
32 |
33 |
--------------------------------------------------------------------------------
/src/component/exception/index.zh-CN.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Exception
3 | subtitle: 异常
4 | cols: 1
5 | order: 5
6 | ---
7 |
8 | 异常页用于对页面特定的异常状态进行反馈。通常，它包含对错误状态的阐述，并向用户提供建议或操作，避免用户感到迷失和困惑。
9 |
10 | ## API
11 |
12 | | 参数 | 说明 | 类型 | 默认值 |
13 | |-------------|------------------------------------------|-------------|-------|
14 | | type | 页面类型，若配置，则自带对应类型默认的 `title`，`desc`，`img`，此默认设置可以被 `title`，`desc`，`img` 覆盖 | Enum {'403', '404', '500'} | - |
15 | | title | 标题 | ReactNode | - |
16 | | desc | 补充描述 | ReactNode | - |
17 | | img | 背景图片地址 | string | - |
18 | | actions | 建议操作，配置此属性时默认的『返回首页』按钮不生效 | ReactNode | - |
19 | | linkElement | 定义链接的元素 | string\|ReactElement | 'a' |
20 |
--------------------------------------------------------------------------------
/src/component/header-search/index.less:
--------------------------------------------------------------------------------
1 | @import '~antd/lib/style/themes/default.less';
2 |
3 | .quant-headerSearch {
4 | .anticon-search {
5 | cursor: pointer;
6 | font-size: 16px;
7 | }
8 | .input {
9 | transition: width 0.3s, margin-left 0.3s;
10 | width: 0;
11 | background: transparent;
12 | border-radius: 0;
13 | .ant-select-selection {
14 | background: transparent;
15 | }
16 | input {
17 | border: 0;
18 | padding-left: 0;
19 | padding-right: 0;
20 | box-shadow: none !important;
21 | }
22 | &,
23 | &:hover,
24 | &:focus {
25 | border-bottom: 1px solid @border-color-base;
26 | }
27 | &.show {
28 | width: 210px;
29 | margin-left: 8px;
30 | }
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/src/examples/UI/ReactMarkdown/Basic1/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { ReactMarkdown ,Input} from 'quant-ui';
3 | const { TextArea } = Input;
4 | class Detail extends Component {
5 | constructor(props){
6 | super(props)
7 | this.state = {
8 | value:""
9 | }
10 | }
11 | onChange = (e) =>{
12 | this.setState({
13 | value:e.target.value
14 | })
15 | }
16 | render() {
17 | return (
18 |
19 |
25 | );
26 | }
27 | }
28 | export default Detail;
29 |
--------------------------------------------------------------------------------
/src/examples/antd/mention/mention_controlled/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Mention } from 'quant-ui';
3 |
4 | const { toContentState } = Mention;
5 | class Detail extends Component {
6 | state = {
7 | value: toContentState('@afc163'),
8 | }
9 |
10 | componentDidMount() {
11 | this.mention.focus();
12 | }
13 |
14 | handleChange = (editorState) => {
15 | this.setState({
16 | value: editorState,
17 | });
18 | }
19 |
20 | render() {
21 | return (
22 |
20 |
23 | 请输入Markdown语法
21 | 22 |
14 |
15 |
21 |
25 | );
26 | }
27 | }
28 | export default Detail;
29 |
--------------------------------------------------------------------------------
/src/examples/util/screenfull/Basic1/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Button,screenfull} from 'quant-ui';
3 | class Detail extends Component {
4 | screenFull = () =>{
5 | if (screenfull.enabled) {
6 | screenfull.request();
7 | }
8 | }
9 | screenFullDom = () =>{
10 | window.onresize = null;
11 | if (screenfull.enabled) {
12 | screenfull.request(this.refs.img);
13 | }
14 | }
15 | render() {
16 | return (
17 |
22 | Loading state：
24 |
18 |
19 |
20 | 21 | 22 |
23 |
24 |
25 |
26 | );
27 | }
28 | }
29 | export default Detail;
30 |
--------------------------------------------------------------------------------
/src/examples/antd/autoComplete/autosoundmodel/style.less:
--------------------------------------------------------------------------------
1 | .global-search-wrapper {
2 | padding-right: 50px;
3 | }
4 |
5 | .global-search {
6 | width: 100%;
7 | }
8 |
9 | .global-search.ant-select-auto-complete .ant-select-selection--single {
10 | margin-right: -46px;
11 | }
12 |
13 | .global-search.ant-select-auto-complete .ant-input-affix-wrapper .ant-input:not(:last-child) {
14 | padding-right: 62px;
15 | }
16 |
17 | .global-search.ant-select-auto-complete .ant-input-affix-wrapper .ant-input-suffix {
18 | right: 0;
19 | }
20 |
21 | .global-search.ant-select-auto-complete .ant-input-affix-wrapper .ant-input-suffix button {
22 | border-top-left-radius: 0;
23 | border-bottom-left-radius: 0;
24 | }
25 |
26 | .global-search-item-count {
27 | position: absolute;
28 | right: 16px;
29 | }
--------------------------------------------------------------------------------
/src/examples/antd/modal/modal_confirm_1/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Modal, Button } from 'quant-ui';
3 |
4 | const confirm = Modal.confirm;
5 |
6 | function showConfirm() {
7 | confirm({
8 | title: 'Do you want to delete these items?',
9 | content: 'When clicked the OK button, this dialog will be closed after 1 second',
10 | onOk() {
11 | return new Promise((resolve, reject) => {
12 | setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
13 | }).catch(() => console.log('Oops errors!'));
14 | },
15 | onCancel() { },
16 | });
17 | }
18 | class Detail extends Component {
19 | render() {
20 | return (
21 |
24 | );
25 | }
26 | }
27 | export default Detail;
28 |
--------------------------------------------------------------------------------
/src/examples/antd/mention/mention_spread_up/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Mention } from 'quant-ui';
3 |
4 | const { toString } = Mention;
5 |
6 | function onChange(contentState) {
7 | console.log(toString(contentState));
8 | }
9 |
10 | function onSelect(suggestion) {
11 | console.log('onSelect', suggestion);
12 | }
13 | class Detail extends Component {
14 | render() {
15 |
16 | return (
17 | 20 | 21 | 22 |
23 |
18 |
19 |
27 | );
28 | }
29 | }
30 |
31 | export default Detail;
32 |
--------------------------------------------------------------------------------
/src/component/utils/parseQueryString.js:
--------------------------------------------------------------------------------
1 | /**
2 | *
3 | * @desc url参数转对象
4 | * @param {String} url default: window.location.href
5 | * @return {Object}
6 | */
7 | function parseQueryString(url) {
8 | url = !url ? window.location.href : url;
9 | if(url.indexOf('?') === -1) {
10 | return {};
11 | }
12 | var search = url[0] === '?' ? url.substr(1) : url.substring(url.lastIndexOf('?') + 1);
13 | if (search === '') {
14 | return {};
15 | }
16 | search = search.split('&');
17 | var query = {};
18 | for (var i = 0; i < search.length; i++) {
19 | var pair = search[i].split('=');
20 | query[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1] || '');
21 | }
22 | return query;
23 | }
24 |
25 | module.exports = parseQueryString
--------------------------------------------------------------------------------
/src/examples/antd/radio/radio_disable/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Radio, Button } from 'quant-ui';
3 |
4 | class Detail extends Component {
5 | state = {
6 | disabled: true,
7 | }
8 |
9 | toggleDisabled = () => {
10 | this.setState({
11 | disabled: !this.state.disabled,
12 | });
13 | }
14 |
15 | render() {
16 | return (
17 | 19 |
18 | Disabled
19 |
20 |Disabled
21 |
27 | );
28 | }
29 | }
30 | export default Detail;
31 |
--------------------------------------------------------------------------------
/src/examples/util/theme/Basic1/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import {theme, Button} from 'quant-ui';
3 | const {getCurrentColor,refreshColor,setCurrentColor} = theme;
4 | class Detail extends Component {
5 | redClick = () =>{
6 | setCurrentColor('red')
7 | refreshColor()
8 | }
9 | greenClick = () => {
10 | setCurrentColor('green')
11 | refreshColor()
12 | }
13 | purpleClick = () =>{
14 | setCurrentColor('purple')
15 | refreshColor()
16 | }
17 | render() {
18 | return (
19 | 20 |
22 |
25 |
26 |
20 |
25 | );
26 | }
27 | }
28 | export default Detail;
29 |
--------------------------------------------------------------------------------
/src/examples/antd/message/api.js:
--------------------------------------------------------------------------------
1 |
2 | const api = [
3 | {
4 | title: "参数",
5 | api: [
6 | {
7 | key: "1",
8 | parameter: "content", //字段名
9 | type: 'string|ReactNode', //类型
10 | must: '', //是否必填
11 | default: '-', //默认值
12 | instructions: '提示内容' //描述
13 | },
14 | {
15 | key: "2",
16 | parameter: "duration", //字段名
17 | type: 'number', //类型
18 | must: '', //是否必填
19 | default: '3', //默认值
20 | instructions: '自动关闭的延时，单位秒。设为 0 时不自动关闭。' //描述
21 | },
22 | {
23 | key: "3",
24 | parameter: "onClose", //字段名
25 | type: 'Function', //类型
26 | must: '', //是否必填
27 | default: '-', //默认值
28 | instructions: '关闭时触发的回调函数' //描述
29 | },
30 | ]
31 | }
32 |
33 | ];
34 |
35 | export default {
36 | api
37 | }
--------------------------------------------------------------------------------
/src/examples/util/screenfull/Basic2/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Button,screenfull} from 'quant-ui';
3 | class Detail extends Component {
4 |
5 | screenFull = (event) =>{
6 | window.onresize = null;
7 | if (screenfull.enabled) {
8 | screenfull.toggle(event.target);
9 | }
10 | }
11 | componentWillMount = () =>{
12 | if (screenfull.enabled) {
13 | screenfull.on('change', () => {
14 | console.log('是否全屏?', screenfull.isFullscreen ? 'Yes' : 'No');
15 | });
16 | }
17 | }
18 | render() {
19 | return (
20 | 当前字体颜色{getCurrentColor()}
21 | 22 | 23 | 24 |
21 |
23 |
24 |
25 | );
26 | }
27 | }
28 | export default Detail;
29 |
--------------------------------------------------------------------------------
/src/examples/antd/steps/stepscustom/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Steps, Popover } from 'quant-ui';
3 |
4 | const Step = Steps.Step;
5 | const customDot = (dot, { status, index }) => (
6 | 点击图片切换全屏
22 |
21 | {container}
22 |
26 | );
27 | }
28 | }
29 |
30 | export default Detail;
31 |
--------------------------------------------------------------------------------
/src/examples/antd/autoComplete/autobasic/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { AutoComplete } from 'quant-ui';
3 |
4 | function onSelect(value) {
5 | console.log('onSelect', value);
6 | }
7 |
8 |
9 | class Detail extends Component {
10 | state = {
11 | dataSource: [],
12 | }
13 |
14 | handleSearch = (value) => {
15 | this.setState({
16 | dataSource: !value ? [] : [
17 | value,
18 | value + value,
19 | value + value + value,
20 | ],
21 | });
22 | }
23 |
24 | render() {
25 | const { dataSource } = this.state;
26 | return (
27 |
23 | Loading state：
25 |
9 | console.log(value)}
12 | style={{ width: 200 }}
13 | />
14 |
15 | console.log(value)}
18 | enterButton
19 | />
20 |
21 | console.log(value)}
26 | />
27 |
28 | );
29 | }
30 | }
31 | export default Detail;
32 |
--------------------------------------------------------------------------------
/src/examples/antd/alert/alert_close/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Alert } from 'quant-ui';
3 |
4 | const onClose = function (e) {
5 | console.log(e, 'I was closed.');
6 | };
7 | class Detail extends Component {
8 |
9 | render() {
10 | return (
11 | 15 |
21 |
12 |
19 |
27 | );
28 | }
29 | }
30 | export default Detail;
31 |
--------------------------------------------------------------------------------
/src/examples/UI/HeaderSearch/notifyIcon/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { HeaderSearch } from 'quant-ui';
3 | class Detail extends Component {
4 |
5 | render() {
6 | return (
7 | 19 |
17 | {
21 | console.log('input', value); // eslint-disable-line
22 | }}
23 | onPressEnter={(value) => {
24 | console.log('enter', value); // eslint-disable-line
25 | }}
26 | />
27 |
28 | );
29 | }
30 | }
31 | export default Detail;
32 |
--------------------------------------------------------------------------------
/src/component/authorized/renderAuthorize.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable import/no-mutable-exports */
2 | let CURRENT = 'NULL';
3 | /**
4 | * use authority or getAuthority
5 | * @param {string|()=>String} currentAuthority
6 | */
7 | const renderAuthorize = Authorized => {
8 | return currentAuthority => {
9 | if (currentAuthority) {
10 | if (currentAuthority.constructor.name === 'Function') {
11 | CURRENT = currentAuthority();
12 | }
13 | if (
14 | currentAuthority.constructor.name === 'String' ||
15 | currentAuthority.constructor.name === 'Array'
16 | ) {
17 | CURRENT = currentAuthority;
18 | }
19 | } else {
20 | CURRENT = 'NULL';
21 | }
22 | return Authorized;
23 | };
24 | };
25 |
26 | export { CURRENT };
27 | export default Authorized => renderAuthorize(Authorized);
28 |
--------------------------------------------------------------------------------
/src/examples/antd/Avatar/Basic/Detail.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import {Avatar} from 'quant-ui';
3 | class Detail extends Component {
4 | render() {
5 | return (
6 |
7 |
13 |
19 | );
20 | }
21 | }
22 | export default Detail;
--------------------------------------------------------------------------------
/scripts/test.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | // Do this as the first thing so that any code reading it knows the right env.
4 | process.env.BABEL_ENV = 'test';
5 | process.env.NODE_ENV = 'test';
6 | process.env.PUBLIC_URL = '';
7 |
8 | // Makes the script crash on unhandled rejections instead of silently
9 | // ignoring them. In the future, promise rejections that are not handled will
10 | // terminate the Node.js process with a non-zero exit code.
11 | process.on('unhandledRejection', err => {
12 | throw err;
13 | });
14 |
15 | // Ensure environment variables are read.
16 | require('../config/env');
17 |
18 | const jest = require('jest');
19 | let argv = process.argv.slice(2);
20 |
21 | // Watch unless on CI or in coverage mode
22 | if (!process.env.CI && argv.indexOf('--coverage') < 0) {
23 | argv.push('--watch');
24 | }
25 |
26 |
27 | jest.run(argv);
28 |
--------------------------------------------------------------------------------
/src/component/header-search/demo/basic.md:
--------------------------------------------------------------------------------
1 | ---
2 | order: 0
3 | title: 全局搜索
4 | ---
5 |
6 | 通常放置在导航工具条右侧。（点击搜索图标预览效果）
7 |
8 | ````jsx
9 | import HeaderSearch from 'ant-design-pro/lib/HeaderSearch';
10 |
11 | ReactDOM.render(
12 |
8 |
12 | 13 |
14 |
18 |
22 | {
26 | console.log('input', value); // eslint-disable-line
27 | }}
28 | onPressEnter={(value) => {
29 | console.log('enter', value); // eslint-disable-line
30 | }}
31 | />
32 |
33 | , mountNode);
34 | ````
35 |
--------------------------------------------------------------------------------
/src/examples/antd/inputNumber/inputNumber_formatshow/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { InputNumber, Button } from 'quant-ui';
3 |
4 | function onChange(value) {
5 | console.log('changed', value);
6 | }
7 | class Detail extends Component {
8 |
9 | render() {
10 | return (
11 |
12 | ('$' +value).replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
15 | parser={value => value.replace(/\$\s?|(,*)/g, '')}
16 | onChange={onChange}
17 | />
18 | value+'%'}
23 | parser={value => value.replace('%', '')}
24 | onChange={onChange}
25 | />
26 |
27 | );
28 | }
29 | }
30 |
31 | export default Detail;
32 |
--------------------------------------------------------------------------------
/src/examples/antd/select/select_basic/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Select } from 'quant-ui';
3 |
4 | const Option = Select.Option;
5 |
6 | function handleChange(value) {
7 | console.log('selected'+ value);
8 | }
9 |
10 | class Detail extends Component {
11 |
12 | render() {
13 | return (
14 |
15 |
21 |
24 |
25 | );
26 | }
27 | }
28 |
29 | export default Detail;
30 |
--------------------------------------------------------------------------------
/src/examples/UI/QRCode/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Card, Button, Tabs } from 'quant-ui';
3 | import Api from '../../API.js';
4 | import data from './api.js';
5 | import Detail from './Detail.js';
6 | import Code from '../../Code.js';
7 | const TabPane = Tabs.TabPane;
8 | class App extends Component {
9 | render() {
10 | return (
11 |
12 |
14 |
15 |
16 |
18 |
22 |
23 |
25 |
26 |
27 | );
28 | }
29 | }
30 |
31 | export default App;
32 |
--------------------------------------------------------------------------------
/src/component/not-found/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Created by lwz.
3 | */
4 | import React from 'react';
5 | import img from './imgs/404.png';
6 | import "./index.less"
7 |
8 | class NotFound extends React.Component {
9 | static defaultProps = {
10 | img: img,
11 | };
12 | constructor(props) {
13 | super(props);
14 | this.state = {
15 | animated: ''
16 | }
17 | }
18 | enter = () => {
19 | this.setState({animated: 'hinge'})
20 | };
21 | render() {
22 | return (
23 | 二维码生成
13 |
19 |
21 |
24 | 
25 |
26 | )
27 | }
28 | }
29 |
30 | export default NotFound;
--------------------------------------------------------------------------------
/src/examples/antd/List/GridList/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { List, Card} from 'quant-ui';
3 |
4 | const listData = [
5 | {
6 | title:'title 1'
7 | },
8 | {
9 | title:'title 2'
10 | },
11 | {
12 | title:'title 3'
13 | }
14 | ];
15 |
16 | class Detail extends Component {
17 |
18 | render() {
19 | return (
20 | - quant-ui footer part}
24 | renderItem={item => (
25 |
15 |
17 |
19 |
21 |
23 | );
24 | }
25 | }
26 | export default Detail;
--------------------------------------------------------------------------------
/src/examples/history/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { BackTop } from 'quant-ui';
3 | import "./style.less"
4 | import history from "./history.js"
5 | class Detail extends Component {
6 |
7 | render() {
8 | return (
9 | 17 |
19 |
21 |
10 | {
11 | history.map(({title,code})=>{
12 | return(
13 |
22 | );
23 | }
24 | }
25 |
26 | export default Detail;
27 |
--------------------------------------------------------------------------------
/src/examples/util/webSocket/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Card,Button,Tabs } from 'quant-ui';
3 | import Api from '../../API.js';
4 | import data from './api.js';
5 | import Code from '../../Code.js';
6 | import Detail from './Detail.js';
7 | const TabPane = Tabs.TabPane;
8 | class App extends Component {
9 | render() {
10 | return (
11 |
14 |
17 | )
18 | })
19 | }
20 | {title}
15 | 16 |
12 |
14 |
15 |
16 |
18 |
22 |
23 |
25 |
26 |
27 | );
28 | }
29 | }
30 |
31 | export default App;
32 |
--------------------------------------------------------------------------------
/src/examples/antd/button/DisabledState/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Button } from 'quant-ui';
3 | class Detail extends Component {
4 |
5 | render() {
6 | return (
7 | webSocket链接
13 |
19 |
21 |
8 |
9 |
10 |
11 | 12 | 13 |
14 | 15 | 16 |
17 |
22 | );
23 | }
24 | }
25 | export default Detail;
26 |
--------------------------------------------------------------------------------
/src/component/drop-tree/component/LineFirst.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 |
3 | export default class LineFirst extends Component {
4 | constructor(props) {
5 | super(props);
6 | this.state = {
7 | lineNum: props.lineNum,
8 | };
9 | }
10 | componentWillReceiveProps = (nextProps) => {
11 | this.setState({
12 | lineNum:nextProps.lineNum
13 | })
14 | };
15 | lineFirst = (lineNum) => {
16 | if (lineNum == 0) {
17 | return null;
18 | }
19 | return (
20 | 11 | 12 | 13 |
14 | 15 | 16 |
17 |
18 |
19 |
20 |
21 |
9 |
10 | Card content
12 |
13 | Card content
15 |
16 | Card content
18 |
19 |
20 |
21 | );
22 | }
23 | }
24 | export default Detail;
--------------------------------------------------------------------------------
/src/examples/antd/datePicker/dataPicker_forbid/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { DatePicker } from 'quant-ui';
3 |
4 | import moment from 'moment';
5 |
6 | const { MonthPicker, RangePicker } = DatePicker;
7 |
8 | const dateFormat = 'YYYY-MM-DD';
9 |
10 | class Detail extends Component {
11 |
12 | render() {
13 | return (
14 |
15 |
17 |
19 |
24 | );
25 | }
26 | }
27 | export default Detail;
--------------------------------------------------------------------------------
/src/examples/antd/slider/slider_vertical/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Slider } from 'quant-ui';
3 |
4 | const style = {
5 | float: 'left',
6 | height: 300,
7 | marginLeft: 70,
8 | };
9 |
10 | const marks = {
11 | 0: '0°C',
12 | 26: '26°C',
13 | 37: '37°C',
14 | 100: {
15 | style: {
16 | color: '#f50',
17 | },
18 | label: 100°C,
19 | },
20 | };
21 | class Detail extends Component {
22 | render() {
23 | return (
24 | 17 |
19 |
25 |
35 | );
36 | }
37 | }
38 |
39 | export default Detail;
40 |
--------------------------------------------------------------------------------
/src/examples/antd/Collapse/HiddenArrow/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Collapse } from 'quant-ui';
3 |
4 | const Panel = Collapse.Panel;
5 |
6 | const text = `
7 | A dog is a type of domesticated animal.
8 | Known for its loyalty and faithfulness,
9 | it can be found as a welcome guest in many households across the world.
10 | `;
11 |
12 | class Detail extends Component {
13 |
14 | render() {
15 | return (
16 |
26 |
28 |
29 |
31 |
32 |
34 | {text}
19 |{text}
22 |
22 |
25 |
32 |
36 |
37 | );
38 | }
39 | }
40 | export default Detail;
41 |
--------------------------------------------------------------------------------
/src/examples/antd/Collapse/Accordion/Detail.js:
--------------------------------------------------------------------------------
1 | //一次只能展示一个面板
2 |
3 | import React, { Component } from 'react';
4 | import { Collapse } from 'quant-ui';
5 |
6 | const Panel = Collapse.Panel;
7 |
8 | const text = [
9 | 'dog,dog,dog',
10 | 'cat,cat,cat',
11 | 'flamingo,flamingo,flamingo'
12 | ]
13 | class Detail extends Component {
14 |
15 | render() {
16 | return (
17 | Some contents...
33 |Some contents...
34 |Some contents...
35 |{text[1]}
20 |{text[2]}
23 |{text[0]}
26 |
22 |
25 |
32 |
36 |
37 | );
38 | }
39 | }
40 |
41 | export default Detail;
42 |
--------------------------------------------------------------------------------
/src/examples/antd/slider/slider_label/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Slider } from 'quant-ui';
3 |
4 | const marks = {
5 | 0: '0°C',
6 | 26: '26°C',
7 | 37: '37°C',
8 | 100: {
9 | style: {
10 | color: '#f50',
11 | },
12 | label: 100°C,
13 | },
14 | };
15 | class Detail extends Component {
16 |
17 | render() {
18 | return (
19 | Some contents...
33 |Some contents...
34 |Some contents...
35 |
20 |
33 | );
34 | }
35 | }
36 |
37 | export default Detail;
38 |
--------------------------------------------------------------------------------
/src/component/ellipsis/demo/number.md:
--------------------------------------------------------------------------------
1 | ---
2 | order: 0
3 | title:
4 | zh-CN: 按照字符数省略
5 | en-US: Truncate according to the number of character
6 | ---
7 |
8 | ## zh-CN
9 |
10 | 通过设置 `length` 属性指定文本最长长度，如果超过这个长度会自动截取。
11 |
12 | ## en-US
13 |
14 | `length` attribute specifies the maximum length where the text will automatically be truncated when exceeded.
15 |
16 | ````jsx
17 | import Ellipsis from 'ant-design-pro/lib/Ellipsis';
18 |
19 | 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.';
20 |
21 | ReactDOM.render(
22 | included=true
21 |included=false
25 |marks & step
28 |step=null
31 |
23 | {article}
24 | {article}
26 |
27 | , mountNode);
28 | ````
29 |
--------------------------------------------------------------------------------
/src/examples/antd/Badge/MaxNum/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Avatar,Badge } from 'quant-ui';
3 |
4 | class Detail extends Component {
5 | render() {
6 | return (
7 | Show Tooltip
25 |
8 |
9 |
11 |
12 |
14 |
15 |
17 |
18 |
20 |
21 | );
22 | }
23 | }
24 | export default Detail;
--------------------------------------------------------------------------------
/src/examples/antd/Collapse/BasicCollapse/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Collapse } from 'quant-ui';
3 |
4 | const Panel = Collapse.Panel;
5 |
6 | const text = [
7 | 'dog,dog,dog',
8 | 'cat,cat,cat',
9 | 'flamingo,flamingo,flamingo'
10 | ]
11 | class Detail extends Component {
12 |
13 | render() {
14 | return (
15 | {text[1]}
18 |{text[2]}
21 |{text[0]}
24 |
10 | 'extra footer'} />
11 |
12 | 'extra footer'} showTime />
13 |
14 | 'extra footer'} />
15 |
16 | 'extra footer'} showTime />
17 |
18 | 'extra footer'} placeholder="Select month" />
19 |
20 | );
21 | }
22 | }
23 | export default Detail;
--------------------------------------------------------------------------------
/src/examples/antd/dropdown/dropdownbasic/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Menu, Dropdown, Icon } from 'quant-ui';
3 |
4 | const menu = (
5 |
16 | );
17 |
18 | class Detail extends Component {
19 |
20 | render() {
21 | return (
22 | 14 |
16 |
18 |
12 |
14 |
16 |
21 | );
22 | }
23 | }
24 | export default Detail;
--------------------------------------------------------------------------------
/src/examples/antd/notification/notification_icon/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Button, notification } from 'quant-ui';
3 |
4 | const openNotificationWithIcon = (type) => {
5 | notification[type]({
6 | message: 'Notification Title',
7 | description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
8 | });
9 | };
10 |
11 | class Detail extends Component {
12 | render() {
13 | return (
14 | 14 |
16 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 | );
24 | }
25 | }
26 | export default Detail;
27 |
--------------------------------------------------------------------------------