@zgfe/business-lib 1.0.23 → 1.0.24-alpha.2

package/es/attributeSelector/listPanel.js

@@ -149,7 +149,6 @@ var AttrListPanel = function AttrListPanel(props) {
         disableItemlist === null || disableItemlist === void 0 ? void 0 : disableItemlist.forEach(function (item) {
           if (item.key === option.key) disabled = true;
         });
-        console.log('>>>>>>>>>', option === null || option === void 0 ? void 0 : option.key);
         childList.push( /*#__PURE__*/React.createElement(Option, {
           option: option,
           key: option === null || option === void 0 ? void 0 : option.key,

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

@@ -2,9 +2,29 @@ import React from 'react';
 import { BizDnd } from '@zgfe/business-lib';
 import styles from './styles/index.less';
 export default (function () {
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(BizDnd.Container, {
-    className: styles.container
-  }, /*#__PURE__*/React.createElement(BizDnd.Item, {
-    className: styles.item
-  }, "xxx")));
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(BizDnd, {
+    className: styles.container,
+    store: [{
+      id: 0,
+      label: 'a'
+    }, {
+      id: 1,
+      label: 'b'
+    }, {
+      id: 2,
+      label: 'c'
+    }],
+    keyField: "id",
+    itemClassName: styles.item,
+    tempClassName: styles.temp,
+    draddingClassName: styles.doing,
+    itemRender: function itemRender(data) {
+      return /*#__PURE__*/React.createElement("div", {
+        key: data.id
+      }, data.label);
+    },
+    onChange: function onChange(list) {
+      console.log('排序后数据', list);
+    }
+  }));
 });

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

@@ -6,9 +6,29 @@
 }
 .item {
   display: inline-block;
-  width: 300px;
+  width: 10%;
   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;
+  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.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
 import { DndTypes } from './types';
-declare const BizDnd: {
-    Container: React.FC<DndTypes.ContainerProps>;
-    Item: React.FC<DndTypes.ItemProps>;
-};
+import './styles/index.less';
+export declare const classPrefix = "biz-dnd";
+declare const BizDnd: React.FC<DndTypes.ContainerProps>;
 export default BizDnd;

package/es/dnd/index.js

@@ -1,14 +1,123 @@
-import React from 'react';
+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 _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, { useEffect, useState } from 'react';
 import BizDndItem from './item';
+import _ from 'lodash';
+import './styles/index.less';
+export var classPrefix = 'biz-dnd';
+
+var BizDnd = function BizDnd(props) {
+  var store = props.store,
+      keyField = props.keyField,
+      className = props.className,
+      itemClassName = props.itemClassName,
+      tempClassName = props.tempClassName,
+      draddingClassName = props.draddingClassName,
+      handle = props.handle,
+      handleClassName = props.handleClassName;
+
+  var _useState = useState(),
+      _useState2 = _slicedToArray(_useState, 2),
+      current = _useState2[0],
+      setCurrent = _useState2[1];
+
+  var _useState3 = useState(),
+      _useState4 = _slicedToArray(_useState3, 2),
+      setHoverTarget = _useState4[1];
+
+  var _useState5 = useState(store),
+      _useState6 = _slicedToArray(_useState5, 2),
+      renderData = _useState6[0],
+      setRenderData = _useState6[1];
+
+  useEffect(function () {
+    setRenderData(_.cloneDeep(store));
+  }, [store]);
+
+  function onMouseOver(data) {
+    setHoverTarget(data);
+    setHoverTarget(data);
+    setRenderData(function (list) {
+      var res = [];
+
+      for (var i = 0; i < list.length; i++) {
+        var item = _.cloneDeep(list[i]);
+
+        if (item.isTemp) continue;
+
+        if (current && item[keyField] === data[keyField]) {
+          var _res$push;
+
+          res.push((_res$push = {}, _defineProperty(_res$push, props.keyField, "".concat(item[props.keyField], "-temp")), _defineProperty(_res$push, "isTemp", true), _res$push));
+        }
+
+        res.push(item);
+      }
+
+      return res;
+    });
+  }
+
+  function onDropEnd(data) {
+    setHoverTarget(function (target) {
+      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]);
+
+          if (item[keyField] === data[keyField] || item.isTemp) continue;
+
+          if (item[keyField] === target[keyField]) {
+            res.push(data);
+          }
+
+          res.push(item);
+        }
+
+        if (props.onChange) props.onChange(res);
+        return res;
+      });
+      return target;
+    });
+  }
 
-var Container = function Container(props) {
   return /*#__PURE__*/React.createElement("div", {
-    className: "".concat(props.className)
-  }, props.children);
+    className: "".concat(classPrefix, "-container ").concat(className)
+  }, 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,
+      onDropEnd: onDropEnd
+    });
+  }));
 };
 
