Add support children for Custom component, Add setSubscribePropsHandler in HOC withStore

Author: iron-tech-space

CHANGELOG.md

@@ -1,10 +1,15 @@
+## 0.0.62
+
+- Add support children for `Custom` component
+- Add `setSubscribePropsHandler` in HOC withStore
+
 ## 0.0.61
 
-- Remove def padding for cell.  
+- Remove def padding for cell.
   Need add `rt-table-cell` in `cellRenderer` for add padding
 - Add `Table` props `cellBordered`, `rowBordered`, `editMode`, `value` and `onChange`
 - Add `setSubscribeProps` from `Table`
-- Add dispatch new events to `${dispatchPath}.events.${nameEvent}`: 
+- Add dispatch new events to `${dispatchPath}.events.${nameEvent}`:
   - `onAddRows`
   - `onAddRow`
   - `onAddRowAsCopy`

dist/index.es.js

@@ -65,7 +65,27 @@ var Button = function Button(props) {
 
 /** Custom компонент */
 var Custom = function Custom(props) {
-    return renderClassic(props.render)(_extends({}, props, { componentType: 'Custom' }));
+    var children = props.children;
+
+    var childNode = null;
+    var childProps = null;
+
+    if (Array.isArray(children)) {
+        console.warn('Custom component: `children` is array. Don\'t render component');
+        return null;
+    } else if (props.render) {
+        // console.log('childNode = props.render')
+        childNode = props.render;
+        childProps = _extends({}, props, { componentType: 'Custom' });
+        return renderClassic(childNode)(childProps);
+    } else if (React.isValidElement(children)) {
+        // console.log('childNode = children')
+        childProps = _extends({}, children.props, props, { componentType: 'Custom' });
+        return React.cloneElement(children, childProps);
+    } else {
+        console.warn('Custom component: not exist valid render');
+        return null;
+    }
 };
 
 /** Компонент заголовка формы */

dist/index.es.js.map

@@ -4,6 +4,8 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
 function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
 
 import React, { useState, useEffect } from 'react';
@@ -13,7 +15,7 @@ import objectPath from "object-path";
 import { setDateStore } from "../../redux/rtd.actions";
 import { dispatchToStore, getObjectExcludedProps, useMounted } from "../utils/baseUtils";
 
-export var withStore = function withStore(Component, antFormItemProps) {
+var withStore = function withStore(Component, antFormItemProps) {
 
     var mapStateToProps = function mapStateToProps(store, ownProps) {
         var subscribe = ownProps.subscribe,
@@ -75,12 +77,21 @@ export var withStore = function withStore(Component, antFormItemProps) {
 
         var isMounted = useMounted();
 
+        var setSubscribePropsHandler = function setSubscribePropsHandler(value) {
+            return setSubscribeProps(function (prevState) {
+                return _extends({}, prevState, value);
+            });
+        };
+
         /** Подписка на изменение props[subscribe.name] в сторе */
         subscribe.map(function (item) {
             return useEffect(function () {
                 if (isMounted && item.name) {
                     // console.log("storeHOC => subscribe: ", props[subscribe.name]);
-                    item.onChange && item.onChange({ value: props[item.name], extraData: props[item.name + 'ExtraData'], setSubscribeProps: setSubscribeProps });
+                    item.onChange && item.onChange({
+                        value: props[item.name],
+                        extraData: props[item.name + 'ExtraData'],
+                        setSubscribeProps: setSubscribePropsHandler });
                 }
                 // console.log("Change Props[2]: ", props.subscribeЗф);
             }, [props[item.name]]);
@@ -107,13 +118,20 @@ export var withStore = function withStore(Component, antFormItemProps) {
         }, [subscribeProps.value]);
 
         var onChange = function onChange() {
-            // console.log('withStore [trigger] ', props.componentType)
+            // console.log('withStore [trigger] ', subscribeProps)
             // const newValue = getValue(...args);
             // dispatchPath && props.setDateStore && props.setDateStore(dispatchPath, newValue);
             if (componentType === 'Button') dispatchToStore({ dispatch: dispatch, setDateStore: setDateStore, value: arguments.length <= 0 ? undefined : arguments[0], extraData: dispatchExtraData });
             // else if(componentType === 'Search')
             //     args[1].preventDefault();
 
+            if (subscribeProps && subscribeProps.hasOwnProperty('value')) {
+                var value = subscribeProps.value,
+                    _subscribeProps = _objectWithoutProperties(subscribeProps, ['value']);
+
+                setSubscribePropsHandler(_subscribeProps);
+            }
+
             props[trigger] && props[trigger].apply(props, arguments);
         };
 
@@ -132,4 +150,5 @@ export var withStore = function withStore(Component, antFormItemProps) {
             props.children
         );
     });
-};
+};
+export { withStore };

dist/index.js

@@ -27,7 +27,7 @@ var rtdReducer = function rtdReducer() {
                 var _newState = _extends({}, state);
                 objectPath.set(_newState, _path, row); // obj.a is now {}
 
-                console.log("Store change: ", _path, row);
+                console.debug("Store change: ", _path, row);
                 // console.group("Store");
                 // console.log("Store: ", newState);
                 // console.log("New Data: ", path, row);

dist/index.js.map

@@ -1,6 +1,6 @@
 {
 	"name": "rt-design",
-	"version": "0.0.61",
+	"version": "0.0.62",
 	"description": "React technical design library",
 	"author": "Iron tech space",
 	"license": "MIT",

lib/components/Base/index.js

@@ -43,7 +43,26 @@ const Button = (props) => {
 
 /** Custom компонент */
 const Custom = (props) => {
-    return renderClassic(props.render)({...props, componentType: 'Custom' })
+    const {children} = props
+    let childNode = null;
+    let childProps = null;
+
+    if (Array.isArray(children)) {
+        console.warn('Custom component: `children` is array. Don\'t render component')
+        return null;
+    } else if(props.render) {
+        // console.log('childNode = props.render')
+        childNode = props.render;
+        childProps = { ...props, componentType: 'Custom' };
+        return renderClassic(childNode)(childProps)
+    } else if(React.isValidElement(children)) {
+        // console.log('childNode = children')
+        childProps = { ...children.props, ...props, componentType: 'Custom' };
+        return  React.cloneElement(children, childProps);
+    } else {
+        console.warn('Custom component: not exist valid render')
+        return null;
+    }
 }
 
 /** Компонент заголовка формы */