@zgfe/business-lib 1.0.24-alpha.0 → 1.0.24-alpha.1

package/es/dnd/demo/data.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => JSX.Element;
+export default _default;

package/es/dnd/demo/data.js

@@ -0,0 +1,75 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import React, { useState } from 'react';
+import { BizDnd } from '@zgfe/business-lib';
+import styles from './styles/index.less';
+import _ from 'lodash';
+export default (function () {
+  var _useState = useState([{
+    id: 0,
+    label: 'a'
+  }, {
+    id: 1,
+    label: 'b'
+  }, {
+    id: 2,
+    label: 'c'
+  }, {
+    id: 3,
+    label: '添加',
+    disabled: true,
+    isAdd: true
+  }]),
+      _useState2 = _slicedToArray(_useState, 2),
+      list = _useState2[0],
+      setList = _useState2[1];
+
+  function onAdd() {
+    setList(function (list) {
+      var res = [];
+      list.forEach(function (item, i) {
+        if (item.isAdd) {
+          res.push({
+            id: Math.random(),
+            label: String.fromCharCode(97 + i)
+          });
+        }
+
+        res.push(_.cloneDeep(item));
+      });
+      return res;
+    });
+  }
+
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(BizDnd, {
+    className: styles.container,
+    store: list,
+    keyField: "id",
+    itemClassName: styles.item,
+    tempClassName: styles.temp,
+    draddingClassName: styles.doing,
+    itemRender: function itemRender(data) {
+      if (data.isAdd) return /*#__PURE__*/React.createElement("div", {
+        key: data.id,
+        className: styles.add,
+        onClick: onAdd
+      }, "+");
+      return /*#__PURE__*/React.createElement("div", {
+        key: data.id
+      }, data.label);
+    },
+    onChange: function onChange(list) {
+      console.log('排序后数据', list);
+    }
+  }));
+});

package/es/dnd/demo/handle.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => JSX.Element;
+export default _default;

package/es/dnd/demo/handle.js

@@ -0,0 +1,77 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import React, { useState } from 'react';
+import { BizDnd } from '@zgfe/business-lib';
+import styles from './styles/index.less';
+import _ from 'lodash';
+export default (function () {
+  var _useState = useState([{
+    id: 0,
+    label: 'a'
+  }, {
+    id: 1,
+    label: 'b'
+  }, {
+    id: 2,
+    label: 'c'
+  }, {
+    id: 3,
+    label: '添加',
+    disabled: true,
+    isAdd: true
+  }]),
+      _useState2 = _slicedToArray(_useState, 2),
+      list = _useState2[0],
+      setList = _useState2[1];
+
+  function onAdd() {
+    setList(function (list) {
+      var res = [];
+      list.forEach(function (item, i) {
+        if (item.isAdd) {
+          res.push({
+            id: Math.random(),
+            label: String.fromCharCode(97 + i)
+          });
+        }
+
+        res.push(_.cloneDeep(item));
+      });
+      return res;
+    });
+  }
+
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(BizDnd, {
+    className: styles.container,
+    store: list,
+    keyField: "id",
+    itemClassName: styles.item,
+    tempClassName: styles.temp,
+    draddingClassName: styles.doing,
+    handleClassName: styles.handle,
+    handle: /*#__PURE__*/React.createElement("div", null, "\u64CD\u4F5C\u680F"),
+    itemRender: function itemRender(data, _index, handle) {
+      if (data.isAdd) return /*#__PURE__*/React.createElement("div", {
+        key: data.id,
+        className: styles.add,
+        onClick: onAdd
+      }, "+");
+      return /*#__PURE__*/React.createElement("div", {
+        key: data.id
+      }, handle, data.label);
+    },
+    onChange: function onChange(list) {
+      console.log('排序后数据', list);
+    }
+  }));
+});

package/es/dnd/demo/index.js

