+#
[](https://www.npmjs.com/package/react-toolbox) [](https://travis-ci.org/react-toolbox/react-toolbox) [](https://www.npmjs.org/package/react-toolbox) [](https://paypal.me/javivelasco) [](#backers)
[](#sponsors)
@@ -17,7 +17,7 @@ $ npm install --save react-toolbox
## Prerequisites
-React Toolbox uses [CSS Modules](https://github.com/css-modules/css-modules) by default to import stylesheets written using PostCSS/[cssnext](http://cssnext.io/) features. In case you want to import the components already bundled with CSS, your module bundler should be able to require these PostCSS modules.
+React Toolbox uses [CSS Modules](https://github.com/css-modules/css-modules) by default to import stylesheets written using [PostCSS](https://github.com/postcss/postcss) & [postcss-preset-env](https://preset-env.cssdb.org/) features. In case you want to import the components already bundled with CSS, your module bundler should be able to require these PostCSS modules.
Although we recommend [webpack](https://webpack.github.io/), you are free to use whatever module bundler you want as long as it can compile and require PostCSS files located in your `node_modules`. If you are experiencing require errors, make sure your configuration satisfies this requirement.
@@ -33,8 +33,7 @@ Follow [these instructions](https://github.com/react-toolbox/react-toolbox-themr
```bash
npm install postcss-loader --save-dev
-npm install postcss --save
-npm install postcss-cssnext --save
+npm install postcss postcss-preset-env postcss-calc --save
```
Configure webpack 1.x loader for .css files to use postcss:
@@ -49,10 +48,20 @@ Configure webpack 1.x loader for .css files to use postcss:
```
Declare plugins to be used by postcss (as part of webpack's config object):
```js
+ // webpack.config.js
postcss: () => {
return [
/* eslint-disable global-require */
- require('postcss-cssnext'),
+ require('postcss-preset-env')({
+ stage: 0, // required to get all features that were from cssnext without enabling them one by one
+ features: {
+ 'custom-properties': {
+ preserve: false, // required to output values instead of variables
+ },
+ 'color-mod-function': true, // required to use color-mod()
+ }
+ }),
+ require('postcss-calc'), // required as postcss-preset-env doesn't have a reduce calc() funtion that cssnext did
/* eslint-enable global-require */
];
},
@@ -60,22 +69,23 @@ Declare plugins to be used by postcss (as part of webpack's config object):
Configure webpack 2.x or 3.x loader for .css files to use postcss:
```js
+ // webpack.config.js
+ {
+ test: /\.css$/,
+ use: [
+ "style-loader",
{
- test: /\.css$/,
- use: [
- "style-loader",
- {
- loader: "css-loader",
- options: {
- modules: true, // default is false
- sourceMap: true,
- importLoaders: 1,
- localIdentName: "[name]--[local]--[hash:base64:8]"
- }
- },
- "postcss-loader"
- ]
- }
+ loader: "css-loader",
+ options: {
+ modules: true, // default is false
+ sourceMap: true,
+ importLoaders: 1,
+ localIdentName: "[name]--[local]--[hash:base64:8]"
+ }
+ },
+ "postcss-loader"
+ ]
+ }
```
## Basic usage
@@ -115,7 +125,7 @@ First let's take a look on how the components are structured in the project. The
|---- theme.css
```
-As you can see in the previous block, each folder includes: a Javascript file for each component/subcomponent; a README with documentation, an index Javascript file that imports and injects styles and dependencies for you, a default theme PostCSS/cssnext stylesheet and a config.css with configuration variables (CSS Custom Properties). Depending on whether you want the styles to be directly bundled or not, you can import components in **two** different ways.
+As you can see in the previous block, each folder includes: a Javascript file for each component/subcomponent; a README with documentation, an index Javascript file that imports and injects styles and dependencies for you, a default theme PostCSS/preset-env stylesheet and a config.css with configuration variables (CSS Custom Properties). Depending on whether you want the styles to be directly bundled or not, you can import components in **two** different ways.
### Bundled component
@@ -212,14 +222,13 @@ export default App;
## Theming (configuration variables)
-You can apply theming in multiple ways. First of all, you have to understand that React Toolbox stylesheets are written using PostCSS with cssnext features and use CSS Custom Properties from the **config** files we saw earlier. In addition, there are some global CSS Properties imported by each component: [colors](https://github.com/react-toolbox/react-toolbox/blob/dev/components/colors.css) and [variables](https://github.com/react-toolbox/react-toolbox/blob/dev/components/variables.css). You can override both the global and component-specific **variables** to get the results you want using one of the methods below.
+You can apply theming in multiple ways. First of all, you have to understand that React Toolbox stylesheets are written using PostCSS with postcss-preset-env features and use CSS Custom Properties from the **config** files we saw earlier. In addition, there are some global CSS Properties imported by each component: [colors](https://github.com/react-toolbox/react-toolbox/blob/dev/components/colors.module.css) and [variables](https://github.com/react-toolbox/react-toolbox/blob/dev/components/variables.module.css). You can override both the global and component-specific **variables** to get the results you want using one of the methods below.
### Settings configuration variables in JavaScript
-You can override both the global and component-specific CSS Custom Properties at build-time by supplying an object with these variable names and your desired values to the PostCSS customProperties plugin. i.e. if using postcss-next in webpack:
+You can override both the global and component-specific CSS Custom Properties at build-time by supplying an object with these variable names and your desired values to the PostCSS `custom-properties` plugin. i.e. if using [postcss-preset-env](https://github.com/csstools/postcss-preset-env) in webpack:
```js
-
// This can also be stored in a separate file:
const reactToolboxVariables = {
'color-text': '#444548',
@@ -228,31 +237,34 @@ const reactToolboxVariables = {
'button-height': '30px',
};
-// webpack's config object:
+// webpack's config object: (webpack.config.js)
const config = {
...
postcss: () => {
return [
/* eslint-disable global-require */
- require('postcss-cssnext')({
+ require('postcss-preset-env')({
+ stage: 0, // required to get all features that were from cssnext without enabling them one by one
features: {
- customProperties: {
- variables: reactToolboxVariables,
+ 'custom-properties': {
+ preserve: false, // required to output values instead of variables
+ importFrom: reactToolboxVariables, // see postcss-preset-env for config options
},
- },
+ 'color-mod-function': true, // required to use color-mod()
+ }
}),
+ require('postcss-calc'), // required as postcss-preset-env doesn't have a reduce calc() funtion that cssnext did
/* optional - see next section */
require('postcss-modules-values'),
/* eslint-enable global-require */
];
},
}
-
```
### Settings configuration variables using CSS Module Values
-Instead of using a JavaScript object for variables, you can use [CSS Module Values](https://github.com/css-modules/css-modules/blob/master/docs/values-variables.md) (`npm install postcss-modules-values --save`) and the [modules-values-extract](https://github.com/alexhisen/modules-values-extract) utility to declare these variables in component-specific theme .css files, where you would typically store additional style overrides.
+Instead of using a JavaScript object for variables, you can use [CSS Module Values](https://github.com/css-modules/css-modules/blob/master/docs/values-variables.md) (`npm install postcss-modules-values --save`) and the [modules-values-extract](https://github.com/alexhisen/modules-values-extract) utility to declare these variables in component-specific theme `.css` files, where you would typically store additional style overrides.
CSS Module Values also offer the advantage that importing a css file with @value declarations makes these values properties of the imported style object, i.e.:
@@ -268,7 +280,7 @@ import styleVariables from './css/variables.css';
styleVariables.buttonPrimaryBackgroundColor
```
-In [this demo project](https://github.com/alexhisen/mobx-forms-demo), modules-values-extract utility is used to extract all @values with dashes in their name from all css files in the /css folder and to feed them to customProperties in [webpack](https://github.com/alexhisen/mobx-forms-demo/blob/master/webpack.config.js). In the demo project, variables that are not specific to a particular component are in [variables.css](https://github.com/alexhisen/mobx-forms-demo/blob/master/src/css/variables.css) and button-specific variables are in [button.css](https://github.com/alexhisen/mobx-forms-demo/blob/master/src/css/button.css). Note that button.css also imports certain values from variables.css just to demonstrate this capability \(the import can also be used in a @value declaration\) and it uses CSS overrides instead of color variables that exist in the React-Toolbox Button component to show an alternative method if the variables are not sufficient.
+In [this demo project](https://github.com/alexhisen/mobx-forms-demo), modules-values-extract utility is used to extract all @values with dashes in their name from all css files in the `/css` folder and to feed them to customProperties in [webpack](https://github.com/alexhisen/mobx-forms-demo/blob/master/webpack.config.js). In the demo project, variables that are not specific to a particular component are in [variables.css](https://github.com/alexhisen/mobx-forms-demo/blob/master/src/css/variables.css) and button-specific variables are in [button.css](https://github.com/alexhisen/mobx-forms-demo/blob/master/src/css/button.css). Note that button.css also imports certain values from variables.css just to demonstrate this capability \(the import can also be used in a @value declaration\) and it uses CSS overrides instead of color variables that exist in the React-Toolbox Button component to show an alternative method if the variables are not sufficient.
> **IMPORTANT: Changes to the module values do not take effect immediately with Webpack Hot-Module-Reload - webpack / webpack-dev-server must be restarted!**
diff --git a/ROADMAP.md b/ROADMAP.md
index 8e9821217..2b1ff11af 100644
--- a/ROADMAP.md
+++ b/ROADMAP.md
@@ -1,4 +1,4 @@
-This document defines a manifesto and the main Roadmap 🚵 ideas for [React Toolbox](www.react-toolbox.com). It's not a fixed document and of course it's open to change. You can leave your feedback in [this gist](https://gist.github.com/javivelasco/259d2087c2a8c3e8f2c5c720d1fd3f2e) or you can also do it [through an issue](https://github.com/react-toolbox/react-toolbox/issues/new).
+This document defines a manifesto and the main Roadmap 🚵 ideas for [React Toolbox](www.react-toolbox.io). It's not a fixed document and of course it's open to change. You can leave your feedback in [this gist](https://gist.github.com/javivelasco/259d2087c2a8c3e8f2c5c720d1fd3f2e) or you can also do it [through an issue](https://github.com/react-toolbox/react-toolbox/issues/new).
## The Manifesto
@@ -68,7 +68,7 @@ There is no fixed date, sorry. Being an open source project, it depends on contr
### Is there any migration guide to 2.0?
-Not really. At the end we are just providing components and there are no big changes on them apart from huge refactors of some specific components that will be coming. If should be enough by checking changelogs and new documentation. In any case if you feel like a migration guide is needed, feel free to leave for feedback.
+There is a [migration guide](https://github.com/react-toolbox/react-toolbox/wiki/Migrating-from-version-1.3-to-2.0) in the wiki.
### When will be released the new playground?
diff --git a/babel.config.js b/babel.config.js
new file mode 100644
index 000000000..0b2856212
--- /dev/null
+++ b/babel.config.js
@@ -0,0 +1,35 @@
+module.exports = function (api) {
+ const env = api.env();
+ api.cache.using(() => env === 'development');
+
+ return {
+ presets: ['@babel/preset-env', '@babel/preset-react'],
+ plugins: [
+ '@babel/plugin-transform-runtime',
+ // Stage 0
+ '@babel/plugin-proposal-function-bind',
+
+ // Stage 1
+ '@babel/plugin-proposal-export-default-from',
+ '@babel/plugin-proposal-logical-assignment-operators',
+ ['@babel/plugin-proposal-optional-chaining', { loose: false }],
+ ['@babel/plugin-proposal-pipeline-operator', { proposal: 'minimal' }],
+ ['@babel/plugin-proposal-nullish-coalescing-operator', { loose: false }],
+ '@babel/plugin-proposal-do-expressions',
+
+ // Stage 2
+ ['@babel/plugin-proposal-decorators', { legacy: true }],
+ '@babel/plugin-proposal-function-sent',
+ '@babel/plugin-proposal-export-namespace-from',
+ '@babel/plugin-proposal-numeric-separator',
+ '@babel/plugin-proposal-throw-expressions',
+
+ // Stage 3
+ '@babel/plugin-syntax-dynamic-import',
+ '@babel/plugin-syntax-import-meta',
+ ['@babel/plugin-proposal-class-properties', { loose: false }],
+ '@babel/plugin-proposal-json-strings',
+ 'react-hot-loader/babel',
+ ],
+ };
+};
diff --git a/components/__mocks__/react-css-themr.js b/components/__mocks__/react-css-themr.js
index 0db02aaf4..749303b52 100644
--- a/components/__mocks__/react-css-themr.js
+++ b/components/__mocks__/react-css-themr.js
@@ -1,6 +1,6 @@
export function themr() {
return (Component) => {
- Component.defaultProps = Component.defaultProps || {}; // eslint-disable-line no-param-reassign
+ Component.defaultProps = Component.defaultProps || {}; // eslint-disable-line no-param-reassign
Component.defaultProps.theme = {}; // eslint-disable-line no-param-reassign
return Component;
};
diff --git a/components/app_bar/AppBar.js b/components/app_bar/AppBar.js
index d4421b87d..93627fc07 100644
--- a/components/app_bar/AppBar.js
+++ b/components/app_bar/AppBar.js
@@ -25,9 +25,9 @@ const factory = (IconButton) => {
scrollHide: PropTypes.bool,
theme: PropTypes.shape({
appBar: PropTypes.string,
- inner: PropTypes.string,
fixed: PropTypes.string,
flat: PropTypes.string,
+ inner: PropTypes.string,
leftIcon: PropTypes.string,
rightIcon: PropTypes.string,
scrollHide: PropTypes.string,
@@ -46,7 +46,7 @@ const factory = (IconButton) => {
scrollHide: false,
};
- state = { hidden: false, height: 0 };
+ state = { hidden: false, height: 0 }; // eslint-disable-line react/no-unused-state
componentDidMount() {
if (this.props.scrollHide) {
@@ -70,26 +70,27 @@ const factory = (IconButton) => {
}
}
- initializeScroll() {
+ handleScroll = () => {
+ const scrollDiff = this.curScroll - window.scrollY;
+ this.setState(state => ({
+ hidden: scrollDiff < 0
+ && window.scrollY !== undefined
+ && window.scrollY > state.height,
+ }));
+ this.curScroll = window.scrollY;
+ };
+
+ initializeScroll = () => {
window.addEventListener('scroll', this.handleScroll);
const { height } = this.rootNode.getBoundingClientRect();
this.curScroll = window.scrollY;
- this.setState({ height });
+ this.setState({ height }); // eslint-disable-line react/no-unused-state
}
endScroll() {
window.removeEventListener('scroll', this.handleScroll);
}
- handleScroll = () => {
- const scrollDiff = this.curScroll - window.scrollY;
- const hidden = scrollDiff < 0
- && window.scrollY !== undefined
- && window.scrollY > this.state.height;
- this.setState({ hidden });
- this.curScroll = window.scrollY;
- };
-
render() {
const {
children,
diff --git a/components/app_bar/config.css b/components/app_bar/config.module.css
similarity index 100%
rename from components/app_bar/config.css
rename to components/app_bar/config.module.css
diff --git a/components/app_bar/index.js b/components/app_bar/index.js
index ac09b55cc..2fd50cbbd 100644
--- a/components/app_bar/index.js
+++ b/components/app_bar/index.js
@@ -2,7 +2,7 @@ import { themr } from 'react-css-themr';
import { APP_BAR } from '../identifiers';
import { appBarFactory } from './AppBar';
import { IconButton } from '../button';
-import theme from './theme.css';
+import theme from './theme.module.css';
const AppBar = appBarFactory(IconButton);
const ThemedAppBar = themr(APP_BAR, theme)(AppBar);
diff --git a/components/app_bar/theme.css b/components/app_bar/theme.module.css
similarity index 90%
rename from components/app_bar/theme.css
rename to components/app_bar/theme.module.css
index 3f1836817..fe8986f4e 100644
--- a/components/app_bar/theme.css
+++ b/components/app_bar/theme.module.css
@@ -1,7 +1,7 @@
-@import 'http://github.com/colors.css';
-@import 'http://github.com/media.css';
-@import 'http://github.com/variables.css';
-@import 'http://github.com/config.css';
+@import 'http://github.com/colors.module.css';
+@import 'http://github.com/media.module.css';
+@import 'http://github.com/variables.module.css';
+@import 'http://github.com/config.module.css';
.appBar {
background: var(--appbar-color);
diff --git a/components/autocomplete/Autocomplete.d.ts b/components/autocomplete/Autocomplete.d.ts
index b7d98d82e..9eddafa1c 100644
--- a/components/autocomplete/Autocomplete.d.ts
+++ b/components/autocomplete/Autocomplete.d.ts
@@ -88,6 +88,14 @@ export interface AutocompleteProps extends InputProps {
* Callback function that is fired when component is focused.
*/
onFocus?: Function;
+ /**
+ * Callback function that is fired when a key is pressed down.
+ */
+ onKeyDown?: Function;
+ /**
+ * Callback function that is fired when a key is lifted up.
+ */
+ onKeyUp?: Function;
/**
* Callback function that is fired when the components's query value changes.
*/
diff --git a/components/autocomplete/Autocomplete.js b/components/autocomplete/Autocomplete.js
index 099a03378..ab0ad3096 100644
--- a/components/autocomplete/Autocomplete.js
+++ b/components/autocomplete/Autocomplete.js
@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
import ReactDOM from 'react-dom';
import classnames from 'classnames';
import { themr } from 'react-css-themr';
+import { isValuePresent } from '../utils/utils';
import { AUTOCOMPLETE } from '../identifiers.js';
import InjectChip from '../chip/Chip.js';
import InjectInput from '../input/Input.js';
@@ -35,6 +36,8 @@ const factory = (Chip, Input) => {
onBlur: PropTypes.func,
onChange: PropTypes.func,
onFocus: PropTypes.func,
+ onKeyDown: PropTypes.func,
+ onKeyUp: PropTypes.func,
onQueryChange: PropTypes.func,
query: PropTypes.string,
selectedPosition: PropTypes.oneOf(['above', 'below', 'none']),
@@ -132,7 +135,7 @@ const factory = (Chip, Input) => {
};
handleQueryFocus = (event) => {
- this.suggestionsNode.scrollTop = 0;
+ event.target.scrollTop = 0;
this.setState({ active: '', focus: true });
if (this.props.onFocus) this.props.onFocus(event);
};
@@ -148,6 +151,8 @@ const factory = (Chip, Input) => {
if (event.which === 13) {
this.selectOrCreateActiveItem(event);
}
+
+ if(this.props.onKeyDown) this.props.onKeyDown(event);
};
handleQueryKeyUp = (event) => {
@@ -160,6 +165,8 @@ const factory = (Chip, Input) => {
if (index >= suggestionsKeys.length) index = 0;
this.setState({ active: suggestionsKeys[index] });
}
+
+ if(this.props.onKeyUp) this.props.onKeyUp(event);
};
handleSuggestionHover = (event) => {
@@ -178,7 +185,7 @@ const factory = (Chip, Input) => {
query(key) {
let query_value = '';
- if (!this.props.multiple && key) {
+ if (!this.props.multiple && isValuePresent(key)) {
const source_value = this.source().get(`${key}`);
query_value = source_value || key;
}
@@ -375,7 +382,6 @@ const factory = (Chip, Input) => {
return (
{children}
: children}Provide an image source or object, a font icon, children or a title to use its first letter.
-Give information on :hover
+An example with
Multiline!