Merge branch 'master' into develop

Author: 1360151219

.vscode/settings.json

@@ -5,7 +5,7 @@
   "editor.formatOnSave": true, // optional
   "editor.formatOnSaveMode": "file",
   "[typescriptreact]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
+    "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
   },
   "[scss]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"

packages/demo/index.scss

@@ -58,6 +58,55 @@ h3 {
   font-size: 18px;
 }
 
+
+
+.pivot-code-box {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  margin: 16px 0;
+  overflow: hidden;
+  border: 1px solid rgba(5, 5, 5, 0.06);
+  border-radius: 6px;
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  &-actions {
+    display: flex;
+    flex-direction: row-reverse;
+    padding: 4px 8px;
+    .pivot-code-box-icon {
+      width: 20px;
+      height: 20px;
+      cursor: pointer;
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+  &-demo {
+    padding: 24px 30px;
+    display: flex;
+    border-bottom: 1px solid rgba(5, 5, 5, 0.06);
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    > :not(.PIVOT-draggable-item) {
+      margin: 0 24px;
+    }
+  }
+
+  .line-numbers {
+    //width: 100%;
+    .code-toolbar {
+      .data-prismjs-copy {
+        //width: 70vw;
+        //width: 100%;
+        overflow: auto;
+      }
+    }
+  }
+}
 .demo-draggable-item {
   color: #fff;
   background-color: #3685f5;

packages/demo/src/components/.DS_Store

@@ -0,0 +1,22 @@
+import { DndContext, DraggableItem } from 'pivot-design';
+import React, { useState } from 'react';
+const Basic: React.FC = () => {
+  const [coordinates, setCoordinates] = useState({ x: 0, y: 0 });
+  const onDragEnd = (e) => {
+    const { delta } = e;
+    setCoordinates(({ x, y }) => {
+      return {
+        x: x + delta.x,
+        y: y + delta.y,
+      };
+    });
+  };
+  return (
+    <DndContext onDragEnd={onDragEnd}>
+      <DraggableItem id="draggable" className="demo-draggable-item" left={coordinates.x} top={coordinates.y}>
+        Drag Me!
+      </DraggableItem>
+    </DndContext>
+  );
+};
+export default Basic;

packages/demo/src/components/Draggable/demo/Basic.tsx

@@ -0,0 +1,27 @@
+import { DndContext, DraggableItem, Droppable } from 'pivot-design';
+import React, { useState } from 'react';
+const Basic: React.FC = () => {
+  const [parent, setParent] = useState('');
+  const onDragEnd = ({ id, isDrop }) => {
+    setParent(isDrop ? id : '');
+  };
+  return (
+    <DndContext onDragEnd={onDragEnd}>
+      <div style={{ minWidth: '150px', display: 'flex' }}>
+        {parent !== 'A' ? (
+          <DraggableItem className="demo-draggable-item" id={'A'}>
+            draggable
+          </DraggableItem>
+        ) : null}
+      </div>
+      <Droppable style={{ textAlign: 'center' }}>
+        {parent === 'A' ? (
+          <DraggableItem className="demo-draggable-item" id={'A'}>
+            draggable
+          </DraggableItem>
+        ) : null}
+      </Droppable>
+    </DndContext>
+  );
+};
+export default Basic;

packages/demo/src/components/Draggable/demo/ButtonOnClick.tsx

@@ -0,0 +1,30 @@
+.demo-sortable-wrap {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+
+  &.__demo-sortable-grid {
+    width: 600px;
+    flex-wrap: wrap;
+    .demo-sortable-item {
+      height: 150px;
+      width: 150px;
+      padding: 0;
+      margin: 10px;
+      line-height: 150px;
+      text-align: center;
+    }
+  }
+  .demo-sortable-item {
+    background-color: #6193f0;
+    color: #fff;
+    text-align: center;
+    padding: 12px 0;
+    margin: 8px 0;
+    border-radius: 16px;
+    cursor: grab;
+    cursor: -webkit-grab;
+    user-select: none;
+  }
+}

packages/demo/src/components/Draggable/demo/Droppable.tsx

@@ -0,0 +1,30 @@
+import { arrayMove, DndContext, SortableContext, SortableItem } from 'pivot-design';
+import { DragEndEvent } from 'pivot-design/components/Draggable/sensors/events';
+import { useState } from 'react';
+import './GridSortable.scss';
+const Container = ({ children }) => {
+  return <div className={'demo-sortable-wrap __demo-sortable-grid'}>{children}</div>;
+};
+const GridSortable = () => {
+  const [items, setItems] = useState([1, 2, 3, 4, 5, 6, 7, 8, 9]);
+  const reorderItems = ({ active, over }: DragEndEvent) => {
+    setItems((items) => arrayMove(items, active.index, over.index));
+  };
+  return (
+    <DndContext onDragEnd={reorderItems}>
+      <SortableContext items={items} id="A" type="grid">
+        <Container>
+          {items.map((item, index) => {
+            return (
+              <SortableItem id={item} className="demo-sortable-item" key={index} index={index}>
+                {item}
+              </SortableItem>
+            );
+          })}
+        </Container>
+      </SortableContext>
+    </DndContext>
+  );
+};
+
+export default GridSortable;

packages/demo/src/components/Draggable/demo/GridSortable.scss

@@ -0,0 +1,27 @@
+.demo-sortable-wrap {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+ 
+
+  &.__demo-sortable-horizen {
+    justify-content: space-around;
+    .demo-sortable-item {
+      width: 14%;
+    }
+  }
+
+ 
+  .demo-sortable-item {
+    background-color: #6193f0;
+    color: #fff;
+    text-align: center;
+    padding: 12px 0;
+    margin: 8px 0;
+    border-radius: 16px;
+    cursor: grab;
+    cursor: -webkit-grab;
+    user-select: none;
+  }
+}

packages/demo/src/components/Draggable/demo/GridSortable.tsx

@@ -0,0 +1,30 @@
+import { arrayMove, DndContext, SortableContext, SortableItem } from 'pivot-design';
+import { DragEndEvent } from 'pivot-design/components/Draggable/sensors/events';
+import { useState } from 'react';
+import './HorizenSortable.scss';
+const Container = ({ children }) => {
+  return <div className={'demo-sortable-wrap __demo-sortable-horizen'}>{children}</div>;
+};
+const HorizenSortable = () => {
+  const [items, setItems] = useState([1, 2, 3, 4, 5]);
+  const reorderItems = ({ active, over }: DragEndEvent) => {
+    setItems((items) => arrayMove(items, active.index, over.index));
+  };
+  return (
+    <DndContext onDragEnd={reorderItems}>
+      <SortableContext items={items} id="A" type="horizen">
+        <Container>
+          {items.map((item, index) => {
+            return (
+              <SortableItem id={item} className="demo-sortable-item" key={index} index={index}>
+                {item}
+              </SortableItem>
+            );
+          })}
+        </Container>
+      </SortableContext>
+    </DndContext>
+  );
+};
+
+export default HorizenSortable;