-var BizDnd = {
-  Container: Container,
-  Item: BizDndItem
+BizDnd.defaultProps = {
+  keyField: 'key'
 };
 export default BizDnd;

package/es/dnd/item.js

@@ -1,9 +1,147 @@
-import React 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,
+  y: 0
+};
+var style = {
+  position: 'inherit',
+  top: 0,
+  left: 0,
+  pointerEvents: 'inherit'
+};
 
 var BizDndItem = function BizDndItem(props) {
+  var className = props.className,
+      render = props.render,
+      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) {
+    var _e$currentTarget$getB = e.currentTarget.getBoundingClientRect(),
+        top = _e$currentTarget$getB.top,
+        left = _e$currentTarget$getB.left;
+
+    window.addEventListener('mousemove', onMouseMove);
+    window.addEventListener('mouseup', onMouseUp);
+
+    if (ref.current) {
+      var computedStyle = window.getComputedStyle(ref.current);
+      style = {
+        position: '',
+        pointerEvents: 'inherit',
+        top: top - Number(computedStyle.marginTop.replace('px', '')),
+        left: left - Number(computedStyle.marginLeft.replace('px', '')),
+        width: computedStyle.width,
+        height: computedStyle.height
+      };
+      setStyle();
+      preMouse = {
+        x: e.clientX,
+        y: e.clientY
+      };
+      setIsDragging(true);
+    }
+  }
+
+  function onMouseMove(e) {
+    var computedStyle = window.getComputedStyle(ref.current);
+    style.position = 'fixed';
+    style.top += e.clientY - (preMouse.y || 0);
+    style.left += e.clientX - (preMouse.x || 0);
+    style.pointerEvents = 'none';
+    style.width = computedStyle.width;
+    style.height = computedStyle.height;
+    setStyle();
+    preMouse = {
+      x: e.clientX,
+      y: e.clientY
+    };
+    if (props.onDragging) props.onDragging(data);
+  }
+
+  function onMouseUp() {
+    setIsDragging(false);
+    window.removeEventListener('mousemove', onMouseMove);
+    window.removeEventListener('mouseup', onMouseUp);
+    style = {
+      position: 'inherit',
+      pointerEvents: 'inherit',
+      top: 0,
+      left: 0,
+      width: '',
+      height: ''
+    };
+    setStyle();
+    if (props.onDropEnd) props.onDropEnd(data);
+  }
+
+  function setStyle() {
+    if (ref.current) {
+      ref.current.style.position = style.position;
+      ref.current.style.top = "".concat(style.top, "px");
+      ref.current.style.left = "".concat(style.left, "px");
+      ref.current.style.pointerEvents = style.pointerEvents;
+      ref.current.style.width = style.width;
+    }
+  }
+
+  if (props.data.isTemp) return /*#__PURE__*/React.createElement("div", {
+    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(props.className)
-  }, props.children);
+    className: "".concat(classPrefix, "-item ").concat(className, " ").concat(isDragging ? draddingClassName : ''),
+    onMouseDown: onMousedown,
+    onMouseOver: function onMouseOver() {
+      if (props.onMouseOver) props.onMouseOver(data);
+    },
+    ref: ref
+  }, render(data, props.index));
 };
 
 export default BizDndItem;

package/es/dnd/styles/index.less

@@ -0,0 +1,19 @@
+@import '../../assets/styles/inner.less';
+.biz-dnd {
+  &-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,13 +1,32 @@
+/// <reference types="react" />
 export declare namespace DndTypes {
+    type Data = Record<string, any> & {
+        isTemp?: boolean;
+        disabled?: boolean;
+    };
     interface ContainerProps {
         className?: string;
+        itemClassName?: string;
+        draddingClassName?: string;
         tempClassName?: string;
-        onChange?: () => void;
+        handle?: React.ReactNode;
+        handleClassName?: string;
+        tempRender?: (data: Data) => React.ReactNode;
+        itemRender: (data: Data, index: number, handle?: React.ReactNode) => React.ReactNode;
+        keyField: string;
+        store: Data[];
+        onChange?: (list: Data[]) => void;
     }
     interface ItemProps {
         className?: string;
+        data: Data;
+        index: number;
+        render: (data: Data, index: number, handle?: React.ReactNode) => React.ReactNode;
+        handle?: React.ReactNode;
+        handleClassName?: string;
         draddingClassName?: string;
-        keyField: string;
-        data: Record<string, any>;
+        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.23",
+  "version": "1.0.24-alpha.2",
   "scripts": {
     "start": "dumi dev",
     "docs:build": "dumi build",
@@ -58,5 +58,5 @@
     "react": "^16.12.0 || ^17.0.0",
     "yorkie": "^2.0.0"
   },
-  "gitHead": "dad1fb1f8ea56b75db14f01e471a64ac50538831"
+  "gitHead": "262599946c1ae80f9f6836a01aa0b615efbeba23"
 }