16slowly/some-components

some-components's Issues

Carousel

图例：

dom:

<div class="root">
   <div class="mask mask-left"  />
   <div class="content">{content}</div>
   <
</div>

js:

 // 保存 currentIndex
 this.previousIndex = currentIndex

 leave: {
   leaveInLeft:  this.previousIndex < currentIndex  // 向左
   leaveInRight: this.previousIndex > currentIndex   // 向右，previousIndex = 5，currentIndex = 1 时向左
}

css:

.root {
   width: 100%;
   position: relative;
}

.content {
   width: 50%;
   position: absolute;
   top: 0;
   left: 0;
}

.contentEnter {
  
}

.contentLeave {
   
}

.mask {
  width: 50%;
  opacity: 1;
  position: absolute;
  top: 0;
}

// 决定 mask 是放在左边还是右边
.maskRight {
   left: 50%;
}

.maskLeft {
  left: -50%;
}

.maskLeave {
  left: 0%;
  opacity: 0;
}

danmuku

需求

视频播放器弹幕功能

方案

<Danmuku  />

SubComponents

1. 显示屏

<Screen message={} />

关键点:

• 使用 transition 实现弹幕消息右进左出效果，移动速度随机。
• 消息排布位置在 X 轴上分先后，Y 轴上分行。

2. 控制面板，包括输入框(加表情图)，发送键及清屏键

<ControlPannel  sendMessage={} onClear={} />

关键点：

• 不包含表情组件

Dialog Component

方案

• 将组件放置在整个应用的根组件 <App /> 中, 通过 redux store 存储 showDialog 及其他信息 ，在 App 中监听该属性，有对话框的页面通过对该值进行操作，达到控制对话框显示或隐藏的目的。

  • 使用 css 控制对话框位置居中，Dom 结构为

    <div class="wrapper">
       {... content }
    </div>

  • 将 Dialog 定义为 HOC , 保证对话框中的内容及样式可自定义

     <Dialog>
        <div> title </div>
        <div>content</div>
          {....}
     </Dialog>

关闭对话框事件为对话框自身的缺省事件，如果外界未传入，则默认为【关闭】仅是关闭对话框

• 由 Dialog 自身控制是否隐藏, Dialog 最终表现为一个 Promise

  Dialog({
     content: DomTree， // 对话框的 content， 需要自定义
     ... another
  }).then(() => {
     // 点击【确定】之后的需要执行的事件， 如果有【确定】
  })

• 使用 React v16 Portals

  React.createPortals(this.props.children, domNode)

• this.props.children: 要传送的组件，这里是 Dialog，还可以是 Hovercards, Tooltips.
• domNode: 显示组件的dom，这里是需要显示对话框的页面。