├── .eslintrc.js ├── .github └── ISSUE_TEMPLATE │ └── bug_report.md ├── .gitignore ├── .npmignore ├── .vscode └── launch.json ├── CHANGELOG.md ├── README.md ├── examples ├── create-react-app │ ├── .gitignore │ ├── README.md │ ├── color.js │ ├── config-overrides.js │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── color.less │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ ├── src │ │ ├── App.css │ │ ├── App.js │ │ ├── App.test.js │ │ ├── ColorPicker.js │ │ ├── index.css │ │ ├── index.js │ │ ├── logo.svg │ │ ├── registerServiceWorker.js │ │ └── styles │ │ │ ├── components │ │ │ └── dashboard.less │ │ │ ├── main.less │ │ │ └── vars.less │ └── yarn.lock └── customize-cra │ ├── .env │ ├── .eslintrc │ ├── .gitignore │ ├── README.md │ ├── color.js │ ├── config-overrides.js │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── color.less │ ├── favicon.ico │ ├── favicon.png │ ├── github.svg │ ├── index.html │ ├── logo.svg │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ └── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── ColorPicker.js │ ├── Menus.js │ ├── Navbar │ ├── index.js │ └── index.less │ ├── Responsive.js │ ├── component │ ├── ColorPicker │ │ ├── index.js │ │ └── style.less │ ├── Loading │ │ └── index.js │ └── ThemeCard │ │ ├── index.js │ │ └── style.less │ ├── dark.json │ ├── index.css │ ├── index.js │ ├── light.json │ ├── logo.svg │ ├── previews │ ├── AlertPreview │ │ └── index.js │ ├── AvatarPreview │ │ └── index.js │ ├── BadgePreview │ │ └── index.js │ ├── ButtonPreview │ │ └── index.js │ ├── CalendarPreview │ │ ├── index.js │ │ └── style.less │ ├── CardPreview │ │ └── index.js │ ├── CarouselPreview │ │ ├── index.js │ │ └── style.less │ ├── CascaderPreview │ │ └── index.js │ ├── CheckboxPreview │ │ └── index.js │ ├── CollapsePreview │ │ └── index.js │ ├── ColorPreview │ │ ├── index.js │ │ └── style.less │ ├── DatePickerPreview │ │ └── index.js │ ├── DropdownPreview │ │ └── index.js │ ├── FormPreview │ │ ├── index.js │ │ └── style.less │ ├── InputPreview │ │ └── index.js │ ├── ListPreview │ │ └── index.js │ ├── MenuPreview │ │ └── index.js │ ├── MessagePreview │ │ └── index.js │ ├── ModalPreview │ │ └── index.js │ ├── NotificationPreview │ │ └── index.js │ ├── PaginationPreview │ │ └── index.js │ ├── PopconfirmPreview │ │ └── index.js │ ├── PopoverPreview │ │ └── index.js │ ├── PreviewWrapper │ │ ├── index.js │ │ └── style.less │ ├── ProgressPreview │ │ └── index.js │ ├── RadioPreview │ │ └── index.js │ ├── RatePreview │ │ └── index.js │ ├── SelectPreview │ │ └── index.js │ ├── SliderPreview │ │ └── index.js │ ├── SpinPreview │ │ └── index.js │ ├── StepPreview │ │ └── index.js │ ├── SwitchPreview │ │ └── index.js │ ├── TablePreview │ │ └── index.js │ ├── TabsPreview │ │ └── index.js │ ├── TagPreview │ │ └── index.js │ ├── TimePickerPreview │ │ └── index.js │ ├── TimelinePreview │ │ └── index.js │ ├── TooltipPreview │ │ └── index.js │ ├── TransferPreview │ │ └── index.js │ ├── TreePreview │ │ └── index.js │ ├── TreeSelectPreview │ │ └── index.js │ ├── TypographyPreview │ │ ├── index.js │ │ └── style.less │ └── index.js │ ├── serviceWorker.js │ ├── setupTests.js │ ├── styles │ ├── components │ │ └── dashboard.less │ ├── main.less │ └── vars.less │ ├── theme.json │ └── vars.json ├── index.js ├── package-lock.json ├── package.json ├── postscc-less-parser.js └── yarn.lock /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | commonjs: true, 4 | es6: true, 5 | node: true 6 | }, 7 | extends: [ 8 | 'standard' 9 | ], 10 | globals: { 11 | Atomics: 'readonly', 12 | SharedArrayBuffer: 'readonly' 13 | }, 14 | parserOptions: { 15 | ecmaVersion: 11 16 | }, 17 | rules: { 18 | semi: [2, 'always'], 19 | 'no-useless-escape': 0 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Title (Must be in English) 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | Describe your bug in English language 12 | 13 | **Show your code** 14 | Show your `config-overrides.js` file and styles folder structure 15 | 16 | **Screenshots** 17 | If applicable, add screenshots to help explain your problem. 18 | 19 | 20 | **Version** 21 | Which version is installed in your application? Try using the latest version, that may help 22 | -------------------------------------------------------------------------------- /.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 | yarn.lock 23 | 24 | *.tgz -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | examples/ 2 | node_modules/ 3 | package-lock.json 4 | *.tgz -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // Use IntelliSense to learn about possible attributes. 3 | // Hover to view descriptions of existing attributes. 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 | "version": "0.2.0", 6 | "configurations": [ 7 | { 8 | "type": "node", 9 | "request": "launch", 10 | "name": "Launch Program", 11 | "skipFiles": [ 12 | "/**" 13 | ], 14 | "program": "${workspaceFolder}\\index.js" 15 | } 16 | ] 17 | } -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | This document contains changes in this package with each version change. 3 | ## [1.2.8] - 2020-10-21 (latest) 4 | Fixed Link buton border color 5 | Issue Fixed: https://github.com/mzohaibqc/antd-theme-generator/issues/64 6 | ## [1.2.7] - 2020-10-18 7 | Fixed slider thumb active color issue 8 | Fixed issues relater to box-shadow 9 | ## [1.2.6] - 2020-10-15 10 | Fixed a bug. input box-shadow color was generated different for every build due to `fade()`, fixed now. 11 | Fixed following bug: 12 | https://github.com/mzohaibqc/antd-theme-webpack-plugin/issues/69 13 | ## [1.2.5] - 2020-10-10 14 | stylesDir can be a string or array of strings (['path1', 'path2']) if you have more than one styles directories in your project or you want to specify some sub directories e.g your component and containers directories containing styles for each component inside that directory. 15 | ## [1.2.4] - 2020-06-06 16 | - Fixed following issues 17 | - https://github.com/ant-design/ant-design/issues/24777 18 | - https://github.com/mzohaibqc/antd-theme-generator/issues/45 19 | ## [1.2.3] - 2020-05-19 20 | - Rewamped base script to remove restriction to use unique theme color values for different variables, now you can use same color for multiple variables or even 21 | variables as value for other variables 22 | - now generated color.less size has been reduced by 30% or more (300kB -> 200kB) due to removal of redundant rules and ant design variables 23 | 24 | 25 | ## [1.2.1] - 2020-04-25 26 | - Added code to remove statements with value containing url like `background: url('some url')` in color.less file 27 | - Here is detail about the issue: https://github.com/mzohaibqc/antd-theme-generator/issues/38 28 | 29 | ## [1.2.0] - 2020-04-25 30 | - Added code to remove background-image url in color.less file 31 | - Here is detail about the issue: https://github.com/mzohaibqc/antd-theme-generator/issues/8 32 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # antd-theme-generator 2 | 3 | This script generates color specific styles/less file which you can use to change theme dynamically in browser 4 | 5 | ## Example: 6 | 7 | ``` 8 | const { generateTheme } = require('antd-theme-generator'); 9 | 10 | const options = { 11 | antDir: path.join(__dirname, './node_modules/antd'), 12 | stylesDir: path.join(__dirname, './src'), // all files with .less extension will be processed 13 | varFile: path.join(__dirname, './src/styles/variables.less'), // default path is Ant Design default.less file 14 | themeVariables: ['@primary-color'], 15 | outputFilePath: path.join(__dirname, './public/color.less') // if provided, file will be created with generated less/styles 16 | customColorRegexArray: [/^fade\(.*\)$/], // An array of regex codes to match your custom color variable values so that code can identify that it's a valid color. Make sure your regex does not adds false positives. 17 | } 18 | 19 | generateTheme(options).then(less => { 20 | console.log('Theme generated successfully'); 21 | }) 22 | .catch(error => { 23 | console.log('Error', error); 24 | }) 25 | ``` 26 | 27 | | Property | Type | Default | Descript | 28 | | --- | --- | --- | --- | 29 | | antdDir | string | - | This is path to antd directory in your node_modules | 30 | | stylesDir | string, [string] | - | Path/Paths to your custom styles directory containing .less files | 31 | | varFile | string | - | Path to your theme related variables file | 32 | | themeVariables | array | ['@primary-color'] | List of variables that you want to dynamically change | 33 | | outputFilePath | string | - | Generated less content will be written to file path specified otherwise it will not be written. However, you can use returned output and write in any file as you want | 34 | | customColorRegexArray | array | ['color', 'lighten', 'darken', 'saturate', 'desaturate', 'fadein', 'fadeout', 'fade', 'spin', 'mix', 'hsv', 'tint', 'shade', 'greyscale', 'multiply', 'contrast', 'screen', 'overlay'].map(name => new RegExp(`${name}\(.*\)`))] | This array is to provide regex which will match your color value, most of the time you don't need this | 35 | 36 | 37 | Add following lines in your main html file 38 | 39 | ``` 40 | 41 | 47 | 48 | ``` 49 | 50 | Now you can update colors by updating less variables like this 51 | 52 | ``` 53 | window.less.modifyVars({ 54 | '@primary-color': '#0035ff' 55 | }) 56 | ``` 57 | -------------------------------------------------------------------------------- /examples/create-react-app/.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 | -------------------------------------------------------------------------------- /examples/create-react-app/color.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const { generateTheme, getLessVars } = require('antd-theme-generator'); 3 | 4 | const options = { 5 | stylesDir: path.join(__dirname, './src/styles'), 6 | antDir: path.join(__dirname, './node_modules/antd'), 7 | varFile: path.join(__dirname, './src/styles/vars.less'), 8 | mainLessFile: path.join(__dirname, './src/styles/main.less'), 9 | themeVariables: [ 10 | '@primary-color', 11 | '@secondary-color', 12 | '@text-color', 13 | '@text-color-secondary', 14 | '@heading-color', 15 | '@layout-body-background', 16 | '@btn-primary-bg', 17 | '@layout-header-background', 18 | '@border-color-base', 19 | '@white' 20 | ], 21 | indexFileName: 'index.html', 22 | outputFilePath: path.join(__dirname, './public/color.less'), 23 | customColorRegexArray: [/^fade\(.*\)$/] 24 | } 25 | 26 | generateTheme(options).then(less => { 27 | console.log('Theme generated successfully'); 28 | }) 29 | .catch(error => { 30 | console.log('Error', error); 31 | }); -------------------------------------------------------------------------------- /examples/create-react-app/config-overrides.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const { injectBabelPlugin } = require('react-app-rewired'); 3 | const rewireLess = require('react-app-rewire-less'); 4 | const { getLessVars } = require('../../index'); 5 | /* 6 | # Config 7 | */ 8 | module.exports = function override(config, env) { 9 | config = injectBabelPlugin( 10 | ['import', { libraryName: 'antd', style: true }], 11 | config 12 | ); 13 | config = rewireLess.withLoaderOptions({ 14 | modifyVars: getLessVars(path.join(__dirname, './src/styles/vars.less')), 15 | javascriptEnabled: true 16 | })(config, env); 17 | return config; 18 | }; 19 | -------------------------------------------------------------------------------- /examples/create-react-app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "create-react-app", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "antd": "^3.12.1", 7 | "antd-theme-generator": "^1.2.3", 8 | "glob": "^7.1.3", 9 | "react": "^16.3.2", 10 | "react-app-rewire-less": "^2.1.1", 11 | "react-app-rewired": "^1.5.2", 12 | "react-color": "^2.14.1", 13 | "react-dom": "^16.3.2", 14 | "react-scripts": "1.1.4" 15 | }, 16 | "scripts": { 17 | "start": "npm run color && react-app-rewired start", 18 | "build": "react-app-rewired build", 19 | "color": "node color.js", 20 | "test": "react-scripts test --env=jsdom", 21 | "eject": "react-scripts eject" 22 | }, 23 | "devDependencies": { 24 | "babel-plugin-import": "^1.7.0", 25 | "less-plugin-npm-import": "^2.1.0" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /examples/create-react-app/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mzohaibqc/antd-theme-generator/8287b590f9ae5c94fa07bfa92a772d57247cba27/examples/create-react-app/public/favicon.ico -------------------------------------------------------------------------------- /examples/create-react-app/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 14 | 23 | React App 24 | 25 | 26 | 27 | 33 | 34 | 37 | 38 |
39 | 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /examples/create-react-app/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 | -------------------------------------------------------------------------------- /examples/create-react-app/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 80px; 8 | } 9 | 10 | .App-header { 11 | background-color: #222; 12 | height: 150px; 13 | padding: 20px; 14 | color: white; 15 | } 16 | 17 | .App-title { 18 | font-size: 1.5em; 19 | } 20 | 21 | .App-intro { 22 | font-size: large; 23 | } 24 | 25 | @keyframes App-logo-spin { 26 | from { transform: rotate(0deg); } 27 | to { transform: rotate(360deg); } 28 | } 29 | -------------------------------------------------------------------------------- /examples/create-react-app/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /examples/create-react-app/src/ColorPicker.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { ChromePicker, SketchPicker } from 'react-color'; 3 | 4 | const noop = () => { }; 5 | 6 | const pickers = { 7 | chrome: ChromePicker, 8 | sketch: SketchPicker, 9 | }; 10 | 11 | export default class ColorPicker extends Component { 12 | static defaultProps = { 13 | onChange: noop, 14 | onChangeComplete: noop, 15 | position: 'bottom', 16 | } 17 | 18 | constructor(props) { 19 | super(); 20 | this.state = { 21 | displayColorPicker: false, 22 | color: props.color, 23 | }; 24 | } 25 | componentWillReceiveProps(nextProps) { 26 | this.setState({ color: nextProps.color }); 27 | } 28 | handleClick = () => { 29 | this.setState({ displayColorPicker: !this.state.displayColorPicker }); 30 | }; 31 | handleClose = () => { 32 | this.setState({ displayColorPicker: false }); 33 | }; 34 | handleChange = (color) => { 35 | this.setState({ color: color.hex }); 36 | this.props.onChange(color.hex, color); 37 | }; 38 | handleChangeComplete = (color) => { 39 | this.setState({ color: color.hex }); 40 | this.props.onChangeComplete(color.hex); 41 | }; 42 | render() { 43 | const { small, type, position } = this.props; 44 | 45 | const Picker = pickers[type]; 46 | 47 | const styles = { 48 | color: { 49 | width: small ? '16px' : '120px', 50 | height: small ? '16px' : '24px', 51 | borderRadius: '2px', 52 | background: this.state.color, 53 | }, 54 | swatch: { 55 | padding: '4px', 56 | background: '#fff', 57 | borderRadius: '2px', 58 | boxShadow: '0 0 0 1px rgba(0,0,0,.1)', 59 | display: 'inline-block', 60 | cursor: 'pointer', 61 | }, 62 | popover: { 63 | position: 'absolute', 64 | zIndex: '2', 65 | }, 66 | cover: { 67 | position: 'fixed', 68 | top: '0px', 69 | right: '0px', 70 | bottom: '0px', 71 | left: '0px', 72 | }, 73 | wrapper: { 74 | position: 'inherit', 75 | zIndex: '100', 76 | }, 77 | }; 78 | 79 | if (position === 'top') { 80 | styles.wrapper.transform = 'translateY(-100%)'; 81 | styles.wrapper.paddingBottom = 8; 82 | } 83 | 84 | const swatch = ( 85 |
86 |
87 |
88 | ); 89 | const picker = this.state.displayColorPicker ? ( 90 |
91 |
92 |
93 | 99 |
100 |
101 | ) : null; 102 | 103 | if (position === 'top') { 104 | return
{picker}{swatch}
; 105 | } 106 | return
{swatch}{picker}
; 107 | } 108 | } 109 | -------------------------------------------------------------------------------- /examples/create-react-app/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /examples/create-react-app/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import { unregister } from './registerServiceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | unregister(); -------------------------------------------------------------------------------- /examples/create-react-app/src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/create-react-app/src/registerServiceWorker.js: -------------------------------------------------------------------------------- 1 | // In production, we register a service worker to serve assets from local cache. 2 | 3 | // This lets the app load faster on subsequent visits in production, and gives 4 | // it offline capabilities. However, it also means that developers (and users) 5 | // will only see deployed updates on the "N+1" visit to a page, since previously 6 | // cached resources are updated in the background. 7 | 8 | // To learn more about the benefits of this model, read https://goo.gl/KwvDNy. 9 | // This link also includes instructions on opting out of this behavior. 10 | 11 | const isLocalhost = Boolean( 12 | window.location.hostname === 'localhost' || 13 | // [::1] is the IPv6 localhost address. 14 | window.location.hostname === '[::1]' || 15 | // 127.0.0.1/8 is considered localhost for IPv4. 16 | window.location.hostname.match( 17 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ 18 | ) 19 | ); 20 | 21 | export default function register() { 22 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 23 | // The URL constructor is available in all browsers that support SW. 24 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location); 25 | if (publicUrl.origin !== window.location.origin) { 26 | // Our service worker won't work if PUBLIC_URL is on a different origin 27 | // from what our page is served on. This might happen if a CDN is used to 28 | // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374 29 | return; 30 | } 31 | 32 | window.addEventListener('load', () => { 33 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 34 | 35 | if (isLocalhost) { 36 | // This is running on localhost. Lets check if a service worker still exists or not. 37 | checkValidServiceWorker(swUrl); 38 | 39 | // Add some additional logging to localhost, pointing developers to the 40 | // service worker/PWA documentation. 41 | navigator.serviceWorker.ready.then(() => { 42 | console.log( 43 | 'This web app is being served cache-first by a service ' + 44 | 'worker. To learn more, visit https://goo.gl/SC7cgQ' 45 | ); 46 | }); 47 | } else { 48 | // Is not local host. Just register service worker 49 | registerValidSW(swUrl); 50 | } 51 | }); 52 | } 53 | } 54 | 55 | function registerValidSW(swUrl) { 56 | navigator.serviceWorker 57 | .register(swUrl) 58 | .then(registration => { 59 | registration.onupdatefound = () => { 60 | const installingWorker = registration.installing; 61 | installingWorker.onstatechange = () => { 62 | if (installingWorker.state === 'installed') { 63 | if (navigator.serviceWorker.controller) { 64 | // At this point, the old content will have been purged and 65 | // the fresh content will have been added to the cache. 66 | // It's the perfect time to display a "New content is 67 | // available; please refresh." message in your web app. 68 | console.log('New content is available; please refresh.'); 69 | } else { 70 | // At this point, everything has been precached. 71 | // It's the perfect time to display a 72 | // "Content is cached for offline use." message. 73 | console.log('Content is cached for offline use.'); 74 | } 75 | } 76 | }; 77 | }; 78 | }) 79 | .catch(error => { 80 | console.error('Error during service worker registration:', error); 81 | }); 82 | } 83 | 84 | function checkValidServiceWorker(swUrl) { 85 | // Check if the service worker can be found. If it can't reload the page. 86 | fetch(swUrl) 87 | .then(response => { 88 | // Ensure service worker exists, and that we really are getting a JS file. 89 | if ( 90 | response.status === 404 || 91 | response.headers.get('content-type').indexOf('javascript') === -1 92 | ) { 93 | // No service worker found. Probably a different app. Reload the page. 94 | navigator.serviceWorker.ready.then(registration => { 95 | registration.unregister().then(() => { 96 | window.location.reload(); 97 | }); 98 | }); 99 | } else { 100 | // Service worker found. Proceed as normal. 101 | registerValidSW(swUrl); 102 | } 103 | }) 104 | .catch(() => { 105 | console.log( 106 | 'No internet connection found. App is running in offline mode.' 107 | ); 108 | }); 109 | } 110 | 111 | export function unregister() { 112 | if ('serviceWorker' in navigator) { 113 | navigator.serviceWorker.ready.then(registration => { 114 | registration.unregister(); 115 | }); 116 | } 117 | } 118 | -------------------------------------------------------------------------------- /examples/create-react-app/src/styles/components/dashboard.less: -------------------------------------------------------------------------------- 1 | @import "../vars"; 2 | .dashboard { 3 | color: @heading-color; 4 | } 5 | 6 | .secondary { 7 | color: @secondary-color; 8 | } 9 | 10 | .component-container { 11 | padding: 10px; 12 | margin-bottom: 20px; 13 | } -------------------------------------------------------------------------------- /examples/create-react-app/src/styles/main.less: -------------------------------------------------------------------------------- 1 | @import "vars"; 2 | @import "./components/dashboard.less"; 3 | .logo { 4 | width: 120px; 5 | height: 31px; 6 | color: @heading-color; 7 | float: right; 8 | } 9 | 10 | .secondary-color { 11 | color: @secondary-color; 12 | background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAoCAYAAACWwljjAAAABGdBTUEAALGPC/xhBQAAAbtJREFUWAntmMtKw0AUhhMvS5cuxILgQlRUpIggIoKIIoigG1eC+AA+jo+i6FIXBfeuXIgoeKVeitVWJX5HWhhDksnUpp3FDPyZk3Nm5nycmZKkXhAEOXSA3lG7muTeRzmfy6HneUvIhnYkQK+Q9NhAA0Opg0vBEhjBKHiyb8iGMyQMOYuK41BcBSypAL+MYXSKjtFAW7EAGEO3qN4uMQbbAkXiSfRQJ1H6a+yhlkKRcAoVFYiweYNjtCVQJJpBz2GCiPt7fBOZQpFgDpUikse5HgnkM4Fi4QX0Fpc5wf9EbLqpUCy4jMoJSXWhFwbMNgWKhVbRhy5jirhs9fy/oFhgHVVTJEs7RLZ8sSEoJm6iz7SZDMbJ+/OKERQTttCXQRLToRUmrKWCYuA2+jbN0MB4OQobYShfdTCgn/sL1K36M7TLrN3n+758aPy2rrpR6+/od5E8tf/A1uLS9aId5T7J3CNYihkQ4D9PiMdMC7mp4rjB9kjFjZp8BlnVHJBuO1yFXIV0FdDF3RlyFdJVQBdv5AxVdIsq8apiZ2PyYO1EVykesGfZEESsCkweyR8MUW+V8uJ1gkYipmpdP1pm2aJVPEGzAAAAAElFTkSuQmCC) 13 | ~'100%/100%' no-repeat; 14 | background-image: url('https://i.picsum.photos/id/51/200/300.jpg'); 15 | } 16 | -------------------------------------------------------------------------------- /examples/create-react-app/src/styles/vars.less: -------------------------------------------------------------------------------- 1 | // This file will contain all varibales, our custom varibales and 2 | //those from Ant Design which we want to override. 3 | @import "~antd/lib/style/themes/default.less"; 4 | @secondry-color: #dddddd; 5 | @primary-color: #00375B; 6 | @text-color: #000000; 7 | @text-color-secondary: #eb2f96; 8 | // @heading-color: #ccccdd; 9 | @secondary-color: fade(@primary-color, 20%); 10 | @layout-header-background: #9e8989; 11 | @btn-primary-bg: #397dcc; 12 | @bg-color: #dddddd; 13 | @border-color-base: #ff0000; 14 | @white: #eeeeee; 15 | -------------------------------------------------------------------------------- /examples/customize-cra/.env: -------------------------------------------------------------------------------- 1 | SKIP_PREFLIGHT_CHECK=true 2 | PUBLIC_URL=/antd-theme-generator 3 | EXTEND_ESLINT=true -------------------------------------------------------------------------------- /examples/customize-cra/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "react-app", 3 | "rules": { 4 | "jsx-a11y/anchor-is-valid": 0, 5 | "jsx-a11y/anchor-has-content": 0 6 | } 7 | } -------------------------------------------------------------------------------- /examples/customize-cra/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /examples/customize-cra/README.md: -------------------------------------------------------------------------------- 1 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 2 | 3 | ## Available Scripts 4 | 5 | In the project directory, you can run: 6 | 7 | ### `yarn start` 8 | 9 | Runs the app in the development mode.
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits.
13 | You will also see any lint errors in the console. 14 | 15 | ### `yarn test` 16 | 17 | Launches the test runner in the interactive watch mode.
18 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 19 | 20 | ### `yarn build` 21 | 22 | Builds the app for production to the `build` folder.
23 | It correctly bundles React in production mode and optimizes the build for the best performance. 24 | 25 | The build is minified and the filenames include the hashes.
26 | Your app is ready to be deployed! 27 | 28 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 29 | 30 | ### `yarn eject` 31 | 32 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 33 | 34 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 35 | 36 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. 37 | 38 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. 39 | 40 | ## Learn More 41 | 42 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 43 | 44 | To learn React, check out the [React documentation](https://reactjs.org/). 45 | 46 | ### Code Splitting 47 | 48 | This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting 49 | 50 | ### Analyzing the Bundle Size 51 | 52 | This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size 53 | 54 | ### Making a Progressive Web App 55 | 56 | This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app 57 | 58 | ### Advanced Configuration 59 | 60 | This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration 61 | 62 | ### Deployment 63 | 64 | This section has moved here: https://facebook.github.io/create-react-app/docs/deployment 65 | 66 | ### `yarn build` fails to minify 67 | 68 | This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify 69 | -------------------------------------------------------------------------------- /examples/customize-cra/color.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const fs = require('fs'); 3 | const { generateTheme, getLessVars } = require('../../index'); 4 | // const { generateTheme, getLessVars } = require('../../../antd-theme-webpack-plugin/'); 5 | // const { generateTheme, getLessVars } = require('antd-theme-generator'); 6 | 7 | const themeVariables = getLessVars(path.join(__dirname, './src/styles/vars.less')) 8 | const defaultVars = getLessVars('./node_modules/antd/lib/style/themes/default.less') 9 | const darkVars = { ...getLessVars('./node_modules/antd/lib/style/themes/dark.less'), '@primary-color': defaultVars['@primary-color'], '@picker-basic-cell-active-with-range-color': 'darken(@primary-color, 20%)' }; 10 | const lightVars = { ...getLessVars('./node_modules/antd/lib/style/themes/compact.less'), '@primary-color': defaultVars['@primary-color'] }; 11 | fs.writeFileSync('./src/dark.json', JSON.stringify(darkVars)); 12 | fs.writeFileSync('./src/light.json', JSON.stringify(lightVars)); 13 | fs.writeFileSync('./src/theme.json', JSON.stringify(themeVariables)); 14 | 15 | 16 | const options = { 17 | stylesDir: path.join(__dirname, './src'), 18 | antDir: path.join(__dirname, './node_modules/antd'), 19 | varFile: path.join(__dirname, './src/styles/vars.less'), 20 | themeVariables: Array.from(new Set([ 21 | ...Object.keys(darkVars), 22 | ...Object.keys(lightVars), 23 | ...Object.keys(themeVariables), 24 | ])), 25 | outputFilePath: path.join(__dirname, './public/color.less'), 26 | } 27 | 28 | generateTheme(options).then(less => { 29 | console.log('Theme generated successfully'); 30 | }) 31 | .catch(error => { 32 | console.log('Error', error); 33 | }); -------------------------------------------------------------------------------- /examples/customize-cra/config-overrides.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | const fs = require("fs"); 3 | const { override, fixBabelImports, addLessLoader } = require('customize-cra'); 4 | // const AntDesignThemePlugin = require("antd-theme-webpack-plugin"); 5 | 6 | const options = { 7 | stylesDir: path.join(__dirname, "./src/styles"), 8 | antDir: path.join(__dirname, "./node_modules/antd"), 9 | varFile: path.join(__dirname, "./src/styles/vars.less"), 10 | mainLessFile: path.join(__dirname, "./src/styles/main.less"), 11 | themeVariables: [ 12 | "@primary-color", 13 | "@secondary-color", 14 | "@text-color", 15 | "@text-color-secondary", 16 | "@heading-color", 17 | "@layout-body-background", 18 | "@btn-primary-bg", 19 | "@layout-header-background", 20 | "@border-color-base", 21 | ], 22 | generateOnce: true, // generate color.less on each compilation 23 | }; 24 | 25 | 26 | module.exports = override( 27 | fixBabelImports('import', { 28 | libraryName: 'antd', 29 | libraryDirectory: 'es', 30 | style: true, 31 | }), 32 | addLessLoader({ 33 | javascriptEnabled: true, 34 | }), 35 | ); -------------------------------------------------------------------------------- /examples/customize-cra/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "customize-cra-sample", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "antd": "^4.7.0", 7 | "antd-theme-generator": "^1.2.10", 8 | "babel-plugin-import": "^1.13.0", 9 | "customize-cra": "^0.9.1", 10 | "less": "^3.11.1", 11 | "less-loader": "^5.0.0", 12 | "postcss": "^8.3.6", 13 | "react": "^16.13.1", 14 | "react-app-rewired": "^2.1.5", 15 | "react-color": "^2.18.1", 16 | "react-dom": "^16.13.1", 17 | "react-responsive": "^8.0.3", 18 | "react-scripts": "^3.4.3" 19 | }, 20 | "scripts": { 21 | "start": "node color.js && react-app-rewired start", 22 | "build": "react-app-rewired build", 23 | "test": "react-app-rewired test", 24 | "eject": "react-app-rewired eject", 25 | "color": "node color.js " 26 | }, 27 | "eslintConfig": { 28 | "extends": "react-app" 29 | }, 30 | "browserslist": [ 31 | ">0.2%", 32 | "not dead", 33 | "not ie <= 11", 34 | "not op_mini all" 35 | ] 36 | } 37 | -------------------------------------------------------------------------------- /examples/customize-cra/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mzohaibqc/antd-theme-generator/8287b590f9ae5c94fa07bfa92a772d57247cba27/examples/customize-cra/public/favicon.ico -------------------------------------------------------------------------------- /examples/customize-cra/public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mzohaibqc/antd-theme-generator/8287b590f9ae5c94fa07bfa92a772d57247cba27/examples/customize-cra/public/favicon.png -------------------------------------------------------------------------------- /examples/customize-cra/public/github.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/customize-cra/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | Antd Live Theme 28 | 29 | 30 | 31 | 37 | 38 | 39 |
40 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /examples/customize-cra/public/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Group 28 Copy 5 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 42 | 43 | -------------------------------------------------------------------------------- /examples/customize-cra/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mzohaibqc/antd-theme-generator/8287b590f9ae5c94fa07bfa92a772d57247cba27/examples/customize-cra/public/logo192.png -------------------------------------------------------------------------------- /examples/customize-cra/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mzohaibqc/antd-theme-generator/8287b590f9ae5c94fa07bfa92a772d57247cba27/examples/customize-cra/public/logo512.png -------------------------------------------------------------------------------- /examples/customize-cra/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 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /examples/customize-cra/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /examples/customize-cra/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /examples/customize-cra/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { 3 | Row, 4 | Col, 5 | Layout, 6 | Form, 7 | Select, 8 | message, 9 | Button, 10 | Spin, 11 | } from "antd"; 12 | import { 13 | ColorPreview, 14 | TypographyPreview, 15 | ButtonPreview, 16 | RadioPreview, 17 | CheckboxPreview, 18 | InputPreview, 19 | SwitchPreview, 20 | SliderPreview, 21 | DatePickerPreview, 22 | RatePreview, 23 | TransferPreview, 24 | TablePreview, 25 | TagPreview, 26 | ProgressPreview, 27 | TreePreview, 28 | PaginationPreview, 29 | BadgePreview, 30 | AlertPreview, 31 | SpinPreview, 32 | MessagePreview, 33 | NotificationPreview, 34 | TabsPreview, 35 | MenuPreview, 36 | TooltipPreview, 37 | PopoverPreview, 38 | CardPreview, 39 | CarouselPreview, 40 | CollapsePreview, 41 | AvatarPreview, 42 | DropdownPreview, 43 | StepPreview, 44 | CascaderPreview, 45 | SelectPreview, 46 | TreeSelectPreview, 47 | TimePickerPreview, 48 | CalendarPreview, 49 | ListPreview, 50 | TimelinePreview, 51 | PopconfirmPreview, 52 | ModalPreview, 53 | FormPreview 54 | } from './previews'; 55 | 56 | 57 | import { 58 | MenuFoldOutlined, MenuUnfoldOutlined, CloseOutlined 59 | } from '@ant-design/icons'; 60 | 61 | import Navbar from './Navbar'; 62 | import ColorPicker from "./ColorPicker"; 63 | import darkVars from './dark.json'; 64 | import lightVars from './light.json'; 65 | import './styles/main.less'; 66 | 67 | // eslint-disable jsx-a11y/anchor-has-content 68 | const { Footer, Content, Sider } = Layout; 69 | const FormItem = Form.Item; 70 | const Option = Select.Option; 71 | 72 | class App extends Component { 73 | constructor(props) { 74 | super(props); 75 | let initialValue = lightVars; 76 | let vars = {}; 77 | let themeName = localStorage.getItem("theme-name") || 'light'; 78 | 79 | try { 80 | vars = localStorage.getItem("app-theme"); 81 | if (!vars) { 82 | vars = initialValue; 83 | } else { 84 | vars = Object.assign( 85 | {}, 86 | JSON.parse(vars) 87 | ); 88 | } 89 | 90 | } catch (e) { 91 | vars = initialValue; 92 | } finally { 93 | this.state = { 94 | vars, initialValue, size: 'default', 95 | disabled: false, 96 | themeName, 97 | themeApplied: false, 98 | }; 99 | window.less 100 | .modifyVars(vars) 101 | .then(() => { 102 | this.setState({ themeApplied: true }); 103 | }) 104 | .catch(error => { 105 | message.error(`Failed to update theme`); 106 | }); 107 | } 108 | } 109 | 110 | handleSubmit = e => { 111 | e.preventDefault(); 112 | this.props.form.validateFields((err, values) => { 113 | if (!err) { 114 | console.log("Received values of form: ", values); 115 | } 116 | }); 117 | }; 118 | normFile = e => { 119 | console.log("Upload event:", e); 120 | if (Array.isArray(e)) { 121 | return e; 122 | } 123 | return e && e.fileList; 124 | }; 125 | onChangeComplete = (varName, color) => { 126 | const { vars } = this.state; 127 | vars[varName] = color; 128 | this.setState({ vars: { ...vars } }); 129 | }; 130 | handleColorChange = (varname, color) => { 131 | const vars = { ...this.state.vars }; 132 | if (varname) vars[varname] = color; 133 | console.log(vars); 134 | window.less 135 | .modifyVars(vars) 136 | .then(() => { 137 | // message.success(`Theme updated successfully`); 138 | this.setState({ vars }); 139 | localStorage.setItem("app-theme", JSON.stringify(vars)); 140 | }) 141 | .catch(error => { 142 | message.error(`Failed to update theme`); 143 | }); 144 | }; 145 | 146 | getColorPicker = (varName, position) => ( 147 | 148 | 149 | this.handleColorChange(varName, color)} 169 | /> 170 | 171 | {varName} 172 | 173 | ); 174 | resetTheme = () => { 175 | localStorage.setItem("app-theme", "{}"); 176 | localStorage.setItem("theme-name", 'light'); 177 | this.setState({ themeName: 'light' }); 178 | this.setState({ vars: this.state.initialValue }); 179 | window.less.modifyVars(this.state.initialValue).catch(error => { 180 | message.error(`Failed to reset theme`); 181 | }); 182 | }; 183 | 184 | onCollapse = collapsed => { 185 | this.setState({ collapsed }); 186 | console.log('onCollapse', collapsed); 187 | } 188 | 189 | render() { 190 | const { collapsed, size, disabled, themeApplied } = this.state; 191 | const colorPickerOptions = ["@primary-color", "@secondary-color", "@text-color", "@text-color-secondary", "@heading-color", "@layout-header-background", "@btn-primary-bg"]; 192 | // const colorPickers = Object.keys(this.state.vars).filter(name => colorPickerOptions.indexOf(name) > -1).map((varName, index) => 193 | const colorPickers = colorPickerOptions.map((varName, index) => 194 | this.getColorPicker(varName, index > 3 ? 'top' : 'right') 195 | ); 196 | 197 | const themeLayout = { 198 | labelCol: { span: 24 }, 199 | wrapperCol: { span: 24 } 200 | }; 201 | 202 | if (!themeApplied) { 203 | return ( 204 | 205 | 206 | 207 | ) 208 | } 209 | return ( 210 | 211 | 212 | 213 | 214 | { 220 | console.log(broken); 221 | this.onCollapse(broken); 222 | }} 223 | onCollapse={this.onCollapse} 224 | > 225 | 226 | {collapsed ? this.onCollapse(!collapsed)} /> : this.onCollapse(!collapsed)} />} 227 | 228 | 229 | {!collapsed && ( 230 | 235 | 236 | 254 | 255 | 256 | )} 257 | 258 | 259 | {colorPickers} 260 | 261 | 264 | 265 | 266 | 267 | 268 |
269 | 270 | 271 | 272 | 273 | 274 | 275 | 276 | 277 | 278 | 279 | 280 | 281 | 282 | 283 | 284 | 285 | 286 | 287 | 288 | 289 | 290 | 291 | 292 | 293 | 294 | 295 | 296 | 297 | 298 | 299 | 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | 309 | 310 |
311 | 312 | 313 | 314 |
315 | Ant Design Live Theme ©2018 Created by Zohaib Ijaz (mzohaibqc) 316 |
317 | 318 | ); 319 | } 320 | } 321 | 322 | export default App; 323 | -------------------------------------------------------------------------------- /examples/customize-cra/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | const { getByText } = render(); 7 | const linkElement = getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /examples/customize-cra/src/ColorPicker.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { ChromePicker, SketchPicker } from 'react-color'; 3 | 4 | const noop = () => { }; 5 | 6 | const pickers = { 7 | chrome: ChromePicker, 8 | sketch: SketchPicker, 9 | }; 10 | 11 | export default class ColorPicker extends Component { 12 | static defaultProps = { 13 | onChange: noop, 14 | onChangeComplete: noop, 15 | position: 'bottom', 16 | } 17 | 18 | constructor(props) { 19 | super(); 20 | this.state = { 21 | displayColorPicker: false, 22 | color: props.color, 23 | }; 24 | } 25 | componentWillReceiveProps(nextProps) { 26 | this.setState({ color: nextProps.color }); 27 | } 28 | handleClick = () => { 29 | this.setState({ displayColorPicker: !this.state.displayColorPicker }); 30 | }; 31 | handleClose = () => { 32 | this.setState({ displayColorPicker: false }); 33 | }; 34 | handleChange = (color) => { 35 | this.setState({ color: color.hex }); 36 | this.props.onChange(color.hex, color); 37 | }; 38 | handleChangeComplete = (color) => { 39 | this.setState({ color: color.hex }); 40 | this.props.onChangeComplete(color.hex); 41 | }; 42 | render() { 43 | const { small, type, position } = this.props; 44 | 45 | const Picker = pickers[type]; 46 | 47 | const styles = { 48 | color: { 49 | width: small ? '16px' : '120px', 50 | height: small ? '16px' : '24px', 51 | borderRadius: '2px', 52 | background: this.state.color, 53 | }, 54 | swatch: { 55 | padding: '4px', 56 | background: '#fff', 57 | borderRadius: '2px', 58 | boxShadow: '0 0 0 1px rgba(0,0,0,.1)', 59 | display: 'inline-block', 60 | cursor: 'pointer', 61 | }, 62 | popover: { 63 | position: 'absolute', 64 | zIndex: '2', 65 | }, 66 | cover: { 67 | position: 'fixed', 68 | top: '0px', 69 | right: '0px', 70 | bottom: '0px', 71 | left: '0px', 72 | }, 73 | wrapper: { 74 | position: 'inherit', 75 | zIndex: '100', 76 | }, 77 | }; 78 | 79 | if (position === 'top') { 80 | styles.wrapper.transform = 'translateY(-100%)'; 81 | styles.wrapper.paddingBottom = 8; 82 | } 83 | 84 | const swatch = ( 85 |
86 |
87 |
88 | ); 89 | const picker = this.state.displayColorPicker ? ( 90 |
91 |
92 |
93 | 99 |
100 |
101 | ) : null; 102 | 103 | if (position === 'top') { 104 | return
{picker}{swatch}
; 105 | } 106 | return
{swatch}{picker}
; 107 | } 108 | } 109 | -------------------------------------------------------------------------------- /examples/customize-cra/src/Menus.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { BuildOutlined, LaptopOutlined, NotificationOutlined } from '@ant-design/icons'; 3 | import { Menu } from 'antd'; 4 | 5 | const { SubMenu } = Menu; 6 | 7 | class Menus extends Component { 8 | render() { 9 | const { dark } = this.props; 10 | 11 | return ( 12 | 19 | Color 20 | Typography 21 | {/* 25 | Base 26 | 27 | } 28 | > 29 | Color 30 | Typography 31 | */} 32 | 36 | Form 37 | 38 | } 39 | > 40 | Button 41 | Radio 42 | Checkbox 43 | Input 44 | Select 45 | TreeSelect 46 | Cascader 47 | Switch 48 | DatePicker 49 | TimePicker 50 | Slider 51 | Dropdown 52 | Rate 53 | Steps 54 | Transfer 55 | Form 56 | 57 | 61 | View 62 | 63 | } 64 | > 65 | Menu 66 | Tabs 67 | Table 68 | Pagination 69 | Progress 70 | Tree 71 | Card 72 | List 73 | Calendar 74 | Avatar 75 | Spin 76 | Collapse 77 | Carousel 78 | Timeline 79 | 80 | 84 | Hint 85 | 86 | } 87 | > 88 | Badge 89 | Alert 90 | Message 91 | Notification 92 | Tag 93 | Tooltip 94 | Popover 95 | Modal 96 | Popconfirm 97 | 98 | 99 | ); 100 | } 101 | } 102 | 103 | export default Menus; 104 | -------------------------------------------------------------------------------- /examples/customize-cra/src/Navbar/index.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { Layout, Menu, Drawer, Icon } from 'antd'; 3 | import { Mobile, Default } from '../Responsive'; 4 | 5 | import './index.less'; 6 | 7 | const { Header } = Layout; 8 | 9 | 10 | const Navbar = props => { 11 | const [visible, setVisible] = useState(false); 12 | const menu = ( 13 | 19 | Home 20 | About 21 | Contact 22 | 23 | ); 24 | 25 | return ( 26 |
27 |
Antd Live Theme
28 | {menu} 29 | 30 | setVisible(true)} /> 31 | setVisible(false)} 36 | visible={visible} 37 | className="nav-drawer" 38 | > 39 |
Antd Live Theme
40 | {menu} 41 | 42 | 43 |
44 | ); 45 | }; 46 | 47 | export default Navbar; 48 | -------------------------------------------------------------------------------- /examples/customize-cra/src/Navbar/index.less: -------------------------------------------------------------------------------- 1 | @import "../styles/vars"; 2 | 3 | body { 4 | margin: 0; 5 | * { 6 | &::-webkit-scrollbar-track { 7 | -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); 8 | background-color: #f5f5f5; 9 | border-radius: 10px; 10 | } 11 | 12 | &::-webkit-scrollbar { 13 | width: 10px; 14 | background-color: #f5f5f5; 15 | } 16 | 17 | &::-webkit-scrollbar-thumb { 18 | background-color: #696969; 19 | border-radius: 10px; 20 | background-image: -webkit-linear-gradient( 21 | 0deg, 22 | rgba(255, 255, 255, 0.5) 25%, 23 | transparent 25%, 24 | transparent 50%, 25 | rgba(255, 255, 255, 0.5) 50%, 26 | rgba(255, 255, 255, 0.5) 75%, 27 | transparent 75%, 28 | transparent 29 | ); 30 | } 31 | } 32 | 33 | } 34 | 35 | 36 | .secondary-color { 37 | color: @secondary-color; 38 | } 39 | 40 | .app-header { 41 | .nav-icon { 42 | color: #fff; 43 | font-size: 30px; 44 | float: right; 45 | margin-top: 18px; 46 | cursor: pointer; 47 | } 48 | .ant-menu-horizontal { 49 | float: right; 50 | } 51 | } 52 | 53 | .nav-drawer { 54 | .ant-drawer-content { 55 | background-color: @menu-dark-bg; 56 | .ant-drawer-close { 57 | display: none; 58 | } 59 | .ant-drawer-body { 60 | padding: 0; 61 | .logo { 62 | width: 160px; 63 | height: 31px; 64 | float: left; 65 | color: #ffffff; 66 | font-size: 18px; 67 | width: 100%; 68 | height: 63px; 69 | padding: 16px; 70 | text-align: center; 71 | } 72 | } 73 | } 74 | 75 | } -------------------------------------------------------------------------------- /examples/customize-cra/src/Responsive.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Responsive from 'react-responsive'; 3 | 4 | const XXL = props => ; 5 | const XL = props => ; 6 | const Desktop = props => ; 7 | const Tablet = props => ; 8 | const Mobile = props => ; 9 | const Default = props => ; 10 | 11 | export { 12 | XXL, 13 | XL, 14 | Desktop, 15 | Tablet, 16 | Mobile, 17 | Default 18 | }; 19 | -------------------------------------------------------------------------------- /examples/customize-cra/src/component/ColorPicker/index.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { Popover } from 'antd'; 3 | import { ChromePicker, SketchPicker } from 'react-color'; 4 | import './style.less'; 5 | 6 | const noop = () => { }; 7 | 8 | const pickers = { 9 | chrome: ChromePicker, 10 | sketch: SketchPicker 11 | }; 12 | 13 | export default class ColorPicker extends Component { 14 | static defaultProps = { 15 | onChange: noop, 16 | onChangeComplete: noop, 17 | position: 'bottom' 18 | } 19 | 20 | constructor(props) { 21 | super(); 22 | this.state = { 23 | color: props.color 24 | }; 25 | } 26 | 27 | componentWillReceiveProps(nextProps) { 28 | this.setState({ color: nextProps.color }); 29 | } 30 | 31 | handleChange = (color) => { 32 | this.setState({ color: color.hex }); 33 | this.props.onChange(color.hex, color); 34 | }; 35 | 36 | handleChangeComplete = (color) => { 37 | this.setState({ color: color.hex }); 38 | this.props.onChangeComplete(color.hex); 39 | }; 40 | 41 | render() { 42 | const { small, type } = this.props; 43 | 44 | const Picker = pickers[type]; 45 | 46 | const styles = { 47 | color: { 48 | width: small ? '16px' : '120px', 49 | height: small ? '16px' : '24px', 50 | borderRadius: '2px', 51 | background: this.state.color 52 | }, 53 | swatch: { 54 | padding: '4px', 55 | background: '#fff', 56 | borderRadius: '2px', 57 | boxShadow: '0 0 0 1px rgba(0,0,0,.1)', 58 | display: 'inline-block', 59 | cursor: 'pointer' 60 | } 61 | }; 62 | 63 | const swatch = ( 64 |
65 |
66 |
67 | ); 68 | const picker = ( 69 | 75 | ); 76 | 77 | return ( 78 | 84 | {swatch} 85 | 86 | ); 87 | } 88 | } 89 | -------------------------------------------------------------------------------- /examples/customize-cra/src/component/ColorPicker/style.less: -------------------------------------------------------------------------------- 1 | .color-popover { 2 | .ant-popover-inner-content { 3 | padding: 0; 4 | } 5 | } -------------------------------------------------------------------------------- /examples/customize-cra/src/component/Loading/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { LoadingOutlined } from '@ant-design/icons'; 3 | import { Modal } from 'antd'; 4 | 5 | const Loading = ({ pastDelay, timedOut, error }) => { 6 | if (pastDelay) { 7 | return ( 8 | 16 | 17 |

Loading...

18 | 19 | ); 20 | } else if (timedOut) { 21 | return
Taking a long time...
; 22 | } else if (error) { 23 | return
Error!
; 24 | } 25 | return null; 26 | }; 27 | 28 | export default Loading; 29 | -------------------------------------------------------------------------------- /examples/customize-cra/src/component/ThemeCard/style.less: -------------------------------------------------------------------------------- 1 | .theme-card { 2 | width: 320px; 3 | height: 100%; 4 | position: relative; 5 | 6 | .toggle { 7 | padding: 2px 4px; 8 | position: absolute; 9 | top: -14px; 10 | left: 20px; 11 | z-index: 1000; 12 | background: white; 13 | border: 1px solid #e8e8e8; 14 | 15 | .btn-toggle { 16 | width: 20px; 17 | } 18 | } 19 | 20 | .ant-card { 21 | display: flex; 22 | flex-direction: column; 23 | height: 100%; 24 | // overflow: hidden; 25 | 26 | &.hide { 27 | display: none; 28 | } 29 | 30 | // .ant-card-head { 31 | // cursor: cell; 32 | // } 33 | 34 | [class*="-card-body"] { 35 | flex: 1; 36 | overflow: auto; 37 | 38 | .search-fileds { 39 | padding: 18px 8px; 40 | } 41 | } 42 | 43 | .theme-card-title { 44 | display: flex; 45 | justify-content: space-between; 46 | align-items: center; 47 | } 48 | } 49 | } -------------------------------------------------------------------------------- /examples/customize-cra/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /examples/customize-cra/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById('root') 12 | ); 13 | 14 | // If you want your app to work offline and load faster, you can change 15 | // unregister() to register() below. Note this comes with some pitfalls. 16 | // Learn more about service workers: https://bit.ly/CRA-PWA 17 | serviceWorker.unregister(); 18 | -------------------------------------------------------------------------------- /examples/customize-cra/src/light.json: -------------------------------------------------------------------------------- 1 | {"@line-height-base":"1.66667","@mode":"compact","@font-size-base":"12px","@font-size-lg":"@font-size-base + 2px","@default-padding-lg":"24px","@default-padding-md":"16px","@default-padding-sm":"12px","@default-padding-xs":"8px","@default-padding-xss":"4px","@padding-lg":"16px","@padding-md":"8px","@padding-sm":"8px","@padding-xs":"4px","@padding-xss":"0px","@control-padding-horizontal":"@padding-sm","@control-padding-horizontal-sm":"@default-padding-xs","@margin-lg":"16px","@margin-md":"8px","@margin-sm":"8px","@margin-xs":"4px","@margin-xss":"0px","@height-base":"28px","@height-lg":"32px","@height-sm":"22px","@btn-padding-horizontal-base":"@default-padding-sm - 1px","@btn-padding-horizontal-lg":"@btn-padding-horizontal-base","@btn-padding-horizontal-sm":"@default-padding-xs - 1px","@btn-square-only-icon-size-lg":"16px","@btn-square-only-icon-size":"14px","@btn-square-only-icon-size-sm":"12px","@breadcrumb-font-size":"@font-size-base","@breadcrumb-icon-font-size":"@font-size-base","@dropdown-line-height":"18px","@menu-item-padding":"0 12px","@menu-horizontal-line-height":"38px","@menu-inline-toplevel-item-height":"32px","@menu-item-height":"32px","@menu-item-vertical-margin":"0px","@menu-item-boundary-margin":"0px","@menu-icon-margin-right":"8px","@checkbox-size":"14px","@checkbox-group-item-margin-right":"6px","@picker-panel-cell-height":"22px","@picker-panel-cell-width":"32px","@picker-text-height":"32px","@picker-time-panel-cell-height":"24px","@picker-panel-without-time-cell-height":"48px","@form-item-margin-bottom":"16px","@form-vertical-label-padding":"0 0 4px","@rate-star-size":"16px","@radio-size":"14px","@radio-top":"-2px","@radio-wrapper-margin-right":"6px","@switch-height":"20px","@switch-sm-height":"14px","@switch-min-width":"40px","@switch-sm-min-width":"24px","@switch-inner-margin-min":"4px","@switch-inner-margin-max":"22px","@slider-handle-size":"12px","@slider-handle-margin-top":"-4px","@input-padding-vertical-base":"round(\n max(\n round((@input-height-base - @font-size-base * @line-height-base) / 2 * 10) / 10 -\n @border-width-base,\n 2px\n )\n)","@input-padding-horizontal-lg":"11px","@page-header-padding":"16px","@page-header-padding-vertical":"8px","@page-header-heading-title":"16px","@page-header-heading-sub-title":"12px","@page-header-tabs-tab-font-size":"14px","@pagination-mini-options-size-changer-top":"1px","@pagination-item-size-sm":"22px","@cascader-dropdown-line-height":"@dropdown-line-height","@select-dropdown-height":"@height-base","@select-single-item-height-lg":"32px","@select-multiple-item-height":"@input-height-base - max(@input-padding-vertical-base, 4) * 2","@select-multiple-item-height-lg":"24px","@select-multiple-item-spacing-half":"3px","@tree-title-height":"20px","@transfer-item-padding-vertical":"3px","@transfer-list-search-icon-top":"8px","@transfer-header-height":"36px","@comment-actions-margin-bottom":"0px","@comment-actions-margin-top":"@margin-xs","@comment-content-detail-p-margin-bottom":"0px","@steps-icon-size":"24px","@steps-icon-custom-size":"20px","@steps-icon-custom-font-size":"20px","@steps-icon-custom-top":"2px","@steps-icon-margin":"2px 8px 2px 0","@steps-icon-font-size":"@font-size-base","@steps-dot-top":"4px","@steps-icon-top":"0px","@steps-small-icon-size":"20px","@steps-vertical-icon-width":"12px","@steps-vertical-tail-width":"12px","@steps-vertical-tail-width-sm":"10px","@collapse-header-padding-extra":"32px","@collapse-content-padding":"@padding-md @padding-lg","@list-item-meta-description-font-size":"@font-size-sm","@list-item-padding-sm":"4px 12px","@list-item-padding-lg":"12px 16px","@drawer-header-padding":"11px @padding-lg","@drawer-footer-padding-vertical":"@padding-sm","@drawer-header-close-size":"44px","@modal-header-padding":"11px @modal-header-padding-horizontal","@modal-footer-padding-vertical":"@padding-sm","@modal-header-close-size":"44px","@modal-confirm-body-padding":"24px 24px 16px","@message-notice-content-padding":"8px 16px","@popover-min-height":"28px","@popover-padding-horizontal":"@default-padding-sm","@card-padding-base":"12px","@card-head-height":"36px","@card-head-font-size":"@card-head-font-size-sm","@card-head-padding":"8.5px","@card-padding-base-sm":"@card-padding-base","@card-head-height-sm":"30px","@card-head-padding-sm":"6px","@card-actions-li-margin":"4px 0","@card-head-tabs-margin-bottom":"-9px","@table-padding-vertical":"12px","@table-padding-horizontal":"8px","@table-padding-vertical-md":"8px","@table-padding-horizontal-md":"8px","@table-padding-vertical-sm":"4px","@table-padding-horizontal-sm":"4px","@table-selection-column-width":"54px","@statistic-content-font-size":"20px","@alert-with-description-no-icon-padding-vertical":"7px","@alert-with-description-padding-vertical":"11px","@alert-with-description-padding":"@alert-with-description-padding-vertical 15px\n @alert-with-description-no-icon-padding-vertical @alert-with-description-icon-size * 2 +\n @alert-with-description-padding-vertical","@alert-icon-top":"7px + @font-size-base * @line-height-base / 2 - @font-size-base / 2","@alert-with-description-icon-size":"20px","@alert-with-description-icon-top":"@alert-with-description-padding-vertical","@skeleton-paragraph-margin-top":"20px","@skeleton-paragraph-li-margin-top":"12px","@skeleton-paragraph-li-height":"14px","@skeleton-title-height":"14px","@skeleton-title-paragraph-margin-top":"20px","@descriptions-title-margin-bottom":"8px","@descriptions-default-padding":"12px @padding-lg","@descriptions-item-padding-bottom":"@padding-xs","@avatar-size-base":"28px","@avatar-size-lg":"32px","@avatar-size-sm":"22px","@avatar-font-size-base":"16px","@avatar-font-size-lg":"20px","@avatar-font-size-sm":"12px","@badge-height":"18px","@tag-line-height":"18px","@notification-padding-vertical":"12px","@notification-padding-horizontal":"16px","@result-title-font-size":"20px","@result-icon-font-size":"64px","@result-extra-margin":"24px 0 0 0","@anchor-link-top":"4px","@anchor-link-left":"16px","@anchor-link-padding":"@anchor-link-top 0 @anchor-link-top @anchor-link-left","@tabs-card-horizontal-padding":"4px @padding-md","@progress-circle-text-font-size":"0.833333em","@image-size-base":"48px","@image-font-size-base":"24px","@primary-color":"@blue-6"} -------------------------------------------------------------------------------- /examples/customize-cra/src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/customize-cra/src/previews/AlertPreview/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Alert } from 'antd'; 3 | import PreviewWrapper from '../PreviewWrapper'; 4 | // import './style.less'; 5 | 6 | const AlertPreview = ({ size, disabled }) => ( 7 | 8 |
9 |
10 | 11 |
12 |
13 | 14 |
15 |
16 | 17 |
18 |
19 | 20 |
21 |
22 | 31 |
32 |
33 | 42 |
43 |
44 | 53 |
54 |
55 | 64 |
65 |
66 | 67 | ); 68 | 69 | export default AlertPreview; 70 | -------------------------------------------------------------------------------- /examples/customize-cra/src/previews/AvatarPreview/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { UserOutlined } from '@ant-design/icons'; 3 | import { Avatar } from 'antd'; 4 | import PreviewWrapper from '../PreviewWrapper'; 5 | // import './style.less'; 6 | 7 | const AvatarPreview = ({ size }) => ( 8 | 9 |
10 |
11 |
12 | } /> 13 |
14 |
15 | } /> 16 |
17 |
18 |
19 |
20 | } /> 21 |
22 |
23 | U 24 |
25 |
26 | USER 27 |
28 |
29 | 30 |
31 |
32 | U 33 |
34 |
35 | } /> 36 |
37 |
38 |
39 | 40 | ); 41 | 42 | export default AvatarPreview; 43 | -------------------------------------------------------------------------------- /examples/customize-cra/src/previews/BadgePreview/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ClockCircleOutlined } from '@ant-design/icons'; 3 | import { Badge } from 'antd'; 4 | import PreviewWrapper from '../PreviewWrapper'; 5 | // import './style.less'; 6 | 7 | /* eslint-disable jsx-a11y/anchor-has-content */ 8 | 9 | const BadgePreview = ({ size, disabled }) => ( 10 | 11 | 88 | 89 | ); 90 | 91 | export default BadgePreview; 92 | -------------------------------------------------------------------------------- /examples/customize-cra/src/previews/ButtonPreview/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { DownloadOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons'; 3 | import { Button } from 'antd'; 4 | import PreviewWrapper from '../PreviewWrapper'; 5 | // import './style.less'; 6 | 7 | const ButtonPreview = ({ size, disabled }) => ( 8 | 9 |
10 |
11 |
12 | 13 |
14 |
15 | 16 |
17 |
18 | 19 |
20 |
21 | 22 |
23 |
24 | 25 |
26 |
27 |
28 |
29 | 30 |
31 |
32 | 33 |
34 |
35 | 36 |
37 |
38 | 39 |
40 |
41 | 42 |
43 |
44 |
45 |
46 |
48 |
49 |
51 |
52 | 53 |
54 |
55 | 56 |
57 |
58 |
59 | 60 | 64 | 68 | 69 |
70 |
71 | 72 | ); 73 | 74 | export default ButtonPreview; 75 | -------------------------------------------------------------------------------- /examples/customize-cra/src/previews/CalendarPreview/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Calendar, Badge } from 'antd'; 3 | import PreviewWrapper from '../PreviewWrapper'; 4 | import './style.less'; 5 | 6 | function getListData(value) { 7 | let listData; 8 | switch (value.date()) { 9 | case 8: 10 | listData = [ 11 | { type: 'warning', content: 'This is warning event.' }, 12 | { type: 'success', content: 'This is usual event.' } 13 | ]; 14 | break; 15 | case 10: 16 | listData = [ 17 | { type: 'warning', content: 'This is warning event.' }, 18 | { type: 'success', content: 'This is usual event.' }, 19 | { type: 'error', content: 'This is error event.' } 20 | ]; 21 | break; 22 | case 15: 23 | listData = [ 24 | { type: 'warning', content: 'This is warning event' }, 25 | { type: 'success', content: 'This is very long usual event。。....' }, 26 | { type: 'error', content: 'This is error event 1.' }, 27 | { type: 'error', content: 'This is error event 2.' }, 28 | { type: 'error', content: 'This is error event 3.' }, 29 | { type: 'error', content: 'This is error event 4.' } 30 | ]; 31 | break; 32 | default: 33 | } 34 | return listData || []; 35 | } 36 | 37 | function dateCellRender(value) { 38 | const listData = getListData(value); 39 | return ( 40 |
    41 | {listData.map(item => ( 42 |
  • 43 | 44 |
    • 45 | ))} 46 |
47 | ); 48 | } 49 | 50 | function getMonthData(value) { 51 | if (value.month() === 8) { 52 | return 1394; 53 | } 54 | } 55 | 56 | function monthCellRender(value) { 57 | const num = getMonthData(value); 58 | return num ? ( 59 |
60 |
{num}
61 | Backlog number 62 |
63 | ) : null; 64 | } 65 | 66 | const CalendarPreview = ({ size, disabled }) => ( 67 | 68 |
69 |
70 | 76 |
77 |
78 | 83 |
84 |
85 | 86 | ); 87 | 88 | export default CalendarPreview; 89 | -------------------------------------------------------------------------------- /examples/customize-cra/src/previews/CalendarPreview/style.less: -------------------------------------------------------------------------------- 1 | .components { 2 | &.calendar { 3 | .events { 4 | list-style: none; 5 | margin: 0; 6 | padding: 0; 7 | } 8 | .events .ant-badge-status { 9 | overflow: hidden; 10 | white-space: nowrap; 11 | width: 100%; 12 | text-overflow: ellipsis; 13 | font-size: 12px; 14 | } 15 | .notes-month { 16 | text-align: center; 17 | font-size: 28px; 18 | } 19 | .notes-month section { 20 | font-size: 28px; 21 | } 22 | } 23 | } -------------------------------------------------------------------------------- /examples/customize-cra/src/previews/CardPreview/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { EditOutlined, EllipsisOutlined, SettingOutlined } from '@ant-design/icons'; 3 | import { Card, Avatar } from 'antd'; 4 | import PreviewWrapper from '../PreviewWrapper'; 5 | // import './style.less'; 6 | 7 | const { Meta } = Card; 8 | 9 | const CardPreview = ({ size }) => ( 10 | 11 |
12 |
13 |
14 | More} style={{ width: 300 }}> 15 |

