diff --git a/docs/src/examples/elements/Image/States/ImageExampleHidden.js b/docs/src/examples/elements/Image/States/ImageExampleHidden.js index 39655ff0f8..abac3faf3a 100644 --- a/docs/src/examples/elements/Image/States/ImageExampleHidden.js +++ b/docs/src/examples/elements/Image/States/ImageExampleHidden.js @@ -1,8 +1,6 @@ import React from 'react' import { Image } from 'semantic-ui-react' -const ImageExampleHidden = () => ( - -) +const ImageExampleHidden = () => export default ImageExampleHidden diff --git a/docs/src/examples/elements/Image/Types/ImageExampleWrapped.js b/docs/src/examples/elements/Image/Types/ImageExampleWrapped.js index dd2b3e29e2..720f2c872a 100644 --- a/docs/src/examples/elements/Image/Types/ImageExampleWrapped.js +++ b/docs/src/examples/elements/Image/Types/ImageExampleWrapped.js @@ -1,8 +1,6 @@ import React from 'react' import { Image } from 'semantic-ui-react' -const ImageExampleWrapped = () => ( - -) +const ImageExampleWrapped = () => export default ImageExampleWrapped diff --git a/docs/src/examples/modules/Embed/Variations/EmbedExampleAspectRatio.js b/docs/src/examples/modules/Embed/Variations/EmbedExampleAspectRatio.js index 7586d4007a..3a4215878b 100644 --- a/docs/src/examples/modules/Embed/Variations/EmbedExampleAspectRatio.js +++ b/docs/src/examples/modules/Embed/Variations/EmbedExampleAspectRatio.js @@ -2,12 +2,7 @@ import React from 'react' import { Embed } from 'semantic-ui-react' const EmbedExampleAspectRatio = () => ( - + ) export default EmbedExampleAspectRatio diff --git a/docs/src/examples/modules/Modal/Variations/ModalExampleScrollingContent.js b/docs/src/examples/modules/Modal/Variations/ModalExampleScrollingContent.js index d1c90afe42..338921a9f4 100644 --- a/docs/src/examples/modules/Modal/Variations/ModalExampleScrollingContent.js +++ b/docs/src/examples/modules/Modal/Variations/ModalExampleScrollingContent.js @@ -13,11 +13,7 @@ const ModalExampleScrollingContent = () => (

This is an example of expanded content that will cause the modal's dimmer to scroll

{_.times(8, i => ( - + ))} diff --git a/docs/src/examples/views/Feed/Content/FeedExampleExtraImagesShorthand.js b/docs/src/examples/views/Feed/Content/FeedExampleExtraImagesShorthand.js index 3ea04d7980..224a42f5b2 100644 --- a/docs/src/examples/views/Feed/Content/FeedExampleExtraImagesShorthand.js +++ b/docs/src/examples/views/Feed/Content/FeedExampleExtraImagesShorthand.js @@ -4,10 +4,7 @@ import { Feed } from 'semantic-ui-react' const image = '/images/avatar/small/helen.jpg' const date = '3 days ago' const summary = 'Helen Troy added 2 photos' -const extraImages = [ - '/images/wireframe/image.png', - '/images/wireframe/image-text.png', -] +const extraImages = ['/images/wireframe/image.png', '/images/wireframe/image-text.png'] const FeedExampleExtraImagesShorthand = () => ( diff --git a/examples/webpack3/scripts/build.js b/examples/webpack3/scripts/build.js index c4faa4df82..5d77096d67 100644 --- a/examples/webpack3/scripts/build.js +++ b/examples/webpack3/scripts/build.js @@ -5,7 +5,7 @@ process.env.NODE_ENV = 'production' // Makes the script crash on unhandled rejections instead of silently // ignoring them. In the future, promise rejections that are not handled will // terminate the Node.js process with a non-zero exit code. -process.on('unhandledRejection', (err) => { +process.on('unhandledRejection', err => { throw err }) @@ -24,8 +24,7 @@ const printHostingInstructions = require('react-dev-utils/printHostingInstructio const FileSizeReporter = require('react-dev-utils/FileSizeReporter') const printBuildError = require('react-dev-utils/printBuildError') -const measureFileSizesBeforeBuild = - FileSizeReporter.measureFileSizesBeforeBuild +const measureFileSizesBeforeBuild = FileSizeReporter.measureFileSizesBeforeBuild const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild const useYarn = fs.existsSync(paths.yarnLockFile) @@ -41,7 +40,7 @@ if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) { // First, read the current file sizes in build directory. // This lets us display how much they changed later. measureFileSizesBeforeBuild(paths.appBuild) - .then((previousFileSizes) => { + .then(previousFileSizes => { // Remove all content but keep the directory so that // if you're in it, you don't end up in Trash fs.emptyDirSync(paths.appBuild) @@ -56,14 +55,12 @@ measureFileSizesBeforeBuild(paths.appBuild) console.log(chalk.yellow('Compiled with warnings.\n')) console.log(warnings.join('\n\n')) console.log( - `\nSearch for the ${ - chalk.underline(chalk.yellow('keywords')) - } to learn more about each warning.` + `\nSearch for the ${chalk.underline( + chalk.yellow('keywords'), + )} to learn more about each warning.`, ) console.log( - `To ignore, add ${ - chalk.cyan('// eslint-disable-next-line') - } to the line before.\n` + `To ignore, add ${chalk.cyan('// eslint-disable-next-line')} to the line before.\n`, ) } else { console.log(chalk.green('Compiled successfully.\n')) @@ -75,7 +72,7 @@ measureFileSizesBeforeBuild(paths.appBuild) previousFileSizes, paths.appBuild, WARN_AFTER_BUNDLE_GZIP_SIZE, - WARN_AFTER_CHUNK_GZIP_SIZE + WARN_AFTER_CHUNK_GZIP_SIZE, ) console.log() @@ -83,19 +80,13 @@ measureFileSizesBeforeBuild(paths.appBuild) const publicUrl = paths.publicUrl const publicPath = config.output.publicPath const buildFolder = path.relative(process.cwd(), paths.appBuild) - printHostingInstructions( - appPackage, - publicUrl, - publicPath, - buildFolder, - useYarn - ) + printHostingInstructions(appPackage, publicUrl, publicPath, buildFolder, useYarn) }, - (err) => { + err => { console.log(chalk.red('Failed to compile.\n')) printBuildError(err) process.exit(1) - } + }, ) // Create the production build and print the deployment instructions. @@ -119,15 +110,14 @@ function build(previousFileSizes) { } if ( process.env.CI && - (typeof process.env.CI !== 'string' || - process.env.CI.toLowerCase() !== 'false') && + (typeof process.env.CI !== 'string' || process.env.CI.toLowerCase() !== 'false') && messages.warnings.length ) { console.log( chalk.yellow( '\nTreating warnings as errors because process.env.CI = true.\n' + - 'Most CI servers set it automatically.\n' - ) + 'Most CI servers set it automatically.\n', + ), ) return reject(new Error(messages.warnings.join('\n\n'))) } diff --git a/examples/webpack3/src/App.js b/examples/webpack3/src/App.js index 305b1bc8c7..5fb244feee 100644 --- a/examples/webpack3/src/App.js +++ b/examples/webpack3/src/App.js @@ -11,7 +11,7 @@ const leftItems = [ href: 'https://react.semantic-ui.com/', icon: 'book', key: 'docs', - target: '_blank' + target: '_blank', }, ] const rightItems = [ @@ -21,7 +21,7 @@ const rightItems = [ href: 'https://github.com/Semantic-Org/Semantic-UI-React', icon: 'github', key: 'github', - target: '_blank' + target: '_blank', }, { as: 'a', @@ -30,7 +30,7 @@ const rightItems = [ href: 'https://stackoverflow.com/questions/tagged/semantic-ui-react?sort=votes', key: 'so', target: '_blank', - } + }, ] const App = () => ( @@ -40,101 +40,143 @@ const App = () => ( -

Welcome to your Semantic UI React App! It is awesome 😉

+

+ Welcome to your Semantic UI React App! It is awesome{' '} + + 😉 + +

- This boilerplate is designed to show theming features of SUI with modern environment. It based on the - awesome{' '} - + This boilerplate is designed to show theming features of SUI with modern environment. It + based on the awesome{' '} + Create React App package - - {' '}with some additions. + {' '} + with some additions.

React Hot Loader

- + React Hot Loader - - {' '}become stable and we can use safely, it improves your delevopment speed cardinally. + {' '} + become stable and we can use safely, it improves your delevopment speed cardinally.

LESS loader

Semantic UI is powered by LESS, so we need it to enable its powerful theming. We also - enabled {' '} - + enabled{' '} + CSS modules - - {' '}for your components. + {' '} + for your components.

Bundle analyzer and direct imports

- Semantic UI React is very powerful, but in most cases you do not need all its modules. In fact, unused - modules should be removed by{' '} - + Semantic UI React is very powerful, but in most cases you do not need all its modules. + In fact, unused modules should be removed by{' '} + Tree Shaking - , but current situation does not allow to rely on it. Our users use direct import of SUIR components, - but we do not recommend to use this approach because paths to modules can be changed. We added{' '} + , but current situation does not allow to rely on it. Our users use direct import of + SUIR components, but we do not recommend to use this approach because paths to modules + can be changed. We added{' '} babel-plugin-lodash - - {' '}plugin that automatically transform your import to direct. + {' '} + plugin that automatically transform your import to direct.

We also added bundle analyzer, so you can always review the size of your bundles.

 -
Themed Button
+
+ Themed Button +

- Semantic UI React does not have own theming and fully relies on CSS part of Semantic UI. It is normal, - Semantic UI theming is very powerful, it allows you fully modify the look of your app using theming - variables. + Semantic UI React does not have own theming and fully relies on CSS part of Semantic UI. + It is normal, Semantic UI theming is very powerful, it allows you fully modify the look + of your app using theming variables.

- We changed the primary color of Button component, it is really easy - 😁 Take a look to{' '} - /src/styling/theme/elements/button.variables. By the way, the theme directory - structure fully matches the component structure of Semantic UI React. + We changed the primary color of Button component, it is really + easy + + 😁 + {' '} + Take a look to /src/styling/theme/elements/button.variables. By the way, + the theme directory structure fully matches the component structure of + Semantic UI React.

-
Custom themed component

- In the real world you will always need custom components, and you will want to get them themed like your - app. An example is below: + In the real world you will always need custom components, and you will want to get them + themed like your app. An example is below:

Hey, it is a custom message

- Take a look /src/components/CustomMessage directory. The are some important things: + Take a look /src/components/CustomMessage directory. The are some important + things:

- we premade heading.less for you, when you will include it in your LESS file you will able - to use your existing SUI variables! + we premade heading.less for you, when you will include it in your LESS + file you will able to use your existing SUI variables! we enabled{' '} - + CSS modules - - {' '}for your components, it means that you will need to use :global when your style will - match SUI parts + {' '} + for your components, it means that you will need to use :global when your + style will match SUI parts
P.S.
-

This page is fully responsive 😁

+

+ This page is fully responsive{' '} + + 😁 + +

diff --git a/src/addons/MountNode/lib/handleClassNamesChange.js b/src/addons/MountNode/lib/handleClassNamesChange.js index 69db4c3362..8e24c10365 100644 --- a/src/addons/MountNode/lib/handleClassNamesChange.js +++ b/src/addons/MountNode/lib/handleClassNamesChange.js @@ -7,7 +7,10 @@ const prevClassNames = new Map() const handleClassNamesChange = (node, components) => { const currentClassNames = computeClassNames(components) - const [forAdd, forRemoval] = computeClassNamesDifference(prevClassNames.get(node), currentClassNames) + const [forAdd, forRemoval] = computeClassNamesDifference( + prevClassNames.get(node), + currentClassNames, + ) _.forEach(forAdd, className => node.classList.add(className)) _.forEach(forRemoval, className => node.classList.remove(className)) diff --git a/src/elements/Input/Input.js b/src/elements/Input/Input.js index 71717a8fa0..a267ed2000 100644 --- a/src/elements/Input/Input.js +++ b/src/elements/Input/Input.js @@ -230,8 +230,8 @@ class Input extends Component { {actionPosition === 'left' && actionElement} {labelPosition !== 'right' && labelElement} {createHTMLInput(input || type, { defaultProps: htmlInputProps, autoGenerateKey: false })} - {actionPosition !== 'left' && actionElement} {Icon.create(this.computeIcon(), { autoGenerateKey: false })} + {actionPosition !== 'left' && actionElement} {labelPosition === 'right' && labelElement} ) diff --git a/src/lib/customPropTypes.js b/src/lib/customPropTypes.js index a95acf9769..ce83fee4c4 100644 --- a/src/lib/customPropTypes.js +++ b/src/lib/customPropTypes.js @@ -7,11 +7,8 @@ const typeOf = (...args) => Object.prototype.toString.call(...args) /** * Ensure a component can render as a give prop value. */ -export const as = (...args) => PropTypes.oneOfType([ - PropTypes.func, - PropTypes.string, - PropTypes.symbol, -])(...args) +export const as = (...args) => + PropTypes.oneOfType([PropTypes.func, PropTypes.string, PropTypes.symbol])(...args) /** * Ensure a prop is a valid DOM node. @@ -69,7 +66,12 @@ export const suggest = (suggestions) => { // way of looking up a value in the map, i.e. we can sort the words in the // incoming propValue and look that up without having to check all permutations. const suggestionsLookup = suggestions.reduce((acc, key) => { - acc[key.split(' ').sort().join(' ')] = true + acc[ + key + .split(' ') + .sort() + .join(' ') + ] = true return acc }, {}) @@ -82,7 +84,10 @@ export const suggest = (suggestions) => { // check if the words were correct but ordered differently. // Since we're matching for classNames we need to allow any word order // to pass validation, e.g. `left chevron` vs `chevron left`. - const propValueSorted = propValue.split(' ').sort().join(' ') + const propValueSorted = propValue + .split(' ') + .sort() + .join(' ') if (suggestionsLookup[propValueSorted]) return // find best suggestions @@ -91,12 +96,14 @@ export const suggest = (suggestions) => { // skip if a match scored 0 if (bestMatches.some(x => x.score === 0)) return - return new Error([ - `Invalid prop \`${propName}\` of value \`${propValue}\` supplied to \`${componentName}\`.`, - `\n\nInstead of \`${propValue}\`, did you mean:`, - bestMatches.map(x => `\n - ${x.suggestion}`).join(''), - '\n', - ].join('')) + return new Error( + [ + `Invalid prop \`${propName}\` of value \`${propValue}\` supplied to \`${componentName}\`.`, + `\n\nInstead of \`${propValue}\`, did you mean:`, + bestMatches.map(x => `\n - ${x.suggestion}`).join(''), + '\n', + ].join(''), + ) } } @@ -106,10 +113,12 @@ export const suggest = (suggestions) => { */ export const disallow = disallowedProps => (props, propName, componentName) => { if (!Array.isArray(disallowedProps)) { - throw new Error([ - 'Invalid argument supplied to disallow, expected an instance of array.', - ` See \`${propName}\` prop in \`${componentName}\`.`, - ].join('')) + throw new Error( + [ + 'Invalid argument supplied to disallow, expected an instance of array.', + ` See \`${propName}\` prop in \`${componentName}\`.`, + ].join(''), + ) } // skip if prop is undefined @@ -124,10 +133,14 @@ export const disallow = disallowedProps => (props, propName, componentName) => { }, []) if (disallowed.length > 0) { - return new Error([ - `Prop \`${propName}\` in \`${componentName}\` conflicts with props: \`${disallowed.join('`, `')}\`.`, - 'They cannot be defined together, choose one or the other.', - ].join(' ')) + return new Error( + [ + `Prop \`${propName}\` in \`${componentName}\` conflicts with props: \`${disallowed.join( + '`, `', + )}\`.`, + 'They cannot be defined together, choose one or the other.', + ].join(' '), + ) } } @@ -137,16 +150,20 @@ export const disallow = disallowedProps => (props, propName, componentName) => { */ export const every = validators => (props, propName, componentName, ...rest) => { if (!Array.isArray(validators)) { - throw new Error([ - 'Invalid argument supplied to every, expected an instance of array.', - `See \`${propName}\` prop in \`${componentName}\`.`, - ].join(' ')) + throw new Error( + [ + 'Invalid argument supplied to every, expected an instance of array.', + `See \`${propName}\` prop in \`${componentName}\`.`, + ].join(' '), + ) } const errors = _.flow( _.map((validator) => { if (typeof validator !== 'function') { - throw new Error(`every() argument "validators" should contain functions, found: ${typeOf(validator)}.`) + throw new Error( + `every() argument "validators" should contain functions, found: ${typeOf(validator)}.`, + ) } return validator(props, propName, componentName, ...rest) }), @@ -163,23 +180,29 @@ export const every = validators => (props, propName, componentName, ...rest) => */ export const some = validators => (props, propName, componentName, ...rest) => { if (!Array.isArray(validators)) { - throw new Error([ - 'Invalid argument supplied to some, expected an instance of array.', - `See \`${propName}\` prop in \`${componentName}\`.`, - ].join(' ')) + throw new Error( + [ + 'Invalid argument supplied to some, expected an instance of array.', + `See \`${propName}\` prop in \`${componentName}\`.`, + ].join(' '), + ) } - const errors = _.compact(_.map(validators, (validator) => { - if (!_.isFunction(validator)) { - throw new Error(`some() argument "validators" should contain functions, found: ${typeOf(validator)}.`) - } - return validator(props, propName, componentName, ...rest) - })) + const errors = _.compact( + _.map(validators, (validator) => { + if (!_.isFunction(validator)) { + throw new Error( + `some() argument "validators" should contain functions, found: ${typeOf(validator)}.`, + ) + } + return validator(props, propName, componentName, ...rest) + }), + ) // fail only if all validators failed if (errors.length === validators.length) { const error = new Error('One of these validators must pass:') - error.message += `\n${_.map(errors, (err, i) => (`[${i + 1}]: ${err.message}`)).join('\n')}` + error.message += `\n${_.map(errors, (err, i) => `[${i + 1}]: ${err.message}`).join('\n')}` return error } } @@ -191,23 +214,29 @@ export const some = validators => (props, propName, componentName, ...rest) => { */ export const givenProps = (propsShape, validator) => (props, propName, componentName, ...rest) => { if (!_.isPlainObject(propsShape)) { - throw new Error([ - 'Invalid argument supplied to givenProps, expected an object.', - `See \`${propName}\` prop in \`${componentName}\`.`, - ].join(' ')) + throw new Error( + [ + 'Invalid argument supplied to givenProps, expected an object.', + `See \`${propName}\` prop in \`${componentName}\`.`, + ].join(' '), + ) } if (typeof validator !== 'function') { - throw new Error([ - 'Invalid argument supplied to givenProps, expected a function.', - `See \`${propName}\` prop in \`${componentName}\`.`, - ].join(' ')) + throw new Error( + [ + 'Invalid argument supplied to givenProps, expected a function.', + `See \`${propName}\` prop in \`${componentName}\`.`, + ].join(' '), + ) } const shouldValidate = _.keys(propsShape).every((key) => { const val = propsShape[key] // require propShape validators to pass or prop values to match - return typeof val === 'function' ? !val(props, key, componentName, ...rest) : val === props[propName] + return typeof val === 'function' + ? !val(props, key, componentName, ...rest) + : val === props[propName] }) if (!shouldValidate) return @@ -216,15 +245,18 @@ export const givenProps = (propsShape, validator) => (props, propName, component if (error) { // poor mans shallow pretty print, prevents JSON circular reference errors - const prettyProps = `{ ${_.keys(_.pick(_.keys(propsShape), props)).map((key) => { - const val = props[key] - let renderedValue = val - if (typeof val === 'string') renderedValue = `"${val}"` - else if (Array.isArray(val)) renderedValue = `[${val.join(', ')}]` - else if (_.isObject(val)) renderedValue = '{...}' - - return `${key}: ${renderedValue}` - }).join(', ')} }` + const prettyProps = `{ ${_ + .keys(_.pick(_.keys(propsShape), props)) + .map((key) => { + const val = props[key] + let renderedValue = val + if (typeof val === 'string') renderedValue = `"${val}"` + else if (Array.isArray(val)) renderedValue = `[${val.join(', ')}]` + else if (_.isObject(val)) renderedValue = '{...}' + + return `${key}: ${renderedValue}` + }) + .join(', ')} }` error.message = `Given props ${prettyProps}: ${error.message}` return error @@ -237,10 +269,12 @@ export const givenProps = (propsShape, validator) => (props, propName, component */ export const demand = requiredProps => (props, propName, componentName) => { if (!Array.isArray(requiredProps)) { - throw new Error([ - 'Invalid `requiredProps` argument supplied to require, expected an instance of array.', - ` See \`${propName}\` prop in \`${componentName}\`.`, - ].join('')) + throw new Error( + [ + 'Invalid `requiredProps` argument supplied to require, expected an instance of array.', + ` See \`${propName}\` prop in \`${componentName}\`.`, + ].join(''), + ) } // skip if prop is undefined @@ -249,7 +283,9 @@ export const demand = requiredProps => (props, propName, componentName) => { const missingRequired = requiredProps.filter(requiredProp => props[requiredProp] === undefined) if (missingRequired.length > 0) { return new Error( - `\`${propName}\` prop in \`${componentName}\` requires props: \`${missingRequired.join('`, `')}\`.`, + `\`${propName}\` prop in \`${componentName}\` requires props: \`${missingRequired.join( + '`, `', + )}\`.`, ) } } @@ -260,10 +296,12 @@ export const demand = requiredProps => (props, propName, componentName) => { */ export const multipleProp = possible => (props, propName, componentName) => { if (!Array.isArray(possible)) { - throw new Error([ - 'Invalid argument supplied to some, expected an instance of array.', - `See \`${propName}\` prop in \`${componentName}\`.`, - ].join(' ')) + throw new Error( + [ + 'Invalid argument supplied to some, expected an instance of array.', + `See \`${propName}\` prop in \`${componentName}\`.`, + ].join(' '), + ) } const propValue = props[propName] @@ -280,43 +318,39 @@ export const multipleProp = possible => (props, propName, componentName) => { // fail only if there are invalid values if (invalid.length > 0) { - return new Error(`\`${propName}\` prop in \`${componentName}\` has invalid values: \`${invalid.join('`, `')}\`.`) + return new Error( + `\`${propName}\` prop in \`${componentName}\` has invalid values: \`${invalid.join( + '`, `', + )}\`.`, + ) } } /** * Ensure a component can render as a node passed as a prop value in place of children. */ -export const contentShorthand = (...args) => every([ - disallow(['children']), - PropTypes.node, -])(...args) +export const contentShorthand = (...args) => + every([disallow(['children']), PropTypes.node])(...args) /** * Item shorthand is a description of a component that can be a literal, * a props object, or an element. */ -export const itemShorthand = (...args) => every([ - disallow(['children']), - PropTypes.oneOfType([ - PropTypes.node, - PropTypes.object, - PropTypes.arrayOf( - PropTypes.oneOfType([ - PropTypes.node, - PropTypes.object, - ]), - ), - ]), -])(...args) +export const itemShorthand = (...args) => + every([ + disallow(['children']), + PropTypes.oneOfType([ + PropTypes.node, + PropTypes.object, + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.node, PropTypes.object])), + ]), + ])(...args) /** * Collection shorthand ensures a prop is an array of item shorthand. */ -export const collectionShorthand = (...args) => every([ - disallow(['children']), - PropTypes.arrayOf(itemShorthand), -])(...args) +export const collectionShorthand = (...args) => + every([disallow(['children']), PropTypes.arrayOf(itemShorthand)])(...args) /** * Show a deprecated warning for component props with a help message and optional validator. @@ -325,10 +359,12 @@ export const collectionShorthand = (...args) => every([ */ export const deprecate = (help, validator) => (props, propName, componentName, ...args) => { if (typeof help !== 'string') { - throw new Error([ - 'Invalid `help` argument supplied to deprecate, expected a string.', - `See \`${propName}\` prop in \`${componentName}\`.`, - ].join(' ')) + throw new Error( + [ + 'Invalid `help` argument supplied to deprecate, expected a string.', + `See \`${propName}\` prop in \`${componentName}\`.`, + ].join(' '), + ) } // skip if prop is undefined @@ -346,10 +382,12 @@ export const deprecate = (help, validator) => (props, propName, componentName, . error.message = `${error.message} ${validationError.message}` } } else { - throw new Error([ - 'Invalid argument supplied to deprecate, expected a function.', - `See \`${propName}\` prop in \`${componentName}\`.`, - ].join(' ')) + throw new Error( + [ + 'Invalid argument supplied to deprecate, expected a function.', + `See \`${propName}\` prop in \`${componentName}\`.`, + ].join(' '), + ) } } diff --git a/src/lib/htmlPropsUtils.js b/src/lib/htmlPropsUtils.js index a6d374062c..819a9f503a 100644 --- a/src/lib/htmlPropsUtils.js +++ b/src/lib/htmlPropsUtils.js @@ -2,35 +2,78 @@ import _ from 'lodash' export const htmlInputAttrs = [ // REACT - 'selected', 'defaultValue', 'defaultChecked', + 'selected', + 'defaultValue', + 'defaultChecked', // LIMITED HTML PROPS - 'accept', 'autoCapitalize', 'autoComplete', 'autoCorrect', 'autoFocus', 'checked', 'disabled', 'form', 'id', 'list', - 'max', 'maxLength', 'min', 'minLength', 'multiple', 'name', 'pattern', 'placeholder', 'readOnly', 'required', 'step', - 'type', 'value', + 'accept', + 'autoCapitalize', + 'autoComplete', + 'autoCorrect', + 'autoFocus', + 'checked', + 'disabled', + 'form', + 'id', + 'list', + 'max', + 'maxLength', + 'min', + 'minLength', + 'multiple', + 'name', + 'pattern', + 'placeholder', + 'readOnly', + 'required', + 'step', + 'type', + 'value', ] export const htmlInputEvents = [ // EVENTS // keyboard - 'onKeyDown', 'onKeyPress', 'onKeyUp', + 'onKeyDown', + 'onKeyPress', + 'onKeyUp', // focus - 'onFocus', 'onBlur', + 'onFocus', + 'onBlur', // form - 'onChange', 'onInput', + 'onChange', + 'onInput', // mouse - 'onClick', 'onContextMenu', - 'onDrag', 'onDragEnd', 'onDragEnter', 'onDragExit', 'onDragLeave', 'onDragOver', 'onDragStart', 'onDrop', - 'onMouseDown', 'onMouseEnter', 'onMouseLeave', 'onMouseMove', 'onMouseOut', 'onMouseOver', 'onMouseUp', + 'onClick', + 'onContextMenu', + 'onDrag', + 'onDragEnd', + 'onDragEnter', + 'onDragExit', + 'onDragLeave', + 'onDragOver', + 'onDragStart', + 'onDrop', + 'onMouseDown', + 'onMouseEnter', + 'onMouseLeave', + 'onMouseMove', + 'onMouseOut', + 'onMouseOver', + 'onMouseUp', // selection 'onSelect', // touch - 'onTouchCancel', 'onTouchEnd', 'onTouchMove', 'onTouchStart', + 'onTouchCancel', + 'onTouchEnd', + 'onTouchMove', + 'onTouchStart', ] export const htmlInputProps = [...htmlInputAttrs, ...htmlInputEvents] @@ -44,10 +87,7 @@ export const htmlInputProps = [...htmlInputAttrs, ...htmlInputEvents] * @returns {[{}, {}]} An array of objects */ export const partitionHTMLProps = (props, options = {}) => { - const { - htmlProps = htmlInputProps, - includeAria = true, - } = options + const { htmlProps = htmlInputProps, includeAria = true } = options const inputProps = {} const rest = {} diff --git a/test/specs/addons/Confirm/Confirm-test.js b/test/specs/addons/Confirm/Confirm-test.js index 64dfd8bb71..1d3be1585e 100644 --- a/test/specs/addons/Confirm/Confirm-test.js +++ b/test/specs/addons/Confirm/Confirm-test.js @@ -49,22 +49,19 @@ describe('Confirm', () => { describe('size', () => { it('has "small" size by default', () => { - shallow() - .should.have.prop('size', 'small') + shallow().should.have.prop('size', 'small') }) _.forEach(['fullscreen', 'large', 'mini', 'small', 'tiny'], (size) => { it(`applies ${size} size`, () => { - shallow() - .should.have.prop('size', size) + shallow().should.have.prop('size', size) }) }) }) describe('cancelButton', () => { it('is "Cancel" by default', () => { - Confirm.defaultProps.cancelButton - .should.equal('Cancel') + Confirm.defaultProps.cancelButton.should.equal('Cancel') }) it('sets the cancel button text', () => { shallow() @@ -77,8 +74,7 @@ describe('Confirm', () => { describe('confirmButton', () => { it('is "OK" by default', () => { - Confirm.defaultProps.confirmButton - .should.equal('OK') + Confirm.defaultProps.confirmButton.should.equal('OK') }) it('sets the confirm button text', () => { shallow() @@ -97,10 +93,11 @@ describe('Confirm', () => { }) it('omitted when not defined', () => { - const click = () => shallow() - .find('Button') - .first() - .simulate('click') + const click = () => + shallow() + .find('Button') + .first() + .simulate('click') expect(click).to.not.throw() }) @@ -165,9 +162,10 @@ describe('Confirm', () => { describe('onConfirm', () => { it('omitted when not defined', () => { - const click = () => shallow() - .find('Button[primary]') - .simulate('click') + const click = () => + shallow() + .find('Button[primary]') + .simulate('click') expect(click).to.not.throw() }) diff --git a/test/specs/addons/MountNode/lib/computeClassNameDifference-test.js b/test/specs/addons/MountNode/lib/computeClassNameDifference-test.js index 92f8299fe7..31ba002aba 100644 --- a/test/specs/addons/MountNode/lib/computeClassNameDifference-test.js +++ b/test/specs/addons/MountNode/lib/computeClassNameDifference-test.js @@ -21,8 +21,10 @@ describe('computeClassNamesDifference', () => { _.forEach(fixtures, (fixture) => { const { prevClasses, currentClasses, forAdd, forRemoval } = fixture - computeClassNamesDifference(prevClasses, currentClasses) - .should.have.deep.members([forAdd, forRemoval]) + computeClassNamesDifference(prevClasses, currentClasses).should.have.deep.members([ + forAdd, + forRemoval, + ]) }) }) }) diff --git a/test/specs/addons/MountNode/lib/computeClassNames-test.js b/test/specs/addons/MountNode/lib/computeClassNames-test.js index 651fc154c0..f422ecfda1 100644 --- a/test/specs/addons/MountNode/lib/computeClassNames-test.js +++ b/test/specs/addons/MountNode/lib/computeClassNames-test.js @@ -9,13 +9,9 @@ describe('computeClassNames', () => { }) it('combines classNames', () => { - const map = new Set([ - { props: { className: 'foo' } }, - { props: { className: 'bar' } }, - ]) + const map = new Set([{ props: { className: 'foo' } }, { props: { className: 'bar' } }]) - computeClassNames(map) - .should.have.members(['foo', 'bar']) + computeClassNames(map).should.have.members(['foo', 'bar']) }) it('combines only unique classNames', () => { @@ -25,8 +21,7 @@ describe('computeClassNames', () => { { props: { className: 'foo bar baz' } }, ]) - computeClassNames(map) - .should.have.members(['foo', 'bar', 'baz']) + computeClassNames(map).should.have.members(['foo', 'bar', 'baz']) }) it('omits false, undefined and null classNames', () => { @@ -40,8 +35,7 @@ describe('computeClassNames', () => { { props: { className: 'false' } }, ]) - computeClassNames(map) - .should.have.members(['foo', '0', 'false']) + computeClassNames(map).should.have.members(['foo', '0', 'false']) }) it('trims classNames', () => { @@ -50,7 +44,6 @@ describe('computeClassNames', () => { { props: { className: ' baz qux' } }, ]) - computeClassNames(map) - .should.have.members(['foo', 'bar', 'baz', 'qux']) + computeClassNames(map).should.have.members(['foo', 'bar', 'baz', 'qux']) }) }) diff --git a/test/specs/addons/MountNode/lib/getNodeFromProps-test.js b/test/specs/addons/MountNode/lib/getNodeFromProps-test.js index ee8c6a1c56..5f3f9eaa5b 100644 --- a/test/specs/addons/MountNode/lib/getNodeFromProps-test.js +++ b/test/specs/addons/MountNode/lib/getNodeFromProps-test.js @@ -4,13 +4,11 @@ import isBrowser from 'src/lib/isBrowser' describe('getNodeFromProps', () => { describe('browser', () => { it('returns node when it defined', () => { - getNodeFromProps({ node: 'foo' }) - .should.equal('foo') + getNodeFromProps({ node: 'foo' }).should.equal('foo') }) it('returns document.body by default', () => { - getNodeFromProps({}) - .should.equal(document.body) + getNodeFromProps({}).should.equal(document.body) }) }) @@ -24,10 +22,8 @@ describe('getNodeFromProps', () => { }) it('always returns null', () => { - expect(getNodeFromProps({ node: 'foo' })) - .to.be.a('undefined') - expect(getNodeFromProps({ })) - .to.be.a('undefined') + expect(getNodeFromProps({ node: 'foo' })).to.be.a('undefined') + expect(getNodeFromProps({})).to.be.a('undefined') }) }) }) diff --git a/test/specs/addons/Pagination/PaginationItem-test.js b/test/specs/addons/Pagination/PaginationItem-test.js index 3cc3653ec4..463fe9f25f 100644 --- a/test/specs/addons/Pagination/PaginationItem-test.js +++ b/test/specs/addons/Pagination/PaginationItem-test.js @@ -10,42 +10,38 @@ describe('PaginationItem', () => { describe('active', () => { it('is "undefined" by default', () => { - shallow() - .should.have.not.prop('active') + shallow().should.have.not.prop('active') }) it('can pass its value', () => { - shallow() - .should.have.prop('active', true) + shallow().should.have.prop('active', true) }) }) describe('aria-current', () => { it('matches the values of "active" prop by default', () => { - shallow() - .should.have.prop('aria-current', true) + shallow().should.have.prop('aria-current', true) }) it('can be overridden', () => { - shallow() - .should.have.prop('aria-current', false) + shallow().should.have.prop( + 'aria-current', + false, + ) }) }) describe('disabled', () => { it('is "false" by default', () => { - shallow() - .should.have.prop('disabled', false) + shallow().should.have.prop('disabled', false) }) it('is "true" when "type" is "ellipsisItem"', () => { - shallow() - .should.have.prop('disabled', true) + shallow().should.have.prop('disabled', true) }) it('can be overridden', () => { - shallow() - .should.have.prop('disabled', true) + shallow().should.have.prop('disabled', true) }) }) @@ -54,8 +50,7 @@ describe('PaginationItem', () => { const event = { target: null } const onClick = sandbox.spy() - shallow() - .simulate('click', event) + shallow().simulate('click', event) onClick.should.have.been.calledOnce() onClick.should.have.been.calledWithMatch(event, { onClick }) @@ -65,8 +60,7 @@ describe('PaginationItem', () => { const event = { key: 'Enter', target: null } const onClick = sandbox.spy() - shallow() - .simulate('keyDown', event) + shallow().simulate('keyDown', event) onClick.should.have.been.calledOnce() onClick.should.have.been.calledWithMatch(event, { onClick }) @@ -76,8 +70,7 @@ describe('PaginationItem', () => { const event = { target: null } const onClick = sandbox.spy() - shallow() - .simulate('click', event) + shallow().simulate('click', event) onClick.should.have.been.not.called() }) @@ -88,8 +81,7 @@ describe('PaginationItem', () => { const event = { key: 'Enter', target: null } const onKeyDown = sandbox.spy() - shallow() - .simulate('keyDown', event) + shallow().simulate('keyDown', event) onKeyDown.should.have.been.calledOnce() onKeyDown.should.have.been.calledWithMatch(event, { onKeyDown }) @@ -98,18 +90,15 @@ describe('PaginationItem', () => { describe('tabIndex', () => { it('is "0" by default', () => { - shallow() - .should.have.prop('tabIndex', 0) + shallow().should.have.prop('tabIndex', 0) }) it('is "-1" when "type" is "ellipsisItem"', () => { - shallow() - .should.have.prop('tabIndex', -1) + shallow().should.have.prop('tabIndex', -1) }) it('can be overridden', () => { - shallow() - .should.have.prop('tabIndex', 5) + shallow().should.have.prop('tabIndex', 5) }) }) }) diff --git a/test/specs/addons/TransitionablePortal/TransitionablePortal-test.js b/test/specs/addons/TransitionablePortal/TransitionablePortal-test.js index a35b9873b1..cfb3ff85da 100644 --- a/test/specs/addons/TransitionablePortal/TransitionablePortal-test.js +++ b/test/specs/addons/TransitionablePortal/TransitionablePortal-test.js @@ -33,13 +33,13 @@ describe('TransitionablePortal', () => { describe('children', () => { it('renders a Portal', () => { - wrapperShallow() - .should.have.descendants('Portal') + wrapperShallow().should.have.descendants('Portal') }) it('renders a Transition', () => { - wrapperShallow() - .should.have.descendants('Transition') + wrapperShallow().should.have.descendants( + 'Transition', + ) }) }) @@ -85,7 +85,9 @@ describe('TransitionablePortal', () => { it('changes `portalOpen` to false', () => { const trigger =