feat: replace withStyles wrapper with useEffect and remove customStyl…

…es property (#873)
SAP · Feb 17, 2020 · 6b72a7e · 6b72a7e
1 parent d8784ac
commit 6b72a7e
Show file tree

Hide file tree

Showing 127 changed files with 696 additions and 1,230 deletions.
diff --git a/.size-limit b/.size-limit
@@ -3,6 +3,6 @@
     name: "Fundamental-React Size",
     webpack: true,
     path: "lib/index.js",
-    limit: "250 KB"
+    limit: "180 KB"
   }
 ]
diff --git a/devtools/buildIndexFiles.js b/devtools/buildIndexFiles.js
@@ -40,9 +40,9 @@ componentDirs.map((directory) => {
 
         Object.keys(components).map((component) => {
             if (component === 'default') {
-                //components wrapped in withStyles HOC
+                //components wrapped in HOC
                 if (components.default.render) {
-                    fileContents += `export { default as ${components.default.render.displayName} } from './${fileName}';\n`;
+                    fileContents += `export { default as ${components.default.render.displayName || components.default.displayName} } from './${fileName}';\n`;
                 } else {
                     //components not wrapped in HOC
                     fileContents += `export { default as ${components.default.name} } from './${fileName}';\n`;

diff --git a/src/ActionBar/ActionBar.js b/src/ActionBar/ActionBar.js
@@ -3,15 +3,21 @@ import ActionBarBack from './_ActionBarBack';
 import ActionBarHeader from './_ActionBarHeader';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
-import React from 'react';
-import withStyles from '../utils/WithStyles/WithStyles';
+import React, { useEffect } from 'react';
 
 const ActionBar = React.forwardRef(({ children, className, disableStyles, ...props }, ref) => {
     const actionBarClasses = classnames(
         'fd-action-bar',
         className
     );
 
+    useEffect(() => {
+        if (!disableStyles) {
+            require('fundamental-styles/dist/fonts.css');
+            require('fundamental-styles/dist/action-bar.css');
+        }
+    }, []);
+
     return (
         <div {...props}
             className={actionBarClasses}
@@ -26,14 +32,11 @@ ActionBar.displayName = 'ActionBar';
 ActionBar.propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
-    customStyles: PropTypes.object,
     disableStyles: PropTypes.bool
 };
 
 ActionBar.Actions = ActionBarActions;
 ActionBar.Back = ActionBarBack;
 ActionBar.Header = ActionBarHeader;
 
-export { ActionBar as __ActionBar };
-
-export default withStyles(ActionBar, { cssFile: 'action-bar', fonts: true });
+export default ActionBar;
diff --git a/src/ActionBar/__stories__/ActionBar.stories.js b/src/ActionBar/__stories__/ActionBar.stories.js
@@ -27,14 +27,4 @@ storiesOf('Components|ActionBar', module)
                 <Button disableStyles option='emphasized'>Button</Button>
             </ActionBar.Actions>
         </ActionBar>
-    ))
-    .add('custom styles', () => (
-        <ActionBar customStyles={require('../../utils/WithStyles/customStylesTest.css')}>
-            <ActionBar.Back disableStyles />
-            <ActionBar.Header description={'Action Bar Description'} title={'Page Title'} />
-            <ActionBar.Actions>
-                <Button disableStyles>Button</Button>
-                <Button disableStyles option='emphasized'>Button</Button>
-            </ActionBar.Actions>
-        </ActionBar>
     ));
diff --git a/src/Alert/Alert.js b/src/Alert/Alert.js
@@ -4,93 +4,91 @@ import CustomPropTypes from '../utils/CustomPropTypes/CustomPropTypes';
 import Icon from '../Icon/Icon';
 import Link from '../Link/Link';
 import PropTypes from 'prop-types';
-import withStyles from '../utils/WithStyles/WithStyles';
-import React, { Component } from 'react';
+import React, { useEffect, useState } from 'react';
 
-class Alert extends Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            isActive: true
-        };
-    }
+const Alert = (props) => {
 
-    closeAlertHandler = (e) => {
-        this.setState({
-            isActive: false
-        }, () => {
-            this.props.onCloseClicked(e);
-        });
+    let [active, setActive] = useState(true);
+
+    useEffect(() => {
+        if (!disableStyles) {
+            require('fundamental-styles/dist/fonts.css');
+            require('fundamental-styles/dist/icon.css');
+            require('fundamental-styles/dist/alert.css');
+        }
+    }, []);
+
+    const {
+        onCloseClicked,
+        buttonProps,
+        disableStyles,
+        type,
+        link,
+        linkProps,
+        linkText,
+        localizedText,
+        dismissible,
+        children,
+        className,
+        ...otherProps
+    } = props;
+
+    const closeAlertHandler = (e) => {
+        setActive(false);
+        onCloseClicked(e);
     };
 
-    render() {
-        const {
-            onCloseClicked,
-            buttonProps,
-            disableStyles,
-            type,
-            link,
-            linkProps,
-            linkText,
-            localizedText,
-            dismissible,
-            children,
-            className,
-            ...props
-        } = this.props;
 
-        const alertClasses = classnames(
-            'fd-alert',
-            {
-                'fd-alert--dismissible': dismissible,
-                [`fd-alert--${type}`]: !!type
-            },
-            className
-        );
+    const alertClasses = classnames(
+        'fd-alert',
+        {
+            'fd-alert--dismissible': dismissible,
+            [`fd-alert--${type}`]: !!type
+        },
+        className
+    );
 
-        return (
-            <div>
-                {this.state.isActive && (
-                    <div
-                        {...props}
-                        className={alertClasses}
-                        role='alert'>
-                        {dismissible && (
-                            <button
-                                {...buttonProps}
-                                aria-controls='j2ALl423'
-                                aria-label={localizedText.close}
-                                className='fd-alert__close'
-                                onClick={this.closeAlertHandler} />
+    return (
+        <div>
+            {active && (
+                <div
+                    {...otherProps}
+                    className={alertClasses}
+                    role='alert'>
+                    {dismissible && (
+                        <button
+                            {...buttonProps}
+                            aria-controls='j2ALl423'
+                            aria-label={localizedText.close}
+                            className='fd-alert__close'
+                            onClick={closeAlertHandler} />
+                    )}
+                    <div className='fd-alert__text'>
+                        {type && (
+                            <Icon disableStyles={disableStyles} glyph={`message-${type}`} />
+                        )}
+                        {children}
+                        {link && (
+                            <Link
+                                {...linkProps}
+                                disableStyles={disableStyles}
+                                href={link}>
+                                {linkText}{' '}
+                            </Link>
                         )}
-                        <div className='fd-alert__text'>
-                            {type && (
-                                <Icon disableStyles={disableStyles} glyph={`message-${type}`} />
-                            )}
-                            {children}
-                            {link && (
-                                <Link
-                                    {...linkProps}
-                                    disableStyles={disableStyles}
-                                    href={link}>
-                                    {linkText}{' '}
-                                </Link>
-                            )}
-                        </div>
                     </div>
-                )}
-            </div>
-        );
-    }
-}
+                </div>
+            )}
+        </div>
+    );
+};
 
 Alert.displayName = 'Alert';
 
 Alert.propTypes = {
     buttonProps: PropTypes.object,
     children: PropTypes.node,
     className: PropTypes.string,
-    customStyles: PropTypes.object,
     disableStyles: PropTypes.bool,
     dismissible: PropTypes.bool,
     link: PropTypes.string,
@@ -121,6 +119,4 @@ Alert.propDescriptions = {
     onCloseClicked: 'Callback function passing event when close button is clicked.'
 };
 
-export { Alert as __Alert };
-
-export default withStyles(Alert, { cssFile: 'alert', fonts: true, icons: true });
+export default Alert;
diff --git a/src/Alert/Alert.test.js b/src/Alert/Alert.test.js
@@ -1,6 +1,5 @@
 import Alert from './Alert';
 import { mount } from 'enzyme';
-import { mountComponentWithStyles } from '../utils/testUtils';
 import React from 'react';
 import renderer from 'react-test-renderer';
 
@@ -35,11 +34,12 @@ describe('<Alert />', () => {
         tree = component.toJSON();
         expect(tree).toMatchSnapshot();
 
-        let wrapper = mountComponentWithStyles(basicAlert);
+        let wrapper = mount(basicAlert);
 
-        expect(wrapper.state(['isActive'])).toBeTruthy();
+        expect(wrapper.exists('.fd-alert')).toBe(true);
         wrapper.find('button.fd-alert__close').simulate('click');
-        expect(wrapper.state(['isActive'])).toBeFalsy();
+
+        expect(wrapper.exists('.fd-alert')).toBe(false);
     });
 
     test('create non-dismissible alert', () => {

diff --git a/src/Alert/__stories__/Alert.stories.js b/src/Alert/__stories__/Alert.stories.js
@@ -23,13 +23,4 @@ storiesOf('Components|Alert', module)
             linkText='link'>
                     Default alert
         </Alert>
-    ))
-    .add('custom styles', () => (
-        <Alert
-            customStyles={require('../../utils/WithStyles/customStylesTest.css')}
-            dismissible
-            link='#'
-            linkText='link'>
-                    Default alert
-        </Alert>
     ));
diff --git a/src/Badge/Badge.js b/src/Badge/Badge.js
@@ -1,11 +1,17 @@
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
-import React from 'react';
-import withStyles from '../utils/WithStyles/WithStyles';
 import { BADGE_MODIFIERS, BADGE_TYPES } from '../utils/constants';
-
+import React, { useEffect } from 'react';
 
 const Badge = React.forwardRef(({ type, modifier, children, className, disableStyles, ...props }, ref) => {
+
+    useEffect(() => {
+        if (!disableStyles) {
+            require('fundamental-styles/dist/fonts.css');
+            require('fundamental-styles/dist/badge.css');
+        }
+    }, []);
+
     const badgeClasses = classnames(
         'fd-badge',
         {
@@ -27,12 +33,9 @@ Badge.displayName = 'Badge';
 Badge.propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
-    customStyles: PropTypes.object,
     disableStyles: PropTypes.bool,
     modifier: PropTypes.oneOf(BADGE_MODIFIERS),
     type: PropTypes.oneOf(BADGE_TYPES)
 };
 
-export { Badge as __Badge };
-
-export default withStyles(Badge, { cssFile: 'badge', fonts: true });
+export default Badge;
diff --git a/src/Badge/Counter.js b/src/Badge/Counter.js
@@ -1,10 +1,17 @@
 import classnames from 'classnames';
 import CustomPropTypes from '../utils/CustomPropTypes/CustomPropTypes';
 import PropTypes from 'prop-types';
-import React from 'react';
-import withStyles from '../utils/WithStyles/WithStyles';
+import React, { useEffect } from 'react';
 
 const Counter = React.forwardRef(({ localizedText, notification, children, className, disableStyles, ...props }, ref) => {
+
+    useEffect(() => {
+        if (!disableStyles) {
+            require('fundamental-styles/dist/fonts.css');
+            require('fundamental-styles/dist/counter.css');
+        }
+    }, []);
+
     const counterClasses = classnames(
         'fd-counter',
         {
@@ -26,7 +33,6 @@ Counter.displayName = 'Counter';
 Counter.propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
-    customStyles: PropTypes.object,
     disableStyles: PropTypes.bool,
     localizedText: CustomPropTypes.i18n({
         counterLabel: PropTypes.string
@@ -47,6 +53,4 @@ Counter.propDescriptions = {
     notification: 'Set to **true** to enable counter with notification.'
 };
 
-export { Counter as __Counter };
-
-export default withStyles(Counter, { cssFile: 'counter', fonts: true });
+export default Counter;
diff --git a/src/Badge/Label.js b/src/Badge/Label.js
@@ -1,10 +1,17 @@
 import classnames from 'classnames';
 import { LABEL_TYPES } from '../utils/constants';
 import PropTypes from 'prop-types';
-import React from 'react';
-import withStyles from '../utils/WithStyles/WithStyles';
+import React, { useEffect } from 'react';
 
 const Label = React.forwardRef(({ type, children, className, disableStyles, ...props }, ref) => {
+
+    useEffect(() => {
+        if (!disableStyles) {
+            require('fundamental-styles/dist/fonts.css');
+            require('fundamental-styles/dist/label.css');
+        }
+    }, []);
+
     const labelClasses = classnames(
         'fd-label',
         {
@@ -21,11 +28,8 @@ Label.displayName = 'Label';
 Label.propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
-    customStyles: PropTypes.object,
     disableStyles: PropTypes.bool,
     type: PropTypes.oneOf(LABEL_TYPES)
 };
 
-export { Label as __Label };
-
-export default withStyles(Label, { cssFile: 'label', font: true });
+export default Label;