Card content

16 |

Card content

17 |

Card content

18 | 19 |
20 |
21 | More} style={{ width: 300 }}> 22 |

Card content

23 |

Card content

24 |

Card content

25 | 26 |
27 |
28 |
29 |
30 | 37 | } 38 | actions={[ 39 | , 40 | , 41 | 42 | ]} 43 | > 44 | } 46 | title="Card title" 47 | description="This is the description" 48 | /> 49 | 50 |
51 |
52 | 53 | 56 | } 57 | title="Card title" 58 | description="This is the description" 59 | /> 60 | 61 |
62 |
63 |
64 | 65 | ); 66 | 67 | export default CardPreview; 68 | -------------------------------------------------------------------------------- /examples/customize-cra/src/previews/CarouselPreview/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Carousel } from 'antd'; 3 | import PreviewWrapper from '../PreviewWrapper'; 4 | import './style.less'; 5 | 6 | const CarouselPreview = () => ( 7 | 8 |
9 |
10 | 11 |
12 |

1

13 |
14 |
15 |

2

16 |
17 |
18 |

3

19 |
20 |
21 |

4

22 |
23 | 24 |
25 |
26 | 27 | ); 28 | 29 | export default CarouselPreview; 30 | -------------------------------------------------------------------------------- /examples/customize-cra/src/previews/CarouselPreview/style.less: -------------------------------------------------------------------------------- 1 | .ant-carousel .slick-slide { 2 | text-align: center; 3 | height: 160px; 4 | line-height: 160px; 5 | // background: #364d79; 6 | overflow: hidden; 7 | } 8 | 9 | // .ant-carousel .slick-slide h3 { 10 | // color: #fff; 11 | // } -------------------------------------------------------------------------------- /examples/customize-cra/src/previews/CascaderPreview/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Cascader } from 'antd'; 3 | import PreviewWrapper from '../PreviewWrapper'; 4 | 5 | const options = [ 6 | { 7 | value: 'zhejiang', 8 | label: 'Zhejiang', 9 | children: [ 10 | { 11 | value: 'hangzhou', 12 | label: 'Hangzhou', 13 | children: [ 14 | { 15 | value: 'xihu', 16 | label: 'West Lake' 17 | } 18 | ] 19 | } 20 | ] 21 | }, 22 | { 23 | value: 'jiangsu', 24 | label: 'Jiangsu', 25 | disabled: true, 26 | children: [ 27 | { 28 | value: 'nanjing', 29 | label: 'Nanjing', 30 | children: [ 31 | { 32 | value: 'zhonghuamen', 33 | label: 'Zhong Hua Men' 34 | } 35 | ] 36 | } 37 | ] 38 | } 39 | ]; 40 | 41 | const CascaderPreview = ({ size, disabled }) => ( 42 | 43 |
44 |
45 | 46 |
47 |
48 | 49 | ); 50 | 51 | export default CascaderPreview; 52 | -------------------------------------------------------------------------------- /examples/customize-cra/src/previews/CheckboxPreview/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Checkbox } from 'antd'; 3 | import PreviewWrapper from '../PreviewWrapper'; 4 | // import './style.less'; 5 | 6 | const CheckboxPreview = ({ size, disabled }) => ( 7 | 8 |
9 |
10 | 11 | Apple 12 | Pear 13 | Orange 14 | Banana 15 | 16 |
17 |
18 | 19 | ); 20 | 21 | export default CheckboxPreview; 22 | -------------------------------------------------------------------------------- /examples/customize-cra/src/previews/CollapsePreview/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Collapse } from 'antd'; 3 | import PreviewWrapper from '../PreviewWrapper'; 4 | 5 | const { Panel } = Collapse; 6 | 7 | const text = ` 8 | A dog is a type of domesticated animal. 9 | Known for its loyalty and faithfulness, 10 | it can be found as a welcome guest in many households across the world. 11 | `; 12 | 13 | const text1 = ( 14 |

15 | A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found 16 | as a welcome guest in many households across the world. 17 |

18 | ); 19 | 20 | const CollapsePreview = ({ disabled }) => ( 21 | 22 |
23 |
24 | { }}> 25 | 26 |

