feffery_utils_components 0.2.0-rc20 → 0.2.0-rc22

package/src/lib/components/styles.css

@@ -1,260 +1,262 @@
 /* 补充部分css变量 */
 :root {
-  --sl-border-radius-circle: 50%;
-  --sl-transition-fast: 150ms;
+    --sl-border-radius-circle: 50%;
+    --sl-transition-fast: 150ms;
 }
 
 body {
-  margin: 0;
+    margin: 0;
 }
 
 .modal-footer {
-  background: var(--ninja-footer-background);
-  padding: 0.5em 1em;
-  display: flex;
-  border-top: var(--ninja-separate-border);
-  color: var(--ninja-secondary-text-color);
+    background: var(--ninja-footer-background);
+    padding: 0.5em 1em;
+    display: flex;
+    border-top: var(--ninja-separate-border);
+    color: var(--ninja-secondary-text-color);
 }
 
 .modal-footer .help {
-  display: flex;
-  margin-right: 1em;
-  align-items: center;
-  font-size: 0.75em;
+    display: flex;
+    margin-right: 1em;
+    align-items: center;
+    font-size: 0.75em;
 }
 
 .ninja-examplekey {
-  background: var(--ninja-secondary-background-color);
-  padding: 0.06em 0.25em;
-  border-radius: var(--ninja-key-border-radius);
-  color: var(--ninja-secondary-text-color);
-  height: 1em;
-  margin-right: 0.5em;
-  font-size: 1.25em;
-  fill: currentColor;
+    background: var(--ninja-secondary-background-color);
+    padding: 0.06em 0.25em;
+    border-radius: var(--ninja-key-border-radius);
+    color: var(--ninja-secondary-text-color);
+    height: 1em;
+    margin-right: 0.5em;
+    font-size: 1.25em;
+    fill: currentColor;
 }
 
 .ninja-examplekey.esc {
-  width: auto;
-  height: auto;
-  font-size: 1.1em;
+    width: auto;
+    height: auto;
+    font-size: 1.1em;
 }
 
 .ninja-examplekey.backspace {
-  opacity: 0.7;
+    opacity: 0.7;
 }
 
 .feffery-split-vertical {
-  border: none;
+    border: none;
 }
 
 .feffery-split-horizontal {
-  display: flex;
-  flex-direction: row;
+    display: flex;
+    flex-direction: row;
 }
 
 .gutter {
-  position: relative;
+    position: relative;
 }
 
 .gutter.gutter-horizontal {
-  cursor: col-resize;
+    cursor: col-resize;
 }
 
 .gutter.gutter-horizontal:after {
-  content: "";
-  box-sizing: border-box;
-  border-right: 1px solid #e6e6e6;
-  inset: 0;
-  position: absolute;
-  transform: translateX(-50%);
-  left: 1px;
+    content: "";
+    box-sizing: border-box;
+    border-right: 1px solid #e6e6e6;
+    inset: 0;
+    position: absolute;
+    transform: translateX(-50%);
+    left: 1px;
 }
 
 .gutter.gutter-vertical {
-  cursor: row-resize;
+    cursor: row-resize;
 }
 
 .gutter.gutter-horizontal:after {
-  content: "";
-  box-sizing: border-box;
-  border-right: 1px solid #e6e6e6;
-  inset: 0;
-  position: absolute;
-  transform: translateX(-50%);
-  left: 1px;
+    content: "";
+    box-sizing: border-box;
+    border-right: 1px solid #e6e6e6;
+    inset: 0;
+    position: absolute;
+    transform: translateX(-50%);
+    left: 1px;
 }
 
 .gutter.gutter-vertical:after {
-  content: "";
-  box-sizing: border-box;
-  border-bottom: 1px solid #e6e6e6;
-  inset: 0;
-  transform: translateY(-50%);
-  position: absolute;
-  top: 1px;
+    content: "";
+    box-sizing: border-box;
+    border-bottom: 1px solid #e6e6e6;
+    inset: 0;
+    transform: translateY(-50%);
+    position: absolute;
+    top: 1px;
 }
 
 .copy-to-clipboard-button:hover {
-  opacity: 0.8;
+    opacity: 0.8;
 }
 
 /* FefferyHighlightWords高亮相关样式 */
 .feffery-highlight-words-highlight {
-  background-color: #ffd54f;
-  font-weight: "normal";
+    background-color: #ffd54f;
+    font-weight: "normal";
 }
 
 .sortable-helper {
-  box-shadow: 0 0 7px rgba(0, 0, 0, 0.15);
+    box-shadow: 0 0 7px rgba(0, 0, 0, 0.15);
 }
 
 /* FefferyDiv阴影相关样式效果 */
 .feffery-div-always-shadow {
-  box-shadow: 0 8px 24px rgba(81, 87, 103, 0.16);
+    box-shadow: 0 8px 24px rgba(81, 87, 103, 0.16);
 }
 
 .feffery-div-always-shadow-light {
-  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
+    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
 }
 
 .feffery-div-hover-shadow {
-  transition: box-shadow 0.3s ease-in-out;
+    transition: box-shadow 0.3s ease-in-out;
 }
 
 .feffery-div-hover-shadow-light {
-  transition: box-shadow 0.3s ease-in-out;
+    transition: box-shadow 0.3s ease-in-out;
 }
 
 .feffery-div-hover-shadow:hover {
-  box-shadow: 0 8px 24px rgba(81, 87, 103, 0.16);
-  transition: box-shadow 0.3s ease-in-out;
+    box-shadow: 0 8px 24px rgba(81, 87, 103, 0.16);
+    transition: box-shadow 0.3s ease-in-out;
 }
 
 .feffery-div-hover-shadow-light:hover {
-  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
-  transition: box-shadow 0.3s ease-in-out;
+    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
+    transition: box-shadow 0.3s ease-in-out;
 }
 
 /* FefferyDiv滚动条相关样式 */
 .feffery-div-scrollbar-simple::-webkit-scrollbar {
-  width: 6px;
+    width: 6px;
 }
 
 .feffery-div-scrollbar-simple::-webkit-scrollbar-thumb {
-  background-color: #e4e6eb;
-  outline: none;
-  border-radius: 2px;
+    background-color: #e4e6eb;
+    outline: none;
+    border-radius: 2px;
 }
 
 .feffery-div-scrollbar-simple::-webkit-scrollbar-track {
-  box-shadow: none;
-  border-radius: 2px;
+    box-shadow: none;
+    border-radius: 2px;
 }
 
 .feffery-div-scrollbar-hidden::-webkit-scrollbar {
-  width: 0;
+    width: 0;
 }
 
 .feffery-div-scrollbar-hidden {
-  scrollbar-width: none;
+    scrollbar-width: none;
 }
 
 .github-picker {
-  box-sizing: content-box;
+    box-sizing: content-box;
 }
 
 /* 可拖拽网格项样式美化 */
 .feffery-grid-item-container {
-  position: relative;
-  box-shadow: 0px 0px 6px rgba(0, 0, 0, .12);
-  border-radius: 5px;
-  padding: 6px 4px;
-  background: #fff;
+    position: relative;
+    box-shadow: 0px 0px 6px rgba(0, 0, 0, .12);
+    border-radius: 5px;
+    padding: 6px 4px;
+    background: #fff;
+    box-sizing: border-box;
 }
 
 .feffery-grid-item-container>div {
-  height: 100%;
-  overflow: auto;
-  padding: 25px 5px 5px 5px;
+    height: 100%;
+    overflow: auto;
+    padding: 25px 5px 5px 5px;
+    box-sizing: border-box;
 }
 
 .feffery-grid-item-container>div::-webkit-scrollbar-thumb {
-  background-color: #bfbfbf;
-  outline: none;
-  border-radius: 6px;
+    background-color: #bfbfbf;
+    outline: none;
+    border-radius: 6px;
 }
 
 .feffery-grid-item-container>div::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
