back-top 1.0.1 and add into site

tdesign/desktop/site/site.config.mjs

@@ -159,14 +159,12 @@ export const docs = [
  // component: () => import('tdesign-omi/anchor/anchor.md'),
  // componentEn: () => import('tdesign-omi/anchor/anchor.en-US.md'),
  // },
- // {
- // title: 'BackTop 回到顶部',
- // titleEn: 'BackTop',
- // name: 'back-top',
- // path: '/back-top',
- // component: () => import('tdesign-omi/back-top/back-top.md'),
- // componentEn: () => import('tdesign-omi/back-top/back-top.en-US.md'),
- // },
+ {
+ title: 'BackTop 回到顶部',
+ titleEn: 'BackTop',
+ name: 'back-top',
+ path: '/back-top',
+ },
  // {
  // title: 'Breadcrumb 面包屑',
  // titleEn: 'Breadcrumb',

tdesign/desktop/site/src/components/web/back-top/index.tsx

@@ -0,0 +1,119 @@
+import { WeElement, define, h, createRef } from 'omi'
+import '../common/index'
+import '../../../../../src/back-top/_example/back-top-base'
+import '../../../../../src/back-top/_example/back-top-duration'
+
+
+import * as marked from 'marked'
+
+const docsHTML = marked.parse(`
+
+## API
+### Rate Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+allowInputOverMax | Boolean | false | 超出maxlength或maxcharacter之后是否还允许输入 | N
+autofocus | Boolean | false | 自动聚焦，拉起键盘 | N
+autosize | Boolean / Object | false | 高度自动撑开。 autosize = true 表示组件高度自动撑开，同时，依旧允许手动拖高度。如果设置了 autosize.maxRows 或者 autosize.minRows 则不允许手动调整高度。TS 类型： \`boolean / { minRows?: number; maxRows?: number }\` | N
+disabled | Boolean | false | 是否禁用文本框 | N
+label | String / Slot / Function | - | 左侧文本。TS 类型：\`string / TNode\`。[通用类型定义](https:/Tencent/omi/blob/master/tdesign/desktop/src/common.ts) | N
+maxcharacter | Number | - | 用户最多可以输入的字符个数，一个中文汉字表示两个字符长度 | N
+maxlength | Number | - | 用户最多可以输入的字符个数 | N
+name | String | - | 名称，HTML 元素原生属性 | N
+placeholder | String | undefined | 占位符 | N
+readonly | Boolean | false | 只读状态 | N
+status | String | - | 文本框状态。可选项：default/success/warning/error | N
+tips | String / Slot / Function | - | 输入框下方提示文本，会根据不同的 status 呈现不同的样式。TS 类型：\`string / TNode\`。[通用类型定义](https:/Tencent/omi/blob/master/tdesign/desktop/src/common.ts) | N
+value | String / Number | - | 文本框值。TS 类型：\`TextareaValue type TextareaValue = string\`。[详细类型定义](https:/Tencent/omi/blob/master/tdesign/desktop/src/textarea/type.ts) | N
+defaultValue | String / Number | - | 文本框值。非受控属性。TS 类型：\`TextareaValue type TextareaValue = string\`。[详细类型定义](https:/Tencent/omi/blob/master/tdesign/desktop/src/textarea/type.ts) | N
+onBlur | Function | - | TS 类型：\`(value: TextareaValue, context: { e: FocusEvent }) => void\` <br/>失去焦点时触发 | N
+onChange | Function | - | TS 类型：\`(value: TextareaValue, context?: { e?: InputEvent }) => void\` <br/>输入内容变化时触发 | N
+onFocus | Function | - | TS 类型：\`TS 类型：(value: TextareaValue, context : { e: FocusEvent }) => void\` <br/>获得焦点时触发 | N
+onKeydown | Function | - | TS 类型：\`(value: TextareaValue, context: { e: KeyboardEvent }) => void\` <br/>键盘按下时触发 | N
+onKeypress | Function | - | TS 类型：\`(value: TextareaValue, context: { e: KeyboardEvent }) => void\` <br/>按下字符键时触发（keydown -> keypress -> keyup） | N
+onKeyup | Function | - | TS 类型：\`(value: TextareaValue, context: { e: KeyboardEvent }) => void\` <br/>释放键盘时触发 | N
+
+`)
+
+interface Props {
+ tab: string
+}
+
+define(
+ 'page-back-top',
+ class extends WeElement<Props> {
+ static defaultProps = {
+ tab: 'demo',
+ }
+
+ static css = `code {
+ margin: 0 2px;
+ color: var(--error-8);
+ background: var(--error-1);
+ border-radius: 3px;
+ padding: 2px 6px;
+ font-size: 12px;
+ word-break: break-word;
+ }`
+
+ tab = ['demo', 'api', 'design']
+ tdDocHeader = createRef()
+ tdDocTabs = createRef()
+
+ static propTypes = {
+ tab: String,
+ }
+
+ updateTab = (t: string) => {
+ this.updateProps({
+ tab: t,
+ })
+ }
+
+ isShow(tabStr: string) {
+ return this.props.tab === tabStr ? { display: 'block' } : { display: 'none' }
+ }
+
+ installed() {
+ this.tdDocTabs.current.onchange = ({ detail: currentTab }) => {
+ this.updateTab(currentTab)
+ }
+ }
+
+ render() {
+ return (
+ <>
+ <td-doc-tabs ref={this.tdDocTabs} tab={this.props.tab} style="display:block"></td-doc-tabs>
+ <div style={this.isShow('demo')} name="DEMO">
+ <h3 id='基础的回到顶部'>
+ 基础的回到顶部 <a class="header-anchor" href="#基础的回到顶部"></a></h3>
+ <p>默认距离页面右侧24px，距离页面底部80px，滚动动画时长200ms</p>
+ <demo-wrapper>
+ <back-top-base></back-top-base>
+ </demo-wrapper>
+
+ <h3 id='可设置不同耗时的回到顶部'>
+ 可设置不同耗时的回到顶部 <a class="header-anchor" href="#可设置不同耗时的回到顶部"></a></h3>
+ <demo-wrapper>
+ <back-top-duration></back-top-duration>
+ </demo-wrapper>
+
+
+
+
+ </div>
+ <div style={this.isShow('api')} name="API">
+ <div
+ style="margin-bottom:76px"
+ dangerouslySetInnerHTML={{
+ __html: docsHTML,
+ }}
+ ></div>
+ </div>
+ <div style={this.isShow('design')} name="DESIGN"></div>
+ </>
+ )
+ }
+ },
+)

tdesign/desktop/site/src/router.ts

@@ -24,7 +24,8 @@ const components = [
  'notification',
  'popup',
  'dropdown',
- 'list'
+ 'list',
+ 'back-top'
 ]
 
 export function registerRouting(rootEl: any) {

tdesign/desktop/src/back-top/_example/back-top-base.tsx

@@ -0,0 +1,49 @@
+import { OmiProps, WeElement, h, tag, classNames, render, createRef} from 'omi'
+
+import '../index'
+
+import '../../list/list-item-meta'
+import '../../list/list-item'
+import '../../list/list'
+
+@tag('back-top-base')
+export default class backTopBase extends WeElement {
+ height = 300;
+
+ scrollCss = `.t-list{
+ height: ` + this.height + `px !important;
+ overflow: auto,
+ }`
+
+ render() {
+ return (
+ <h.f>
+ <div style="position: relative;">
+ <t-list class="baseList_container" css={this.scrollCss}>
+ <t-list-item>列表内容</t-list-item>
+ <t-list-item>列表内容</t-list-item>
+ <t-list-item>列表内容</t-list-item>
+ <t-list-item>列表内容</t-list-item>
+ <t-list-item>列表内容</t-list-item>
+ <t-list-item>列表内容</t-list-item>
+ <t-list-item>列表内容</t-list-item>
+ <t-list-item>列表内容</t-list-item>
+ <t-list-item>列表内容</t-list-item>
+ <t-list-item>列表内容</t-list-item>
+ <t-list-item>列表内容</t-list-item>
+ <t-list-item>列表内容</t-list-item>
+ <t-list-item>列表内容</t-list-item>
+ <t-list-item>列表内容</t-list-item>
+ <t-list-item>列表内容</t-list-item>
+ <t-list-item>列表内容</t-list-item>
+ <t-list-item>列表内容</t-list-item>
+ <t-list-item>列表内容</t-list-item>
+ <t-list-item>列表内容</t-list-item>
+ <t-list-item>列表内容</t-list-item>
+ </t-list>
+ <t-back-top container=".baseList_container"></t-back-top>
+ </div>
+ </h.f>
+ )
+ }
+}

tdesign/desktop/src/back-top/_example/back-top-duration.tsx

@@ -0,0 +1,49 @@
+import { OmiProps, WeElement, h, tag, classNames, render, createRef} from 'omi'
+
+import '../index'
+
+import '../../list/list-item-meta'
+import '../../list/list-item'
+import '../../list/list'
+
+@tag('back-top-duration')
+export default class backTopDuration extends WeElement {
+ height = 300;
+
+ scrollCss = `.t-list{
+ height: ` + this.height + `px !important;
+ overflow: auto,
+ }`
+
+ render() {
+ return (
+ <h.f>
+ <div style="position: relative;">
+ <t-list class="baseList_container" css={this.scrollCss}>
+ <t-list-item>列表内容</t-list-item>
+ <t-list-item>列表内容</t-list-item>
+ <t-list-item>列表内容</t-list-item>
+ <t-list-item>列表内容</t-list-item>
+ <t-list-item>列表内容</t-list-item>
+ <t-list-item>列表内容</t-list-item>
+ <t-list-item>列表内容</t-list-item>
+ <t-list-item>列表内容</t-list-item>
+ <t-list-item>列表内容</t-list-item>
+ <t-list-item>列表内容</t-list-item>
+ <t-list-item>列表内容</t-list-item>
+ <t-list-item>列表内容</t-list-item>
+ <t-list-item>列表内容</t-list-item>
+ <t-list-item>列表内容</t-list-item>
+ <t-list-item>列表内容</t-list-item>
+ <t-list-item>列表内容</t-list-item>
+ <t-list-item>列表内容</t-list-item>
+ <t-list-item>列表内容</t-list-item>
+ <t-list-item>列表内容</t-list-item>
+ <t-list-item>列表内容</t-list-item>
+ </t-list>
+ <t-back-top container=".baseList_container" duration={500}></t-back-top>
+ </div>
+ </h.f>
+ )
+ }
+}

tdesign/desktop/src/backTop/index.tsx → tdesign/desktop/src/back-top/index.tsx

@@ -1,8 +1,11 @@
 import { OmiProps, WeElement, h, tag, classNames, createRef } from 'omi'
 import style from './style'
+import { scrollTo } from '../utils/dom';
 import { BackTopProps } from './types'
 import { TdClassNamePrefix } from '../utils/clsx'
 
+import '../icon/backtop'
+
 const BackTopClassNamePrefix = (className: string) => TdClassNamePrefix('back-top__') + className
 
 @tag('t-back-top')
@@ -37,20 +40,63 @@ export default class BackTop extends WeElement<BackTopProps> {
  onClick: Function,
  }
 
- installed() {
+ getContainer = (container: BackTopProps['container']) => {
+ if (typeof container === 'string' && typeof document !== undefined) {
+ if (container === 'body') {
+ return document
+ }
+ container = container.slice(1,this.props.container.length)
+ if(container == this.parentNode.children[0].classList[0]){
+ let containerNode = this.parentNode.children[0].shadowRoot.children[1]
+ return containerNode
+ }
+ // return document.querySelector(container)
+ }
+ if (typeof container === 'function') {
+ return container()
+ }
+ return null
+ };
+
+ getBackTo = () => {
+ // if (!this.props.container) return 0
+ // const targetNode = this.getContainer(this.props.container)
+ // if (!targetNode) return 0
+ // const rect = targetNode.getBoundingClientRect()
+ // const { y } = rect
+ // return y
+ return 0
+ }
+
 
- console.log(this.props.container)
- let containerNode = document.querySelector(this.props.container).children[0]
+ installed() {
+ let that = this
+ // console.log(document.querySelector(this.props.container));
+ // console.log(this.getContainer(this.props.container))
+ let container = this.props.container.slice(1,this.props.container.length)
+ // console.log(this.props.container.slice(1,this.props.container.length))
+ // console.log(this.parentNode.children[0].classList[0])
+ let containerNode = null
+
+ if(container == this.parentNode.children[0].classList[0]){
+ containerNode = this.parentNode.children[0].shadowRoot.children[1]
+ }
+
  let buttonNode = this.button.current
+ buttonNode.style.position = 'absolute'
  if(this.props.offset){
  buttonNode.style.right = this.props.offset[0]
  buttonNode.style.bottom = this.props.offset[1]
  }
-
 
+ let duration = this.props.duration
+ let scrollContainer = this.getContainer(this.props.container)
  buttonNode.addEventListener('click', () => {
- containerNode.scrollTop = 0
- this.classList.remove(TdClassNamePrefix(`back-top--show`)) // 移除类名
+ const backTo = that.getBackTo();
+ console.log(backTo)
+ scrollTo(backTo, { container: scrollContainer, duration });
+ // containerNode.scrollTop = 0
+ // this.classList.remove(TdClassNamePrefix(`back-top--show`)) // 移除类名
  })
 
  let visibleHeight = 0
@@ -62,7 +108,6 @@ export default class BackTop extends WeElement<BackTopProps> {
 
  containerNode.addEventListener('scroll', () => {
  const offsetTop = Math.abs(containerNode.scrollTop)
- console.log(containerNode.scrollTop)
  if (offsetTop > visibleHeight) {
  buttonNode.classList.add(TdClassNamePrefix(`back-top--show`)) // 添加类名
  } else {
@@ -74,19 +119,19 @@ export default class BackTop extends WeElement<BackTopProps> {
 
  getSizeClass(size : string){
  if(size == 'medium'){
- return TdClassNamePefix(`size-m`)
+ return TdClassNamePrefix(`size-m`)
  }
  else if(size == 'small'){
- return TdClassNamePefix(`size-s`)
+ return TdClassNamePrefix(`size-s`)
  }
  }
 
  getThemeClass(theme : string){
- return TdClassNamePefix(`back-top--theme-${theme}`)
+ return TdClassNamePrefix(`back-top--theme-${theme}`)
  }
 
  getShapeClass(shpae : string){
- return TdClassNamePefix(`back-top--${shpae}`)
+ return TdClassNamePrefix(`back-top--${shpae}`)
  }
 
  //textarea ref
@@ -102,30 +147,16 @@ export default class BackTop extends WeElement<BackTopProps> {
  <button
  type="button"
 
- class={classNames(TdClassNamePefix('back-top'),
+ class={classNames(TdClassNamePrefix('back-top'),
  this.getSizeClass(size),
  this.getThemeClass(theme),
  this.getShapeClass(shape)
  )}
  ref={this.button}
 
  >
- <span class={classNames(BackTopClassNamePrefix('text'))}>返回顶部</span>
- <svg
- t="1692345983557"
- class="icon"
- viewBox="0 0 1024 1024"
- version="1.1"
- xmlns="http://www.w3.org/2000/svg"
- p-id="4867"
- class={classNames(BackTopClassNamePrefix('icon'))}
- >
- <path
- d="M877.330034 611.250468 542.062178 273.77841c-7.429203-7.463995-17.135262-11.05273-26.801413-10.978029-1.309832-0.107447-2.426259-0.74599-3.736091-0.74599-5.451152 0-10.527774 1.270946-15.192004 3.361561-4.705162 1.793856-9.18315 4.516874-12.992919 8.328689L180.811554 575.74686c-14.600533 14.559601-14.633279 38.192857-0.039909 52.78725 7.2798 7.315616 16.838503 10.977006 26.429952 10.977006 9.55768 0 19.077497-3.660366 26.396183-10.902304l240.59873-240.222153 0 485.548558c0 20.643156 16.72287 37.332257 37.32714 37.332257 20.609387 0 37.332257-16.690124 37.332257-37.332257L548.855908 386.556986l275.53952 277.328259c7.2798 7.318686 16.912182 11.015891 26.463722 11.015891 9.559727 0 19.042705-3.625574 26.323529-10.862395C891.850749 649.51291 891.889635 625.844861 877.330034 611.250468L877.330034 611.250468zM922.166195 187.393971 100.889293 187.393971c-20.61041 0-37.334303-16.723893-37.334303-37.32714 0-20.608364 16.723893-37.332257 37.334303-37.332257L922.166195 112.734574c20.642133 0 37.32714 16.723893 37.32714 37.332257C959.493336 170.669054 942.808328 187.393971 922.166195 187.393971L922.166195 187.393971zM922.166195 187.393971"
- fill="#000000"
- p-id="4868"
- ></path>
- </svg>
+ <t-icon-backtop></t-icon-backtop>
+ <span class={classNames(BackTopClassNamePrefix('text'))}>TOP</span>
  </button>
  </>
  )