{text}

27 | 28 | 29 |

{text}

30 | 31 | 32 |

{text}

33 | 34 | 35 |
36 |
37 | 38 | 39 |

{text1}

40 | 41 | 42 |

{text1}

43 | 44 | 45 |

{text1}

46 | 47 | 48 |
49 |
50 | 51 | ); 52 | 53 | export default CollapsePreview; 54 | -------------------------------------------------------------------------------- /examples/customize-cra/src/previews/ColorPreview/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PreviewWrapper from '../PreviewWrapper'; 3 | import './style.less'; 4 | 5 | const ColorPreview = () => ( 6 | 7 |
8 |
9 |
10 |
11 |
@primary-color
12 |
13 |
14 |
15 |
16 |
--PC: @primary-color;
17 |
18 |
19 |
20 |
21 |
@success-color
22 |
23 |
24 |
25 |
26 |
@info-color
27 |
28 |
29 |
30 |
31 |
@warning-color
32 |
33 |
34 |
35 |
36 |
@error-color
37 |
38 |
39 |
40 |
41 |
@highlight-color
42 |
43 |
44 |
45 |
46 |
47 |
48 |
@body-background
49 |
50 |
51 |
52 |
53 |
@component-background
54 |
55 |
56 |
57 |
58 |
@layout-header-background
59 |
60 |
61 |
62 |
63 |
@layout-body-background
64 |
65 |
66 |
67 |
68 |
@layout-footer-background
69 |
70 |
71 |
72 |
73 |
@border-color-base
74 |
75 |
76 |
77 |
78 |
@border-color-split
79 |
80 |
81 |
82 |
83 |
84 |
85 |
@link-color
86 |
87 |
88 |
89 |
90 |
@disabled-color
91 |
92 |
93 |
94 |
95 |
@disabled-bg
96 |
97 |
98 |
99 |
100 |
@processing-color
101 |
102 |
103 |
104 |
105 |
@icon-color
106 |
107 |
108 |
109 |
110 |
@icon-color-hover
111 |
112 |
113 |
114 |
115 |
116 |
117 |
@heading-color
118 |
119 |
120 |
121 |
122 |
@text-color
123 |
124 |
125 |
126 |
127 |
@text-color-secondary
128 |
129 |
130 |
131 |
132 |
@text-selection-bg
133 |
134 |
135 |
136 |
137 |
@text-color-inverse
138 |
139 |
140 |
141 |
142 |
@text-color-dark
143 |
144 |
145 |
146 |
147 |
@text-color-secondary-dark
148 |
149 |
150 |
151 |
152 | 153 | ); 154 | 155 | export default ColorPreview; 156 | -------------------------------------------------------------------------------- /examples/customize-cra/src/previews/ColorPreview/style.less: -------------------------------------------------------------------------------- 1 | @import '~antd/lib/style/themes/default.less'; 2 | 3 | .component-preview { 4 | // padding-right: 340px; 5 | 6 | h4 { 7 | color: @heading-color; 8 | } 9 | 10 | .colors { 11 | .color-row { 12 | display: flex; 13 | flex-wrap: wrap; 14 | 15 | .color-item { 16 | width: 160px; 17 | height: 100px; 18 | box-sizing: border-box; 19 | margin-right: 6px; 20 | margin-bottom: 6px; 21 | border-radius: 4px; 22 | color: @text-color; 23 | 24 | .color-item-content { 25 | height: 100%; 26 | padding: 20px; 27 | } 28 | 29 | &.primary { 30 | background: @primary-color; 31 | color: @text-color-inverse; 32 | } 33 | &.primary-custom-var { 34 | background: var(--PC); 35 | color: @text-color-inverse; 36 | } 37 | &.success { 38 | background: @success-color; 39 | color: @text-color-inverse; 40 | } 41 | &.info { 42 | background: @info-color; 43 | color: @text-color-inverse; 44 | } 45 | &.warning { 46 | background: @warning-color; 47 | color: @text-color-inverse; 48 | } 49 | &.error { 50 | background: @error-color; 51 | color: @text-color-inverse; 52 | } 53 | &.highlight { 54 | background: @highlight-color; 55 | color: @text-color-inverse; 56 | } 57 | &.body-background { 58 | background: @body-background; 59 | } 60 | &.component-background { 61 | background: @component-background; 62 | } 63 | &.layout-header-background { 64 | background: @layout-header-background; 65 | color: @text-color-inverse; 66 | } 67 | &.layout-body-background { 68 | background: @layout-body-background; 69 | border: 1px solid @border-color-base; 70 | } 71 | &.layout-footer-background { 72 | background: @layout-footer-background; 73 | border: 1px solid @border-color-base; 74 | } 75 | &.border-color-base { 76 | background: @border-color-base; 77 | } 78 | &.border-color-split { 79 | background: @border-color-split; 80 | } 81 | &.link-color { 82 | background: @link-color; 83 | color: @text-color-inverse; 84 | } 85 | &.disabled-color { 86 | background: @disabled-color; 87 | } 88 | &.disabled-bg { 89 | background: @disabled-bg; 90 | } 91 | &.processing-color { 92 | background: @processing-color; 93 | color: @text-color-inverse; 94 | } 95 | &.icon-color { 96 | background: @icon-color; 97 | border: 1px solid @border-color-base; 98 | } 99 | &.icon-color-hover { 100 | background: @icon-color-hover; 101 | color: @text-color-inverse; 102 | } 103 | &.heading-color { 104 | background: @heading-color; 105 | color: @text-color-inverse; 106 | } 107 | &.text-color { 108 | background: @text-color; 109 | color: @text-color-inverse; 110 | } 111 | &.text-color-secondary { 112 | background: @text-color-secondary; 113 | color: @text-color-inverse; 114 | } 115 | &.text-selection-bg { 116 | background: @text-selection-bg; 117 | color: @text-color-inverse; 118 | } 119 | &.text-color-inverse { 120 | background: @text-color-inverse; 121 | } 122 | &.text-color-dark { 123 | background: @text-color-dark; 124 | } 125 | &.text-color-secondary-dark { 126 | background: @text-color-secondary-dark; 127 | } 128 | } 129 | } 130 | } 131 | } -------------------------------------------------------------------------------- /examples/customize-cra/src/previews/DatePickerPreview/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { DatePicker } from 'antd'; 3 | import PreviewWrapper from '../PreviewWrapper'; 4 | // import './style.less'; 5 | 6 | const { MonthPicker, RangePicker, WeekPicker } = DatePicker; 7 | 8 | const DatePickerPreview = ({ size, disabled }) => ( 9 | 10 |
11 |
12 | 13 |
14 |
15 | 16 |
17 |
18 | 19 |
20 |
21 | 22 |
23 |
24 | 25 | ); 26 | 27 | export default DatePickerPreview; 28 | -------------------------------------------------------------------------------- /examples/customize-cra/src/previews/DropdownPreview/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { DownOutlined, UserOutlined } from '@ant-design/icons'; 3 | import { Menu, Dropdown } from 'antd'; 4 | import PreviewWrapper from '../PreviewWrapper'; 5 | // import './style.less'; 6 | 7 | const menu = ( 8 | 9 | 10 | 11 | 1st menu item 12 | 13 | 14 | 15 | 16 | 2nd menu item 17 | 18 | 19 | 20 | 21 | 22 | 3rd menu item 23 | 24 | 25 | 26 | ); 27 | 28 | const DropdownPreview = ({ size, disabled }) => ( 29 | 30 |
31 |
32 |
33 | 34 | 35 | Hover me 36 | 37 | 38 |
39 |
40 | } size={size} disabled={disabled}> 41 | Dropdown 42 | 43 |
44 |
45 |
46 | 47 | ); 48 | 49 | export default DropdownPreview; 50 | -------------------------------------------------------------------------------- /examples/customize-cra/src/previews/FormPreview/index.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import moment from 'moment'; 3 | // import { Form } from '@ant-design/compatible'; 4 | // import '@ant-design/compatible/assets/index.css'; 5 | import { UploadOutlined } from '@ant-design/icons'; 6 | import { Select, Switch, Radio, Button, Upload, DatePicker, Progress, Input, Form } from 'antd'; 7 | import PreviewWrapper from '../PreviewWrapper'; 8 | import './style.less'; 9 | 10 | const FormItem = Form.Item; 11 | const { Option } = Select; 12 | const RadioButton = Radio.Button; 13 | const RadioGroup = Radio.Group; 14 | 15 | class ExampleForm extends Component { 16 | handleSubmit = (e) => { 17 | e.preventDefault(); 18 | 19 | this.props.form.validateFields((err, values) => { 20 | if (!err) { 21 | console.log('Received values of form: ', values); 22 | } 23 | }); 24 | }; 25 | 26 | handleMenuThemeChange = (value) => { 27 | const { onMenuThemeChange } = this.props; 28 | typeof onMenuThemeChange === 'function' && onMenuThemeChange(value); 29 | } 30 | 31 | normFile = (e) => { 32 | console.log('Upload event:', e); 33 | if (Array.isArray(e)) { 34 | return e; 35 | } 36 | return e && e.fileList; 37 | } 38 | 39 | renderForm() { 40 | const { size, disabled } = this.props; 41 | const formItemLayout = { 42 | labelCol: { span: 4 }, 43 | wrapperCol: { span: 18 } 44 | }; 45 | return ( 46 |
51 | 65 | 74 | 75 | 89 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | A 110 | B 111 | C 112 | D 113 | 114 | 115 | 116 | 117 | item 1 118 | item 2 119 | item 3 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 134 | 137 | 138 | 上传文件 139 | 140 | 141 | {/* 142 | 服务于企业级产品的设计体系，基于确定和自然的设计价值观上的模块化解决方案，让设计者和开发者专注于更好的用户体验。 143 | */} 144 | 145 | 146 | 147 | 148 | 149 |
150 | ); 151 | } 152 | 153 | render() { 154 | return ( 155 | 156 |
157 |
158 | {this.renderForm()} 159 |
160 |
161 | 162 | ); 163 | } 164 | } 165 | 166 | export default ExampleForm; 167 | -------------------------------------------------------------------------------- /examples/customize-cra/src/previews/FormPreview/style.less: -------------------------------------------------------------------------------- 1 | .example-form { 2 | .text { 3 | text-align: center; 4 | } 5 | } -------------------------------------------------------------------------------- /examples/customize-cra/src/previews/InputPreview/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Input, InputNumber } from 'antd'; 3 | import PreviewWrapper from '../PreviewWrapper'; 4 | // import './style.less'; 5 | 6 | const { Search, TextArea } = Input; 7 | 8 | const InputPreview = ({ size, disabled }) => ( 9 | 10 |
11 |
12 | 13 |
14 |
15 | 20 |
21 |
22 | 23 |
24 |
25 | 26 |
27 |
28 |