+    width: 6px;
+    height: 6px;
 }
 
 /* firefox */
 .feffery-grid-item-container>div {
-  scrollbar-width: thin;
+    scrollbar-width: thin;
 }
 
 .feffery-grid-item-dragger {
-  cursor: all-scroll;
-  touch-action: none;
-  border-radius: 5px;
-  border: none;
-  outline: none;
-  appearance: none;
-  background-color: transparent;
-  -webkit-tap-highlight-color: transparent;
-  position: absolute;
-  top: 5px;
-  right: 3px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 24px;
-  transition: background 0.15s ease;
-  z-index: 2;
+    cursor: all-scroll;
+    touch-action: none;
+    border-radius: 5px;
+    border: none;
+    outline: none;
+    appearance: none;
+    background-color: transparent;
+    -webkit-tap-highlight-color: transparent;
+    position: absolute;
+    top: 5px;
+    right: 3px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 24px;
+    transition: background 0.15s ease;
+    z-index: 2;
 }
 
 .feffery-grid-item-dragger:hover {
-  background: #f2f2f2;
-  transition: background 0.15s ease;
+    background: #f2f2f2;
+    transition: background 0.15s ease;
 }
 
 .feffery-draggable-dragger {
-  touch-action: none;
-  border-radius: 5px;
-  border: none;
-  outline: none;
-  appearance: none;
-  background-color: transparent;
-  -webkit-tap-highlight-color: transparent;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 24px;
-  transition: background 0.15s ease;
-  z-index: 2;
+    touch-action: none;
+    border-radius: 5px;
+    border: none;
+    outline: none;
+    appearance: none;
+    background-color: transparent;
+    -webkit-tap-highlight-color: transparent;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 24px;
+    transition: background 0.15s ease;
+    z-index: 2;
 }
 
 .feffery-draggable-dragger:hover {
-  /* background: #f2f2f2; */
-  transition: background 0.15s ease;
+    /* background: #f2f2f2; */
+    transition: background 0.15s ease;
 }
 
 .react-json-view svg {
-  vertical-align: middle !important;
+    vertical-align: middle !important;
 }
 
 /* firefox */
 ninja-keys::part(actions-list) {
-  scrollbar-width: thin;
+    scrollbar-width: thin;
 }
 
 ninja-keys {
-  --ninja-z-index: 99999;
+    --ninja-z-index: 99999;
 }
 
 /* 提升卷帘拖拽条默认层级 */
 [data-rcs="handle-container"] {
-  z-index: 500;
+    z-index: 500;
 }

