feffery_utils_components 0.0.22 → 0.0.24

package/src/lib/components/sortable/FefferySortableItem.react.js

@@ -0,0 +1,61 @@
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+
+// 定义排序项组件FefferySortableItem
+const FefferySortableItem = (props) => {
+    const {
+        id,
+        children,
+        style,
+        className,
+        setProps,
+        loading_state
+    } = props;
+
+    return (<div
+        id={id}
+        style={style}
+        className={className}
+        data-dash-is-loading={
+            (loading_state && loading_state.is_loading) || undefined
+        } >{children}</div>);
+}
+
+// 定义参数或属性
+FefferySortableItem.propTypes = {
+
+    children: PropTypes.node,
+
+    id: PropTypes.string,
+
+    style: PropTypes.object,
+
+    className: PropTypes.string,
+
+    /**
+     * Dash-assigned callback that should be called to report property changes
+     * to Dash, to make them available for callbacks.
+     */
+    setProps: PropTypes.func,
+
+    loading_state: PropTypes.shape({
+        /**
+         * Determines if the component is loading or not
+         */
+        is_loading: PropTypes.bool,
+        /**
+         * Holds which property is loading
+         */
+        prop_name: PropTypes.string,
+        /**
+         * Holds the name of the component that is loading
+         */
+        component_name: PropTypes.string
+    })
+};
+
+// 设置默认参数
+FefferySortableItem.defaultProps = {
+}
+
+export default React.memo(FefferySortableItem);

package/src/lib/components/styles.css

@@ -94,3 +94,7 @@
   background-color: #ffd54f;
   font-weight: "normal";
 }
+
+.sortable-helper {
+  box-shadow: 0 0 7px rgba(0, 0, 0, 0.15);
+}

package/src/lib/index.js

@@ -25,6 +25,7 @@ import FefferyWheelColorPicker from "./components/colorPickers/FefferyWheelColor
 import FefferyHighlightWords from "./components/FefferyHighlightWords.react";
 import FefferyDocumentVisibility from "./components/listeners/FefferyDocumentVisibility.react";
 import FefferyExternalCss from "./components/dom/FefferyExternalCss.react";
+import FefferyExternalJs from "./components/dom/FefferyExternalJs.react";
 import FefferySetTitle from "./components/dom/FefferySetTitle.react";
 import FefferyResponsive from "./components/listeners/FefferyResponsive.react";
 import FefferyGeolocation from "./components/listeners/FefferyGeolocation.react";
@@ -33,6 +34,8 @@ import FefferyWindowSize from "./components/listeners/FefferyWindowSize.react";
 import FefferyKeyPress from "./components/listeners/FefferyKeyPress.react";
 import FefferyTimeout from "./components/FefferyTimeout.react";
 import FefferyCountDown from "./components/FefferyCountDown.react";
+import FefferySortableItem from "./components/sortable/FefferySortableItem.react";
+import FefferySortableContainer from "./components/sortable/FefferySortableContainer.react";
 
 /* 
 忽略部分设计React中规范的console警告信息
@@ -83,6 +86,7 @@ export {
     FefferyHighlightWords,
     FefferyDocumentVisibility,
     FefferyExternalCss,
+    FefferyExternalJs,
     FefferySetTitle,
     FefferyResponsive,
     FefferyGeolocation,
@@ -90,5 +94,7 @@ export {
     FefferyWindowSize,
     FefferyKeyPress,
     FefferyTimeout,
-    FefferyCountDown
+    FefferyCountDown,
+    FefferySortableItem,
+    FefferySortableContainer
 };

package/tests/FefferyDivHoverTest/app.py

@@ -14,10 +14,14 @@ app.layout = html.Div(
     [
         fuc.FefferyDiv(
             id='div-demo',
+            className={
+                '&:hover': {
+                    'background': 'lightgrey',
+                }
+            },
             style={
                 'width': '200px',
                 'height': '100px',
-                'background': 'lightgrey',
                 'border': '1ox dashed black'
             }
         )

package/tests/SortableTest/app.py

@@ -0,0 +1,46 @@
+if True:
+    import sys
+    sys.path.append('../..')
+    import dash
+    import json
+    from dash import html
+    import feffery_utils_components as fuc
+    from dash.dependencies import Input, Output
+
+app = dash.Dash(__name__)
+
+app.layout = html.Div(
+    [
+        fuc.FefferySortableContainer(
+            [
+                fuc.FefferySortableItem(
+                    html.Div(
+                        f'记录{i}',
+                        style={
+                            'height': '60px',
+                            'borderBottom': '1px solid #efefef',
+                            'display': 'flex',
+                            'alignItems': 'center',
+                            'paddingLeft': '25px',
+                            'background': 'white'
+                        }
+                    )
+                )
+                for i in range(10)
+            ],
+            style={
+                'border': '1px solid #efefef'
+            }
+        )
+    ],
+    style={
+        'paddingTop': '50px',
+        'paddingBottom': '50px',
+        'width': '600px',
+        'margin': '0 auto'
+    }
+)
+
+
+if __name__ == '__main__':
+    app.run(debug=True)