实习内容小结

实习期间参与了公司React组件库的开发工作。组件的设计理念沿用Material-ui，以下是我所负责组件的实现介绍和效果展示。gif图片加载比较慢一些，多给它一点耐心～

1.画线以及拖拽组件（雪花模型）

可用于绘制UML等框图，展示效果参考devsketch的line功能。包含画线，多种箭头及线段样式选择，移除线段等功能。

drawing

效果参考devsketch的line功能

2.Upload系列组件之-拖拽上传

通过拖拽本地文件至上传框采用拖拽上传，或者点击上传框区域内使用点击上传均可。图片文件采用预览展示，其他文件展示文件名。点击小方框右上角的关闭按钮即可删除文件。
基于React DnD 由于拖拽源是本地文件，不需要用包裹，但需要为dropTarget增加一个accept的props，用于指定可以接收的接收源。

在TargetBox.js文件中将props.accepts值作为可以接收的接收源。

export default DropTarget((props) => props.accepts, boxTarget, collect)(TargetBox);

Drag / Click to upload

3.Upload系列组件之-手动点击上传

选定文件后采用手动点击上传方式，点击上传使用status Button，可以根据上传成功或失败展示不同的按钮状态。

upload

4.Upload系列组件之-简单上传

选中文件即上传的简单上传模式，也可点击删除上传文件。

uploadBasic

5.Upload系列组件之-头像上传

uploadImg

6. 时钟的国际化demo

对于基本时钟组件的国际化效果展示。

Picker.gif

7.整个组件库的组件内部、跨组件间的拖拽操作

为了整个组件库的组件内部、跨组件间的拖拽操作的书写便利，降低学习成本，基于React DnD进行封装，将drag&drop分为两种情况。

1. 某个组件是drag source，另一个组件是drop target的情况
2. 某个组件既是drag source又是drop target的情况

以某个组件是drag source，另一个组件是drop target的情况介绍使用方法：
对作为drag source（拖拽源）的组件，此处以元素

boxA

为例，进行如下包裹。

    
        
boxA
    

对作为drop target（放置目标，即接收拖拽源）的组件，此处我们以组件ManuallyDropTarget为例，进行如下包裹。

和对DnD对于所有拖拽都要进行的公用写法的封装，中定义了一类拖拽方法的实现，对于想要实现这类拖拽效果的拖拽源组件都可以用包裹。

Dragbase.gif

是可以自行定义的，我们定义成实现拖拽后按顺序排列的效果。

Orderdrag.gif