package/src/lib/fragments/draggable/FefferyGrid.react.js

@@ -8,84 +8,85 @@ import FefferyStyle from '../../components/FefferyStyle.react';
 
 const ResponsiveReactGridLayout = WidthProvider(Responsive);
 
-// 定义可拖拽网格组件FefferyGrid
+/**
+ * 可拖拽网格组件FefferyGrid
+ */
 const FefferyGrid = (props) => {
+    let {
+        id,
+        children,
+        placeholder,
+        key,
+        style,
+        className,
+        height,
+        autoSize,
+        compactType,
+        margin,
+        containerPadding,
+        rowHeight,
+        isDraggable,
+        isResizable,
+        isBounded,
+        allowOverlap,
+        breakpoints,
+        cols,
+        layouts,
+        placeholderBackground,
+        placeholderOpacity,
+        placeholderBorder,
+        placeholderBorderRadius,
+        debug,
+        setProps,
+        loading_state
+    } = props;
+
+    children = parseChildrenToArray(children)
+
+    const gridItems = children && children.map(
+        (child) => {
+            let childProps = resolveChildProps(child)
+
+            return (
+                <div
+                    className={'feffery-grid-item-container'}
+                    {...omit(
+                        ['setProps', 'persistence', 'persistence_type', 'persisted_props', 'id', 'className', 'style'],
+                        childProps
+                    )}>
+                    <button className={"feffery-grid-item-dragger"}>
+                        <svg viewBox={"0 0 20 20"} style={{ width: 16, fill: '#919eab' }}>
+                            <path d={"M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"}>
+                            </path>
+                        </svg>
+                    </button>
+                    {child}
+                </div>
+            );
+        }
+    )
 
-  // 取得必要属性或参数
-  let {
-    id,
-    children,
-    key,
-    style,
-    className,
-    height,
-    autoSize,
-    compactType,
-    margin,
-    containerPadding,
-    rowHeight,
-    isDraggable,
-    isResizable,
-    isBounded,
-    allowOverlap,
-    breakpoints,
-    cols,
-    layouts,
-    placeholderBackground,
-    placeholderOpacity,
-    placeholderBorder,
-    placeholderBorderRadius,
-    debug,
-    setProps,
-    loading_state
-  } = props;
-
-  children = parseChildrenToArray(children)
-
-  const gridItems = children.map(
-    (child) => {
-      let childProps = resolveChildProps(child)
-
-      return (
-        <div
-          className={'feffery-grid-item-container'}
-          {...omit(
-            ['setProps', 'persistence', 'persistence_type', 'persisted_props', 'id', 'className', 'style'],
-            childProps
-          )}>
-          <button className={"feffery-grid-item-dragger"}>
-            <svg viewBox={"0 0 20 20"} style={{ width: 16, fill: '#919eab' }}>
-              <path d={"M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"}>
-              </path>
-            </svg>
-          </button>
-          {child}
-        </div>
-      );
-    }
-  )
-
-  // 根据breakpoints为cols的通用模式重构数据结构
-  let _cols = {};
-  if (isNumber(cols)) {
-    for (let key of Object.keys(breakpoints)) {
-      _cols[key] = cols
+    // 根据breakpoints为cols的通用模式重构数据结构
+    let _cols = {};
+    if (isNumber(cols)) {
+        for (let key of Object.keys(breakpoints)) {
+            _cols[key] = cols
+        }
     }
-  }
 
-  // 根据breakpoints为layouts的通用模式重构数据结构
-  let _layouts = {};
-  if (Array.isArray(layouts)) {
-    for (let key of Object.keys(breakpoints)) {
-      _layouts[key] = layouts
+    // 根据breakpoints为layouts的通用模式重构数据结构
+    let _layouts = {};
+    if (Array.isArray(layouts)) {
+        for (let key of Object.keys(breakpoints)) {
+            _layouts[key] = layouts
+        }
     }
-  }
 
-  return (
-    <React.Fragment >
-      <FefferyStyle
-        rawStyle={
-          `
+    return (
+        <>
+            <FefferyStyle
+                rawStyle={
+                    `
 .react-grid-layout {
   position: relative;
   transition: height 200ms ease;
@@ -206,42 +207,46 @@ const FefferyGrid = (props) => {
   transform: rotate(45deg);
 }
 `
-        }
-      />
-      <ResponsiveReactGridLayout
-        id={id}
-        key={key}
-        style={style}
-        className={className}
-        height={height}
-        autoSize={autoSize}
-        compactType={compactType}
-        margin={margin}
-        containerPadding={containerPadding}
-        rowHeight={rowHeight}
-        isDraggable={isDraggable}
-        isResizable={isResizable}
-        isBounded={isBounded}
-        allowOverlap={allowOverlap}
-        breakpoints={breakpoints}
-        cols={isEmpty(_cols) ? cols : _cols}
-        layouts={isEmpty(_layouts) ? layouts : _layouts}
-        draggableHandle={'.feffery-grid-item-dragger'}
-        onLayoutChange={(e) => {
-          if (e) {
-            if (debug) {
-              console.log('layouts: ', e)
+                }
+            />
+            {
+                gridItems ?
+                    <ResponsiveReactGridLayout
+                        id={id}
+                        key={key}
+                        style={style}
+                        className={className}
+                        height={height}
+                        autoSize={autoSize}
+                        compactType={compactType}
+                        margin={margin}
+                        containerPadding={containerPadding}
+                        rowHeight={rowHeight}
+                        isDraggable={isDraggable}
+                        isResizable={isResizable}
+                        isBounded={isBounded}
+                        allowOverlap={allowOverlap}
+                        breakpoints={breakpoints}
+                        cols={isEmpty(_cols) ? cols : _cols}
+                        layouts={isEmpty(_layouts) ? layouts : _layouts}
+                        draggableHandle={'.feffery-grid-item-dragger'}
+                        onLayoutChange={(e) => {
+                            if (e) {
+                                if (debug) {
+                                    console.log('layouts: ', e)
+                                }
+                                setProps({ layouts: cloneDeep(e) })
+                            }
+                        }}
+                        setProps={setProps}
+                        useCSSTransforms={true}
+                        data-dash-is-loading={
+                            (loading_state && loading_state.is_loading) || undefined
+                        } >{gridItems}</ResponsiveReactGridLayout> :
+                    placeholder
             }
-            setProps({ layouts: cloneDeep(e) })
-          }
-        }}
-        setProps={setProps}
-        useCSSTransforms={true}
-        data-dash-is-loading={
-          (loading_state && loading_state.is_loading) || undefined
-        } >{gridItems}</ResponsiveReactGridLayout>
-    </React.Fragment>
-  );
+        </>
+    );
 }
 
 export default FefferyGrid;

package/src/lib/index.js

@@ -113,6 +113,8 @@ import FefferyEventSource from "./components/FefferyEventSource.react.js";
 import FefferyEventListener from "./components/listeners/FefferyEventListener.react.js";
 import FefferyListenHover from "./components/listeners/FefferyListenHover.js";
 import FefferyListenElementSize from "./components/listeners/FefferyListenElementSize.react.js";
+import FefferyListenDrag from './components/listeners/FefferyListenDrag.react';
+import FefferyListenDrop from './components/listeners/FefferyListenDrop.react';
 import './components/styles.css';
 
 // 自定义sessionStorage事件监听
@@ -250,5 +252,7 @@ export {
     FefferyEventSource,
     FefferyEventListener,
     FefferyListenHover,
-    FefferyListenElementSize
+    FefferyListenElementSize,
+    FefferyListenDrag,
+    FefferyListenDrop
 };