diff --git a/.vscode/settings.json b/.vscode/settings.json
index db34940..c7866b3 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -17,5 +17,5 @@
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
- "svg.preview.background": "white" // required to format on save
+ "svg.preview.background": "black" // required to format on save
}
diff --git a/README.md b/README.md
index 0674820..d72a0f3 100644
--- a/README.md
+++ b/README.md
@@ -27,6 +27,8 @@ Pivot-Studio 前端组件库
- props:所有的 props 均定义在`design-prop`中。每一个组件的 props 均要继承`PivotDesignProps`,**名字规范格式要求:「组件名」+ `Props`**,每一个组件若有自定义 css 变量,**名字规范格式要求:「组件名」+ `CssTokens`**
+- 基础色值:本项目利用了 Semi 的 DSM,定制了一套色值。设计系统连接如下:https://semi.design/dsm_store/theme?dsmID=10493
+
- css 变量:我们默认的 css 变量放在`design/components/common.scss`里,**命名规范:「--pivot-componentName-property」**,用法如下:
```css
diff --git a/packages/demo/.prettierrc b/packages/demo/.prettierrc
index 556249d..f65aabc 100644
--- a/packages/demo/.prettierrc
+++ b/packages/demo/.prettierrc
@@ -1,5 +1,4 @@
{
- "parser": "babel",
"singleQuote": true,
"printWidth": 120
}
\ No newline at end of file
diff --git a/packages/demo/index.scss b/packages/demo/index.scss
index 215de63..f866dbd 100644
--- a/packages/demo/index.scss
+++ b/packages/demo/index.scss
@@ -1,122 +1,26 @@
-:root {
- --master-bg-color: rgb(252, 234, 220);
- --master-deep-bg-color: #c76591;
- --master-text-color: #fff;
- --link-color: #eabe9e;
-}
* {
padding: 0;
margin: 0;
}
+
body,
html,
#root {
height: 100%;
- font-family: 'Helvetica Neue', 'Gilroy ExtraBold', Times, serif;
+ font-family: system, -apple-system, BlinkMacSystemFont, PingFang SC, Segoe UI, Microsoft YaHei, wenquanyi micro hei,
+ Hiragino Sans GB, Hiragino Sans GB W3, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,
+ Helvetica, Arial, sans-serif;
+ font-weight: 400;
+ color: var(--semi-color-text-0);
}
-h1 {
- padding-bottom: 20px;
-}
-h2 {
- position: relative;
- margin: 16px 0;
- padding: 0 16px;
- &::before {
- content: '';
- position: absolute;
- left: 0;
- top: 0;
- width: 4px;
- height: 100%;
- background-color: #1677ff;
- }
-}
-h3 {
- position: relative;
- margin: 12px 0;
- padding: 0 12px;
- &::before {
- content: '';
- position: absolute;
- left: 0;
- top: 0;
- width: 3px;
- height: 100%;
- background-color: #1677ff;
- }
-}
.display {
height: auto;
}
+
.hidden {
height: 0;
}
-.title {
- color: #000;
- 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;
- padding: 8px 18px;
- border-radius: 4px;
-}
-.demo-sortable-horizen {
- padding: 8px 88px;
-}
-.demo-sortable-grid {
- padding: 32px 40px;
- margin: 24px;
-}
diff --git a/packages/demo/src/components/Card/index.mdx b/packages/demo/src/components/Card/index.mdx
index ff84fda..df78168 100644
--- a/packages/demo/src/components/Card/index.mdx
+++ b/packages/demo/src/components/Card/index.mdx
@@ -1,48 +1,43 @@
-import Actions from "./svg/index.tsx"
-import More from "./svg/tab.tsx"
-
+import Actions from './svg/index.tsx';
+import More from './svg/tab.tsx';
# Card
默认样式
-
- 测试} time="19:20 2020-09-15" extra={} actions={} >
-
-
我好想买Airpods但是没有钱,梁老师可不可以资助我
- 一点钱钱呢啊?不多不多的
-
-
+
+ 测试} time="19:20 2020-09-15" extra={} actions={}>
+
+
我好想买Airpods但是没有钱,梁老师可不可以资助我 一点钱钱呢啊?不多不多的
+
+
带头像
-多余文本} time="19:20 2020-09-15" extra={} avatar={
} actions={}>
-
- 我好想买Airpods但是没有钱,梁老师可不可以
- 资助我我好想买Airpods
- 但是没有钱,
- 梁老师可不可以资助我一点钱呢啊?不多不多的,
- 球球了!我好想买Airpods但是没有钱,
- 梁老师可不可以资助我一点钱钱呢啊?
- 不多不多的,球球了!我好想买Airpods但是没有钱,梁老师可
- 我好想买Airpods但是没有钱,梁老师可不可以资助我一点钱钱呢啊?
- 不多不多的,球球了!
- 我好想买Airpods但是没有钱,
- 梁老师可不可以资助我一点钱钱呢啊?不多不多的,球球了!
- 我好想买Airpods但是没有钱,梁老师可
- 我好想买Airpods但是没有钱,梁老师可不可以资助我一点钱钱呢啊?
-
- 不多不多的,球球了!
- 我好想买Airpods但是没有钱,
- 梁老师可不可以资助我一点钱钱呢啊?
- 不多不多的,
- 球球了!我好想买Airpods但是没有钱,梁老师可
-
+ 多余文本}
+ time="19:20 2020-09-15"
+ extra={}
+ avatar={
}
+ actions={}
+ >
+ 我好想买Airpods但是没有钱,梁老师可不可以 资助我我好想买Airpods 但是没有钱,
+ 梁老师可不可以资助我一点钱呢啊?不多不多的, 球球了!我好想买Airpods但是没有钱, 梁老师可不可以资助我一点钱钱呢啊?
+ 不多不多的,球球了!我好想买Airpods但是没有钱,梁老师可
+ 我好想买Airpods但是没有钱,梁老师可不可以资助我一点钱钱呢啊? 不多不多的,球球了! 我好想买Airpods但是没有钱,
+ 梁老师可不可以资助我一点钱钱呢啊?不多不多的,球球了! 我好想买Airpods但是没有钱,梁老师可
+ 我好想买Airpods但是没有钱,梁老师可不可以资助我一点钱钱呢啊? 不多不多的,球球了! 我好想买Airpods但是没有钱,
+ 梁老师可不可以资助我一点钱钱呢啊? 不多不多的, 球球了!我好想买Airpods但是没有钱,梁老师可
栅格
-} title={运动小天才
} style={{'--card-background-color':' rgba(244, 247, 250,1)',}} Grid={true}>
+ }
+ title={运动小天才
}
+ style={{ '--card-background-color': ' rgba(244, 247, 250,1)' }}
+ Grid={true}
+ >
足球
足球
足球
@@ -51,62 +46,62 @@ import More from "./svg/tab.tsx"
足球
足球
足球
-
+
收起与展开长度
-多余文本} time="19:20 2020-09-15" extra={} avatar={
} actions={} style={{'--card-minLength':"5"}}>
-
- 我好想买Airpods但是没有钱,梁老师可不可以资助我
- 我好想买Airpods但是没有钱,梁老师可不可以资助我一点钱钱呢
- 啊?不多不多的,球球了!我好想买Airpods但
- 是没有钱,梁老师可不可以资助我一点钱钱呢啊?不多不多的,
- 球球了!我好想买Airpods但是没有钱,梁老师可
- 我好想买Airpods但是没有钱,梁老师可不可以
- 资助我一点钱钱呢啊?不多不多的,球球了!我好
- 想买Airpods但是没有钱,梁老师可不可以资助我一
- 点钱钱呢啊?不多不多的,球球了!我好想买
- irpods但是没有钱,梁老师可
- 我好想买Airpods但是没有钱,
- 梁老师可不可以资助我一点钱钱呢啊?
- 不多不多的,球球了!我好想买Airpods但是没有钱,
- 梁老师可不可以资助我一点钱钱呢啊?不多不多的,球球了!
- 我好想买Airpods但是没有钱,梁老师可
-
+ 多余文本}
+ time="19:20 2020-09-15"
+ extra={}
+ avatar={
}
+ actions={}
+ style={{ '--card-minLength': '5' }}
+ >
+ 我好想买Airpods但是没有钱,梁老师可不可以资助我 我好想买Airpods但是没有钱,梁老师可不可以资助我一点钱钱呢
+ 啊?不多不多的,球球了!我好想买Airpods但 是没有钱,梁老师可不可以资助我一点钱钱呢啊?不多不多的,
+ 球球了!我好想买Airpods但是没有钱,梁老师可 我好想买Airpods但是没有钱,梁老师可不可以
+ 资助我一点钱钱呢啊?不多不多的,球球了!我好 想买Airpods但是没有钱,梁老师可不可以资助我一
+ 点钱钱呢啊?不多不多的,球球了!我好想买 irpods但是没有钱,梁老师可 我好想买Airpods但是没有钱,
+ 梁老师可不可以资助我一点钱钱呢啊? 不多不多的,球球了!我好想买Airpods但是没有钱,
+ 梁老师可不可以资助我一点钱钱呢啊?不多不多的,球球了! 我好想买Airpods但是没有钱,梁老师可
+
+ 多余文本}
+ time="19:20 2020-09-15"
+ extra={}
+ avatar={
}
+ actions={}
+ style={{ '--card-maxLength': '7' }}
+ >
+ 我好想买Airpods但是没有钱,梁老师可不可以资助我 我好想买Airpods但是没有钱,梁老师可不可以资助我一点钱钱呢
+ 啊?不多不多的,球球了!我好想买Airpods但 是没有钱,梁老师可不可以资助我一点钱钱呢啊?不多不多的,
+ 球球了!我好想买Airpods但是没有钱,梁老师可 我好想买Airpods但是没有钱,梁老师可不可以
+ 资助我一点钱钱呢啊?不多不多的,球球了!我好 想买Airpods但是没有钱,梁老师可不可以资助我一
+ 点钱钱呢啊?不多不多的,球球了!我好想买 irpods但是没有钱,梁老师可 我好想买Airpods但是没有钱,
+ 梁老师可不可以资助我一点钱钱呢啊? 不多不多的,球球了!我好想买Airpods但是没有钱,
+ 梁老师可不可以资助我一点钱钱呢啊?不多不多的,球球了! 我好想买Airpods但是没有钱,梁老师可
-多余文本} time="19:20 2020-09-15" extra={} avatar={
} actions={} style={{'--card-maxLength':"7"}}>
-
- 我好想买Airpods但是没有钱,梁老师可不可以资助我
- 我好想买Airpods但是没有钱,梁老师可不可以资助我一点钱钱呢
- 啊?不多不多的,球球了!我好想买Airpods但
- 是没有钱,梁老师可不可以资助我一点钱钱呢啊?不多不多的,
- 球球了!我好想买Airpods但是没有钱,梁老师可
- 我好想买Airpods但是没有钱,梁老师可不可以
- 资助我一点钱钱呢啊?不多不多的,球球了!我好
- 想买Airpods但是没有钱,梁老师可不可以资助我一
- 点钱钱呢啊?不多不多的,球球了!我好想买
- irpods但是没有钱,梁老师可
- 我好想买Airpods但是没有钱,
- 梁老师可不可以资助我一点钱钱呢啊?
- 不多不多的,球球了!我好想买Airpods但是没有钱,
- 梁老师可不可以资助我一点钱钱呢啊?不多不多的,球球了!
- 我好想买Airpods但是没有钱,梁老师可
-
-
自定义背景色和宽度
- 多余文本} time="19:20 2020-09-15" extra={...} boradius={false} style={{width:"600px",'--card-background-color': 'rgb(233, 233, 15)'}} actions={}>
- 我好想买Airpods但是没有钱,梁老师可不可以资助我
- 我好想买Airpods但是没有钱,梁老师可不可以资助我一点钱钱呢啊?
- 不多不多的,球球了!我好想买Airpods但是没有钱,
- 梁老师可不可以
- 资助我一点钱钱呢啊?不多不多的,球球了!
- 我好想买Airpods但是没有钱,梁老师可
+ 多余文本}
+ time="19:20 2020-09-15"
+ extra={...}
+ boradius={false}
+ style={{ width: '600px', '--card-background-color': 'rgb(233, 233, 15)' }}
+ actions={}
+ >
+ 我好想买Airpods但是没有钱,梁老师可不可以资助我
+
+ 我好想买Airpods但是没有钱,梁老师可不可以资助我一点钱钱呢啊? 不多不多的,球球了!我好想买Airpods但是没有钱,
+ 梁老师可不可以 资助我一点钱钱呢啊?不多不多的,球球了! 我好想买Airpods但是没有钱,梁老师可
+
加载中
-
-
\ No newline at end of file
+
+
diff --git a/packages/demo/src/components/Draggable/demo/Basic.scss b/packages/demo/src/components/Draggable/demo/Basic.scss
new file mode 100644
index 0000000..48bf90f
--- /dev/null
+++ b/packages/demo/src/components/Draggable/demo/Basic.scss
@@ -0,0 +1,6 @@
+.demo-draggable-item {
+ color: var(--semi-color-white);
+ background-color: var(--semi-color-primary);
+ padding: 8px 18px;
+ border-radius: 4px;
+}
diff --git a/packages/demo/src/components/Draggable/demo/Basic.tsx b/packages/demo/src/components/Draggable/demo/Basic.tsx
index e0145eb..6df74eb 100644
--- a/packages/demo/src/components/Draggable/demo/Basic.tsx
+++ b/packages/demo/src/components/Draggable/demo/Basic.tsx
@@ -1,5 +1,6 @@
import { DndContext, DraggableItem } from 'pivot-design';
import React, { useState } from 'react';
+import './Basic.scss';
const Basic: React.FC = () => {
const [coordinates, setCoordinates] = useState({ x: 0, y: 0 });
const onDragEnd = (e) => {
diff --git a/packages/demo/src/components/Draggable/demo/Droppable.tsx b/packages/demo/src/components/Draggable/demo/Droppable.tsx
index 73a133e..cfdfc70 100644
--- a/packages/demo/src/components/Draggable/demo/Droppable.tsx
+++ b/packages/demo/src/components/Draggable/demo/Droppable.tsx
@@ -1,5 +1,6 @@
import { DndContext, DraggableItem, Droppable } from 'pivot-design';
import React, { useState } from 'react';
+import './Basic.scss';
const Basic: React.FC = () => {
const [parent, setParent] = useState('');
const onDragEnd = ({ id, isDrop }) => {
diff --git a/packages/demo/src/components/Draggable/demo/GridSortable.scss b/packages/demo/src/components/Draggable/demo/GridSortable.scss
index c2f3079..6e77e5a 100644
--- a/packages/demo/src/components/Draggable/demo/GridSortable.scss
+++ b/packages/demo/src/components/Draggable/demo/GridSortable.scss
@@ -17,8 +17,8 @@
}
}
.demo-sortable-item {
- background-color: #6193f0;
- color: #fff;
+ background-color: var(--semi-color-primary);
+ color: var(--semi-color-white);
text-align: center;
padding: 12px 0;
margin: 8px 0;
diff --git a/packages/demo/src/components/Draggable/demo/HorizenSortable.scss b/packages/demo/src/components/Draggable/demo/HorizenSortable.scss
index 6f3ab06..55b8ca0 100644
--- a/packages/demo/src/components/Draggable/demo/HorizenSortable.scss
+++ b/packages/demo/src/components/Draggable/demo/HorizenSortable.scss
@@ -3,7 +3,6 @@
width: 100%;
justify-content: center;
align-items: center;
-
&.__demo-sortable-horizen {
justify-content: space-around;
@@ -12,10 +11,9 @@
}
}
-
.demo-sortable-item {
- background-color: #6193f0;
- color: #fff;
+ background-color: var(--semi-color-primary);
+ color: var(--semi-color-white);
text-align: center;
padding: 12px 0;
margin: 8px 0;
diff --git a/packages/demo/src/components/Draggable/demo/MultipleContainer.scss b/packages/demo/src/components/Draggable/demo/MultipleContainer.scss
index 5f61a7f..899b6d1 100644
--- a/packages/demo/src/components/Draggable/demo/MultipleContainer.scss
+++ b/packages/demo/src/components/Draggable/demo/MultipleContainer.scss
@@ -12,8 +12,8 @@
}
.demo-sortable-item {
width: 50%;
- background-color: #6193f0;
- color: #fff;
+ background-color: var(--semi-color-primary);
+ color: var(--semi-color-white);
text-align: center;
padding: 12px 0;
margin: 8px 0;
diff --git a/packages/demo/src/components/Draggable/demo/VerticalSortable.scss b/packages/demo/src/components/Draggable/demo/VerticalSortable.scss
index 86c47f5..dcf9207 100644
--- a/packages/demo/src/components/Draggable/demo/VerticalSortable.scss
+++ b/packages/demo/src/components/Draggable/demo/VerticalSortable.scss
@@ -9,8 +9,8 @@
.demo-sortable-item {
width: 50%;
- background-color: #6193f0;
- color: #fff;
+ background-color: var(--semi-color-primary);
+ color: var(--semi-color-white);
text-align: center;
padding: 12px 0;
margin: 8px 0;
diff --git a/packages/demo/src/components/Draggable/demo/WithDragOverlay.scss b/packages/demo/src/components/Draggable/demo/WithDragOverlay.scss
index 0553e8d..3bc8288 100644
--- a/packages/demo/src/components/Draggable/demo/WithDragOverlay.scss
+++ b/packages/demo/src/components/Draggable/demo/WithDragOverlay.scss
@@ -3,7 +3,7 @@
top: 0;
left: 0;
background-color: black;
- color: #fff;
+ color: var(--semi-color-white);
border-radius: 50%;
padding: 20px 12px;
box-shadow: 6px 7.3px 2.7px rgba(0, 0, 0, 0.016), 8.1px 9.8px 6.9px rgba(0, 0, 0, 0.018),
diff --git a/packages/demo/src/components/Draggable/demo/index.ts b/packages/demo/src/components/Draggable/demo/index.ts
deleted file mode 100644
index 8378720..0000000
--- a/packages/demo/src/components/Draggable/demo/index.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-function getDemo(component: string) {
- return `import { DraggableList, DraggableItem } from 'pivot-design';
- import React, { useState } from 'react';
- const [items, setItems] = useState([1, 2, 3, 4, 5]);
- const reorderItems = (oldIndex: number, newIndex: number) => setItems((items) => arrayMove(items, oldIndex, newIndex));
- const App: React.FC = () => (
- <>
- ${component.trim()}
- >
- );
- export default App;`;
-}
-
-export default {
- basic: `import { DndContext, DraggableItem } from 'pivot-design'
- import React, { useState } from 'react';
-const [coordinates, setCoordinates] = useState({ x: 0, y: 0 });
-const onDragEnd = ({ delta }: { delta: { x: number; y: number }; event: Event }) => {
- setCoordinates(({ x, y }) => {
- return {
- x: x + delta.x,
- y: y + delta.y,
- };
- });
-};
-const App: React.FC = () => (
- <>
-
-
- draggable
-
-
- >
-);
-export default App;`,
- verticalSortable: `import { Sortable } from 'pivot-design'
-const App: React.FC = () => (
-
-);
-export default App;`,
- droppable: `import { DndContext, DraggableItem, Droppable } from 'pivot-design'
-import React, { useState } from 'react';
-const onDragEnd = ({ id, isDrop }: { id: string; isDrop: boolean }) => {
- setParent(isDrop ? id : '');
-};
-const DraggableBlock = () => (
-
- draggable
-
-);
-const [parent, setParent] = useState('');
-const App: React.FC = () => (
-
- {parent !== 'A' ? : null}
- {parent === 'A' ? : null}
-
-);
-export default App;`,
-};
diff --git a/packages/demo/src/components/Draggable/index.mdx b/packages/demo/src/components/Draggable/index.mdx
index c1ed9be..1192e45 100644
--- a/packages/demo/src/components/Draggable/index.mdx
+++ b/packages/demo/src/components/Draggable/index.mdx
@@ -12,11 +12,15 @@
## 基本示例
+下面是一个最基础的拖拽实例,可以用鼠标任意拖拽实例中的元素。
+
-## 自定义拖拽过程中的样式
+## 拖拽过程中的元素
+
+拖拽组件支持自定义渲染正在处于拖拽过程中的元素。
@@ -24,17 +28,23 @@
## 设置可拖拽区域
+支持设置可拖拽的区域。
+
## 拖放案例
+支持拖拽并放置到指定区域
+
-## 🌟 拖拽排序组件
+## 🌟 拖拽排序
+
+拖拽排序(Drag-and-drop sorting)是一种广泛实用的交互设计手法。支持用户进行垂直、水平以及网格布局的拖拽排序。
### 垂直方向拖拽
@@ -56,6 +66,8 @@
### 多容器拖拽(垂直)
+支持多个容器之间进行拖拽排序的场景
+
diff --git a/packages/demo/src/components/_CodeBlock/codeBlock.tsx b/packages/demo/src/components/_CodeBlock/codeBlock.tsx
index 0465f84..2c521cf 100644
--- a/packages/demo/src/components/_CodeBlock/codeBlock.tsx
+++ b/packages/demo/src/components/_CodeBlock/codeBlock.tsx
@@ -1,4 +1,7 @@
import Prism from 'prismjs';
+import CodeExpendIcon from '../../images/codeExpend';
+import CodeUnexpendIcon from '../../images/codeUnexpand';
+import './index.scss';
import React, { useRef, useState, useEffect, TransitionEventHandler, CSSProperties } from 'react';
interface ICodeProps {
children: React.ReactNode;
@@ -11,9 +14,9 @@ interface ICodeProps {
}
const CodeBlock: React.FC = (props) => {
const { code, children, line, style } = props;
- const [expand, setExpand] = useState(false);
+ const [expand, setExpand] = useState(true);
// 使用max-height实现不确定数值的transition
- const [codeDisplay, setCodeDisplay] = useState(false);
+ const [codeDisplay, setCodeDisplay] = useState(true);
const codeRef = useRef(null);
useEffect(() => {
if (!codeRef.current) {
@@ -41,7 +44,7 @@ const CodeBlock: React.FC = (props) => {
setCodeDisplay(false);
}}
>
-
+
) : (
= (props) => {
setCodeDisplay(true);
}}
>
-

+
)}
diff --git a/packages/demo/src/components/_CodeBlock/index.scss b/packages/demo/src/components/_CodeBlock/index.scss
index 75530c1..d43da29 100644
--- a/packages/demo/src/components/_CodeBlock/index.scss
+++ b/packages/demo/src/components/_CodeBlock/index.scss
@@ -1,31 +1,22 @@
.pivot-code-box {
position: relative;
- display: inline-block;
- width: 100%;
- margin: 16px 0;
+ margin: 30px 0;
overflow: hidden;
- border: 1px solid rgba(5, 5, 5, 0.06);
+ border: 1px solid rgba(243, 242, 242, 0.1);
border-radius: 6px;
- -webkit-transition: all 0.2s;
- transition: all 0.2s;
&-actions {
display: flex;
flex-direction: row-reverse;
+ align-items: center;
padding: 4px 8px;
.pivot-code-box-icon {
- width: 20px;
- height: 20px;
cursor: pointer;
- img {
- width: 100%;
- height: 100%;
- }
}
}
&-demo {
- padding: 24px 30px;
+ padding: 60px 30px;
display: flex;
- border-bottom: 1px solid rgba(5, 5, 5, 0.06);
+ border: 1px solid rgba(243, 242, 242, 0.1);
flex-wrap: wrap;
justify-content: center;
align-items: center;
@@ -35,12 +26,11 @@
}
.line-numbers {
- //width: 100%;
.code-toolbar {
.data-prismjs-copy {
- //width: 70vw;
- //width: 100%;
+ font-size: 12px;
overflow: auto;
+ margin: 0;
}
}
}
diff --git a/packages/demo/src/examples/Draggable/Draggable.tsx b/packages/demo/src/examples/Draggable/Draggable.tsx
index 708543a..1c626be 100644
--- a/packages/demo/src/examples/Draggable/Draggable.tsx
+++ b/packages/demo/src/examples/Draggable/Draggable.tsx
@@ -12,7 +12,7 @@ const Draggable = () => {
const [parent, setParent] = useState('');
const [items, setItems] = useState([1, 2, 3, 4, 5]);
const [coordinates, setCoordinates] = useState({ x: 0, y: 0 });
- const onDragEnd = ({ delta, activeNode }: { delta: { x: number; y: number }; event: Event }) => {
+ const onDragEnd = ({ delta, activeNode }: { delta: { x: number, y: number }, event: Event }) => {
setCoordinates(({ x, y }) => {
return {
x: x + delta.x,
@@ -20,7 +20,7 @@ const Draggable = () => {
};
});
};
- const onDragEnd2 = ({ id, isDrop }: { id: string; isDrop: boolean }) => {
+ const onDragEnd2 = ({ id, isDrop }: { id: string, isDrop: boolean }) => {
setParent(isDrop ? id : '');
};
const reorderItems = (oldIndex: number, newIndex: number) =>
diff --git a/packages/demo/src/images/big-logo.tsx b/packages/demo/src/images/big-logo.tsx
index e9c0fcf..35bc158 100644
--- a/packages/demo/src/images/big-logo.tsx
+++ b/packages/demo/src/images/big-logo.tsx
@@ -1,94 +1,14 @@
function BigLogo() {
return (
-