Fix with typed resources

folkloreinc · Mar 1, 2018 · bf8e828 · bf8e828
1 parent 02d1bf2
commit bf8e828
Show file tree

Hide file tree

Showing 45 changed files with 815 additions and 677 deletions.
diff --git a/.storybook-package/preview-head.html b/.storybook-package/preview-head.html
@@ -0,0 +1,2 @@
+<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
+<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -0,0 +1,2 @@
+<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
+<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
diff --git a/fields/fields-group/src/FieldsGroup.jsx b/fields/fields-group/src/FieldsGroup.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import get from 'lodash/get';
 import set from 'lodash/set';
 import FormGroup from '@panneau/form-group';
-import { ComponentsCollection } from '@panneau/core';
+import { ComponentsCollection, withFieldsCollection } from '@panneau/core';
 
 const propTypes = {
     name: PropTypes.string,
@@ -50,12 +50,6 @@ const defaultProps = {
     readOnly: false,
 };
 
-const contextTypes = {
-    fieldsCollection: PropTypes.shape({
-        getComponent: PropTypes.func,
-    }),
-};
-
 class FieldsGroup extends Component {
     constructor(props) {
         super(props);
@@ -79,12 +73,7 @@ class FieldsGroup extends Component {
     }
 
     getFieldComponent(key) {
-        const { fieldsComponents, getFieldComponent } = this.props;
-        const fieldsCollection = (
-            this.props.fieldsCollection ||
-            this.context.fieldsCollection ||
-            null
-        );
+        const { fieldsComponents, getFieldComponent, fieldsCollection } = this.props;
         const normalizedKey = ComponentsCollection.normalizeKey(key);
 
         if (getFieldComponent !== null) {
@@ -260,6 +249,5 @@ class FieldsGroup extends Component {
 
 FieldsGroup.propTypes = propTypes;
 FieldsGroup.defaultProps = defaultProps;
-FieldsGroup.contextTypes = contextTypes;
 
-export default FieldsGroup;
+export default withFieldsCollection()(FieldsGroup);
diff --git a/fields/fields-group/src/__stories__/FieldsGroup.story.jsx b/fields/fields-group/src/__stories__/FieldsGroup.story.jsx
@@ -3,13 +3,8 @@ import { action } from '@storybook/addon-actions';// eslint-disable-line import/
 
 import storiesOf from '../../../../.storybook/storiesOf';
 import KeepValue from '../../../../.storybook/KeepValue';
-import fieldsCollection from './fields';
+import fieldsCollection from '../../../fields/src/items';
 import FieldsGroup from '../FieldsGroup';
-import withFieldsCollection from '../../../fields/src/withFieldsCollection';
-
-const FieldsGroupWithCollection = withFieldsCollection({
-    fieldsCollection,
-})(FieldsGroup);
 
 const fields = [
     {
@@ -43,7 +38,8 @@ const fields = [
 storiesOf('FieldsGroup', module)
     .add('simple', () => (
         <KeepValue>
-            <FieldsGroupWithCollection
+            <FieldsGroup
+                fieldsCollection={fieldsCollection}
                 fields={fields}
                 onChange={action('change')}
             />

diff --git a/fields/fields-group/src/__stories__/fields.js b/fields/fields-group/src/__stories__/fields.js
diff --git a/fields/fields/src/index.js b/fields/fields/src/index.js
@@ -1,5 +1,5 @@
 import withFieldsCollection from './withFieldsCollection';
-import fieldsCollection from './fields';
+import fieldsCollection from './items';
 
 export {
     withFieldsCollection,

diff --git a/fields/fields/src/fields.js → fields/fields/src/items.js b/fields/fields/src/fields.js → fields/fields/src/items.js
diff --git a/fields/fields/src/withFieldsCollection.jsx b/fields/fields/src/withFieldsCollection.jsx
@@ -1,83 +1,11 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import invariant from 'invariant';
-import hoistStatics from 'hoist-non-react-statics';
+import { withFieldsCollection as baseWithFieldsCollection } from '@panneau/core';
 
-import defaultFieldsCollection from './fields';
+import defaultFieldsCollection from './items';
 
-function getDisplayName(WrappedComponent) {
-    return WrappedComponent.displayName || WrappedComponent.name || 'Component';
-}
+const withFieldsCollection = opts => baseWithFieldsCollection({
+    withRef: false,
+    fieldsCollection: defaultFieldsCollection,
+    ...opts,
+});
 
-const propTypes = {
-    fieldsCollection: PropTypes.shape({
-        getComponent: PropTypes.func,
-    }),
-};
-
-const defaultProps = {
-    fieldsCollection: null,
-};
-
-const childContextTypes = {
-    fieldsCollection: PropTypes.shape({
-        getComponent: PropTypes.func,
-    }),
-};
-
-export default function withFieldsCollection(opts) {
-    const options = {
-        withRef: false,
-        fieldsCollection: defaultFieldsCollection,
-        ...opts,
-    };
-    return (WrappedComponent) => {
-        class WithFieldsCollection extends Component {
-            static getWrappedInstance() {
-                invariant(
-                    options.withRef,
-                    'To access the wrapped instance, you need to specify `{ withRef: true }` as the third argument of the withFieldsCollection() call.',
-                );
-
-                return this.wrappedInstance;
-            }
-
-            constructor(props) {
-                super(props);
-                this.wrappedInstance = null;
-            }
-
-            getChildContext() {
-                return {
-                    fieldsCollection: options.fieldsCollection,
-                };
-            }
-
-            render() {
-                const props = {
-                    ...this.props,
-                    fieldsCollection: options.fieldsCollection,
-                };
-                if (options.withRef) {
-                    props.ref = (c) => {
-                        this.wrappedInstance = c;
-                    };
-                }
-
-                return (
-                    <WrappedComponent {...props} />
-                );
-            }
-        }
-
-        WithFieldsCollection.propTypes = propTypes;
-        WithFieldsCollection.defaultProps = defaultProps;
-        WithFieldsCollection.childContextTypes = childContextTypes;
-        WithFieldsCollection.displayName = `withFieldsCollection(${getDisplayName(WrappedComponent)})`;
-        WithFieldsCollection.WrappedComponent = WrappedComponent;
-
-        const WithFieldsCollectionComponent = hoistStatics(WithFieldsCollection, WrappedComponent);
-
-        return WithFieldsCollectionComponent;
-    };
-}
+export default withFieldsCollection;
diff --git a/forms/forms/src/withFormsCollection.jsx b/forms/forms/src/withFormsCollection.jsx
@@ -1,85 +1,11 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import invariant from 'invariant';
-import hoistStatics from 'hoist-non-react-statics';
+import { withFormsCollection as baseWithFormsCollection } from '@panneau/core';
 
-import defaultCollection from './items';
+import defaultFormsCollection from './items';
 
-function getDisplayName(WrappedComponent) {
-    return WrappedComponent.displayName || WrappedComponent.name || 'Component';
-}
+const withFormsCollection = opts => baseWithFormsCollection({
+    withRef: false,
+    formsCollection: defaultFormsCollection,
+    ...opts,
+});
 
-const propTypes = {
-    formsCollection: PropTypes.shape({
-        getComponent: PropTypes.func,
-    }),
-};
-
-const defaultProps = {
-    formsCollection: null,
-};
-
-const childContextTypes = {
-    formsCollection: PropTypes.shape({
-        getComponent: PropTypes.func,
-    }),
-};
-
-export default function withFormsCollection(opts) {
-    const options = {
-        withRef: false,
-        formsCollection: defaultCollection,
-        ...opts,
-    };
-    return (WrappedComponent) => {
-        class WithFormsCollection extends Component {
-            static getWrappedInstance() {
-                invariant(
-                    options.withRef,
-                    'To access the wrapped instance, you need to specify `{ withRef: true }` as the third argument of the withFormsCollection() call.',
-                );
-
-                return this.wrappedInstance;
-            }
-
-            constructor(props) {
-                super(props);
-                this.wrappedInstance = null;
-            }
-
-            getChildContext() {
-                return {
-                    formsCollection: options.formsCollection,
-                };
-            }
-
-            render() {
-                const props = {
-                    ...this.props,
-                    formsCollection: options.formsCollection,
-                };
-                if (options.withRef) {
-                    props.ref = (c) => {
-                        this.wrappedInstance = c;
-                    };
-                }
-
-                return (
-                    <WrappedComponent {...props} />
-                );
-            }
-        }
-
-        WithFormsCollection.propTypes = propTypes;
-        WithFormsCollection.defaultProps = defaultProps;
-        WithFormsCollection.childContextTypes = childContextTypes;
-        WithFormsCollection.displayName = `withFormsCollection(${getDisplayName(WrappedComponent)})`;
-        WithFormsCollection.WrappedComponent = WrappedComponent;
-
-        const WithFormsCollectionComponent = hoistStatics(
-            WithFormsCollection,
-            WrappedComponent,
-        );
-        return WithFormsCollectionComponent;
-    };
-}
+export default withFormsCollection;
diff --git a/forms/normal/package.json b/forms/normal/package.json
@@ -62,6 +62,7 @@
     "react-intl": "^2.4.0"
   },
   "devDependencies": {
+    "@panneau/fields": "^0.3.70",
     "react": ">=15.0.0 || ^16.0.0",
     "react-dom": ">=15.0.0 || ^16.0.0"
   },

diff --git a/forms/normal/src/NormalForm.jsx b/forms/normal/src/NormalForm.jsx
@@ -149,7 +149,7 @@ class NormalForm extends Component {
         } else {
             // @TODO
             this.setState({
-                generalError: generalErrorDefaultMessage,
+                generalError: generalErrorDefaultMessage, // eslint-disable-line
             });
         }
     }

diff --git a/forms/normal/src/__stories__/NormalForm.story.jsx b/forms/normal/src/__stories__/NormalForm.story.jsx
@@ -1,13 +1,17 @@
 import React from 'react';
-import { action } from '@storybook/addon-actions';// eslint-disable-line import/no-extraneous-dependencies
+/* eslint-disable import/no-extraneous-dependencies */
+import { action } from '@storybook/addon-actions';
 import { withFieldsCollection } from '@panneau/fields';
+/* eslint-enable import/no-extraneous-dependencies */
 import { IntlProvider } from 'react-intl';
 
 import storiesOf from '../../../../.storybook/storiesOf';
 import KeepValue from '../../../../.storybook/KeepValue';
 import NormalForm from '../NormalForm';
 
-const NormalFormWithFields = withFieldsCollection()(NormalForm);
+const NormalFormWithFields = withFieldsCollection({
+    childContext: true,
+})(NormalForm);
 
 const fields = [
     {

diff --git a/layouts/core/src/Navbar.jsx b/layouts/core/src/Navbar.jsx
@@ -37,7 +37,6 @@ class Navbar extends Component {
 
         this.state = {
             opened: props.opened,
-            dropdownOpenedIndex: -1,
         };
     }
 
@@ -64,21 +63,13 @@ class Navbar extends Component {
     }
 
     onClickItem(e, { index, ...it }, relIndex, position) {
-        if (it.dropdown) {
-            e.preventDefault();
-            this.setState(({ dropdownOpenedIndex }) => ({
-                dropdownOpenedIndex: index !== dropdownOpenedIndex ? index : -1,
-            }));
-        }
-
         const { onClickItem } = this.props;
         if (onClickItem !== null) {
             onClickItem(e, it, index, position);
         }
     }
 
     renderItem(it, index, position) {
-        const { dropdownOpenedIndex } = this.state;
         const link = get(it, 'link', '#');
         const divider = get(it, 'type', 'item') === 'divider';
         const label = get(it, 'label', '');
@@ -96,7 +87,6 @@ class Navbar extends Component {
                 className={classNames({
                     dropdown: it.dropdown,
                     divider,
-                    open: dropdownOpenedIndex === it.index,
                 })}
             >
                 { !divider ? (

diff --git a/layouts/layouts/src/index.js b/layouts/layouts/src/index.js
@@ -1,8 +1,6 @@
 import withLayoutsCollection from './withLayoutsCollection';
-import layoutsCollection from './layouts';
+import layoutsCollection from './items';
 
-export {
-    withLayoutsCollection,
-};
+export { withLayoutsCollection };
 
 export default layoutsCollection;
diff --git a/layouts/layouts/src/layouts.js → layouts/layouts/src/items.js b/layouts/layouts/src/layouts.js → layouts/layouts/src/items.js