@@ -17,6 +17,7 @@ export default (function () {
     keyField: "id",
     itemClassName: styles.item,
     tempClassName: styles.temp,
+    draddingClassName: styles.doing,
     itemRender: function itemRender(data) {
       return /*#__PURE__*/React.createElement("div", {
         key: data.id

package/es/dnd/demo/styles/index.less

@@ -9,18 +9,26 @@
   width: 300px;
   height: 150px;
   margin: @margin-md;
+  line-height: 150px;
   text-align: center;
+  vertical-align: top;
   background: @background-color-base;
   border-radius: @border-radius-normal;
 }
 .temp {
   display: inline-block;
-  width: 300px;
-  height: 150px;
-  margin: @margin-md;
-  text-align: center;
-  vertical-align: top;
-  background: @background-color-base;
   border: 2px dashed @primary-color;
   border-radius: @border-radius-normal;
 }
+.add {
+  font-size: 48px;
+  cursor: pointer;
+}
+.doing {
+  border: 1px solid @warning-color;
+}
+.handle {
+  display: block;
+  height: 25px;
+  background: @info-color;
+}

package/es/dnd/index.js

@@ -12,7 +12,7 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import BizDndItem from './item';
 import _ from 'lodash';
 import './styles/index.less';
@@ -23,7 +23,10 @@ var BizDnd = function BizDnd(props) {
       keyField = props.keyField,
       className = props.className,
       itemClassName = props.itemClassName,
-      tempClassName = props.tempClassName;
+      tempClassName = props.tempClassName,
+      draddingClassName = props.draddingClassName,
+      handle = props.handle,
+      handleClassName = props.handleClassName;
 
   var _useState = useState(),
       _useState2 = _slicedToArray(_useState, 2),
@@ -39,6 +42,10 @@ var BizDnd = function BizDnd(props) {
       renderData = _useState6[0],
       setRenderData = _useState6[1];
 
+  useEffect(function () {
+    setRenderData(_.cloneDeep(store));
+  }, [store]);
+
   function onMouseOver(data) {
     setHoverTarget(data);
     setHoverTarget(data);
@@ -68,6 +75,9 @@ var BizDnd = function BizDnd(props) {
       setCurrent(undefined);
       setRenderData(function (list) {
         var res = [];
+        if (!list.find(function (item) {
+          return item.isTemp;
+        })) return list;
 
         for (var i = 0; i < list.length; i++) {
           var item = _.cloneDeep(list[i]);
@@ -90,11 +100,15 @@ var BizDnd = function BizDnd(props) {
 
   return /*#__PURE__*/React.createElement("div", {
     className: "".concat(classPrefix, "-container ").concat(className)
-  }, renderData.map(function (data) {
+  }, renderData.map(function (data, i) {
     return /*#__PURE__*/React.createElement(BizDndItem, {
       data: data,
       key: data[keyField],
       className: "".concat(itemClassName, " ").concat(data.isTemp ? tempClassName : ''),
+      draddingClassName: draddingClassName,
+      index: i,
+      handle: handle,
+      handleClassName: handleClassName,
       render: props.itemRender,
       onDragging: setCurrent,
       onMouseOver: onMouseOver,

package/es/dnd/item.js

@@ -1,4 +1,16 @@
-import React, { useRef } from 'react';
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import React, { useRef, useState } from 'react';
 import { classPrefix } from '.';
 var preMouse = {
   x: 0,
@@ -14,7 +26,14 @@ var style = {
 var BizDndItem = function BizDndItem(props) {
   var className = props.className,
       render = props.render,
-      data = props.data;
+      data = props.data,
+      draddingClassName = props.draddingClassName;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isDragging = _useState2[0],
+      setIsDragging = _useState2[1];
+
   var ref = useRef();
 
   function onMousedown(e) {
@@ -38,6 +57,7 @@ var BizDndItem = function BizDndItem(props) {
         x: e.clientX,
         y: e.clientY
       };
+      setIsDragging(true);
     }
   }
 
@@ -55,6 +75,7 @@ var BizDndItem = function BizDndItem(props) {
   }
 
   function onMouseUp() {
+    setIsDragging(false);
     window.removeEventListener('mousemove', onMouseMove);
     window.removeEventListener('mouseup', onMouseUp);
     style = {
@@ -80,14 +101,39 @@ var BizDndItem = function BizDndItem(props) {
     className: "".concat(classPrefix, "-item ").concat(className),
     ref: ref
   });
+
+  if (props.data.disabled) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "".concat(classPrefix, "-item disable ").concat(className),
+      ref: ref,
+      onMouseOver: function onMouseOver() {
+        if (props.onMouseOver) props.onMouseOver(data);
+      }
+    }, render(data, props.index));
+  }
+
+  if (props.handle) {
+    var handle = /*#__PURE__*/React.createElement("span", {
+      className: "".concat(classPrefix, "-handle ").concat(props.handleClassName),
+      onMouseDown: onMousedown
+    }, props.handle);
+    return /*#__PURE__*/React.createElement("div", {
+      className: "".concat(classPrefix, "-item handle ").concat(className, " ").concat(isDragging ? draddingClassName : ''),
+      onMouseOver: function onMouseOver() {
+        if (props.onMouseOver) props.onMouseOver(data);
+      },
+      ref: ref
+    }, render(data, props.index, handle));
+  }
+
   return /*#__PURE__*/React.createElement("div", {
-    className: "".concat(classPrefix, "-item ").concat(className),
+    className: "".concat(classPrefix, "-item ").concat(className, " ").concat(isDragging ? draddingClassName : ''),
     onMouseDown: onMousedown,
     onMouseOver: function onMouseOver() {
       if (props.onMouseOver) props.onMouseOver(data);
     },
     ref: ref
-  }, render(data));
+  }, render(data, props.index));
 };
 
 export default BizDndItem;

package/es/dnd/styles/index.less

@@ -3,6 +3,15 @@
   &-item {
     cursor: move;
     user-select: none;
+    &.disable,
+    &.handle {
+      cursor: inherit;
+      user-select: inherit;
+    }
+  }
+  &-handle {
+    cursor: move;
+    user-select: none;
   }
   &-temp {
     pointer-events: none;

package/es/dnd/types.d.ts

@@ -1,23 +1,32 @@
 /// <reference types="react" />
 export declare namespace DndTypes {
+    type Data = Record<string, any> & {
+        isTemp?: boolean;
+        disabled?: boolean;
+    };
     interface ContainerProps {
         className?: string;
         itemClassName?: string;
-        itemRender: (data: Record<string, any>) => React.ReactNode;
         draddingClassName?: string;
         tempClassName?: string;
-        tempRender?: (data: Record<string, any>) => React.ReactNode;
+        handle?: React.ReactNode;
+        handleClassName?: string;
+        tempRender?: (data: Data) => React.ReactNode;
+        itemRender: (data: Data, index: number, handle?: React.ReactNode) => React.ReactNode;
         keyField: string;
-        store: Record<string, any>[];
-        onChange?: (list: Record<string, any>[]) => void;
+        store: Data[];
+        onChange?: (list: Data[]) => void;
     }
     interface ItemProps {
         className?: string;
-        data: Record<string, any>;
-        render: (data: Record<string, any>) => React.ReactNode;
+        data: Data;
+        index: number;
+        render: (data: Data, index: number, handle?: React.ReactNode) => React.ReactNode;
+        handle?: React.ReactNode;
+        handleClassName?: string;
         draddingClassName?: string;
-        onDragging?: (data: Record<string, any>) => void;
-        onMouseOver?: (data: Record<string, any>) => void;
-        onDropEnd?: (data: Record<string, any>) => void;
+        onDragging?: (data: Data) => void;
+        onMouseOver?: (data: Data) => void;
+        onDropEnd?: (data: Data) => void;
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zgfe/business-lib",
-  "version": "1.0.24-alpha.0",
+  "version": "1.0.24-alpha.1",
   "scripts": {
     "start": "dumi dev",
     "docs:build": "dumi build",
@@ -58,5 +58,5 @@
     "react": "^16.12.0 || ^17.0.0",
     "yorkie": "^2.0.0"
   },
-  "gitHead": "f2e1ee079aaeda5f20f3db5b51c0dbd5dd893871"
+  "gitHead": "d11c81c871b7a2bb1bec63974a638665c506f4ce"
 }