Skip to content

Commit

Permalink
Merge pull request #804 from GuYith/master
Browse files Browse the repository at this point in the history 
try to add a icon and fix some misspelling
  • Loading branch information
@dntzhang
dntzhang committed Aug 22, 2023
2 parents b5a239e + 133fa95 commit 764f8de
Show file tree
Hide file tree
Showing 24 changed files with 502 additions and 465 deletions.
5 changes: 4 additions & 1 deletion tdesign/desktop/site/src/components/web/rate/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import '../common/index'
import '../../../../../src/rate/_example/base'
import '../../../../../src/rate/_example/custom'
import '../../../../../src/rate/_example/status'
import '../../../../../src/rate/_example/size'
import * as marked from 'marked'

const docsHTML = marked.parse(`
Expand Down Expand Up @@ -95,7 +96,9 @@ define(
<p>
可以通过 <td-code text="size"></td-code> 属性调整图标尺寸。
</p>
<demo-wrapper>待完善</demo-wrapper>
<demo-wrapper>
<rate-size></rate-size>
</demo-wrapper>
<h3 id="自定义评分图标">
自定义评分图标 <a class="header-anchor" href="#自定义评分图标"></a>
</h3>
Expand Down
129 changes: 54 additions & 75 deletions tdesign/desktop/src/alert/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,14 @@
import { OmiProps, WeElement, h, tag, classNames } from 'omi'
import style from './style'
import { AlertProps } from './types';
import { TdClassNamePefix } from '../utils/clsx';
import { isArray } from 'lodash';
import { TNode } from '@src/common';
import { AlertProps } from './types'
import { TdClassNamePrefix } from '../utils/clsx'
import { isArray } from 'lodash'
import { TNode } from '@src/common'

const AlertClassNamePefix = (className: string) => TdClassNamePefix('alert__') + className;
const AlertClassNamePrefix = (className: string) => TdClassNamePrefix('alert__') + className

@tag('t-alert')
export default class Alert extends WeElement {

static propTypes = {
className: String,
style: String,
Expand All @@ -27,109 +26,89 @@ export default class Alert extends WeElement {

static css = style

collapse = false;
collapse = false

renderMessage(message: string | string[] | TNode) {
return (maxLine: number) => {
if (!isArray(message)) return message;
const len = message.length - 1;
return message.filter((_v, idx) => !this.collapse ? idx < maxLine : idx <= len).map(msg => <div>{msg}</div>)
if (!isArray(message)) return message
const len = message.length - 1
return message.filter((_v, idx) => (!this.collapse ? idx < maxLine : idx <= len)).map((msg) => <div>{msg}</div>)
}
}

handleCollapse = () => {
this.collapse = !this.collapse;
this.collapse = !this.collapse
this.update()
}

handleClose() {
const { onClose, onClosed } = this.props as AlertProps;
this.remove();
onClose();
const { onClose, onClosed } = this.props as AlertProps
this.remove()
onClose()

setTimeout(() => {
onClosed();
}, 10);

onClosed()
}, 10)
}

render(props: OmiProps<AlertProps, any>, store: any) {
const { theme, message, className, style, operation, icon, close, title, maxLine } = props

const { theme, message, className, style, operation, icon, close, title, maxLine } = props;

const t = theme || "info"
const t = theme || 'info'

return (
<>
<div
style={style}
class={
classNames(
TdClassNamePefix('alert'),
TdClassNamePefix(`alert--${t}`),
className
)
}>
<div class={TdClassNamePefix('alert__icon')}>
<svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class={
classNames(
TdClassNamePefix('icon'),
TdClassNamePefix('icon-check-circle-filled')
)
}>
<path fill="currentColor" d="M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z"></path>
<div style={style} class={classNames(TdClassNamePrefix('alert'), TdClassNamePrefix(`alert--${t}`), className)}>
<div class={TdClassNamePrefix('alert__icon')}>
<svg
fill="none"
viewBox="0 0 24 24"
width="1em"
height="1em"
class={classNames(TdClassNamePrefix('icon'), TdClassNamePrefix('icon-check-circle-filled'))}
>
<path
fill="currentColor"
d="M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z"
></path>
</svg>
</div>

<div class={AlertClassNamePefix('content')}>
{
title && (
<div class={AlertClassNamePefix('title')}>{title}</div>
)
}
<div class={AlertClassNamePefix('message')}>
<div class={AlertClassNamePefix('description')}>
<div class={AlertClassNamePrefix('content')}>
{title && <div class={AlertClassNamePrefix('title')}>{title}</div>}
<div class={AlertClassNamePrefix('message')}>
<div class={AlertClassNamePrefix('description')}>
{this.renderMessage(message)(maxLine as number)}

{(message instanceof Array && maxLine) && (
<div class={AlertClassNamePefix('collapse')} onClick={this.handleCollapse}>
{message instanceof Array && maxLine && (
<div class={AlertClassNamePrefix('collapse')} onClick={this.handleCollapse}>
{this.collapse ? '展开' : '收起'}
</div>
)}
</div>

{
operation && (
<div class={AlertClassNamePefix('operation')}>
{operation}
</div>
)
}

{operation && <div class={AlertClassNamePrefix('operation')}>{operation}</div>}
</div>
</div>

{
close && (
<div
onClick={this.handleClose.bind(this)}
class={AlertClassNamePefix('close')}>
<svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class={
classNames(
TdClassNamePefix('icon'),
TdClassNamePefix('icon-close')
)
}>
<path fill="currentColor" d="M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z"></path>
</svg>
</div>
)
}

{close && (
<div onClick={this.handleClose.bind(this)} class={AlertClassNamePrefix('close')}>
<svg
fill="none"
viewBox="0 0 24 24"
width="1em"
height="1em"
class={classNames(TdClassNamePrefix('icon'), TdClassNamePrefix('icon-close'))}
>
<path
fill="currentColor"
d="M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z"
></path>
</svg>
</div>
)}
</div>

</>
)
}

}
}
29 changes: 17 additions & 12 deletions tdesign/desktop/src/backTop/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import { OmiProps, WeElement, h, tag, classNames, createRef } from 'omi'
import style from './style'
import { BackTopProps } from './types'
import { TdClassNamePefix } from '../utils/clsx'
import { TdClassNamePrefix } from '../utils/clsx'

const BackTopClassNamePefix = (className: string) => TdClassNamePefix('back-top__') + className
const BackTopClassNamePrefix = (className: string) => TdClassNamePrefix('back-top__') + className

@tag('t-back-top')
export default class BackTop extends WeElement<BackTopProps> {
Expand Down Expand Up @@ -38,6 +38,7 @@ export default class BackTop extends WeElement<BackTopProps> {
}

installed() {

console.log(this.props.container)
let containerNode = document.querySelector(this.props.container).children[0]
let buttonNode = this.button.current
Expand All @@ -46,28 +47,30 @@ export default class BackTop extends WeElement<BackTopProps> {
buttonNode.style.bottom = this.props.offset[1]
}


buttonNode.addEventListener('click', () => {
containerNode.scrollTop = 0;
this.classList.remove(TdClassNamePefix(`back-top--show`)) // 移除类名
});
containerNode.scrollTop = 0
this.classList.remove(TdClassNamePrefix(`back-top--show`)) // 移除类名
})

let visibleHeight = 0
if (typeof this.props.visibleHeight == 'number') {
visibleHeight = this.props.visibleHeight
} else {
visibleHeight = parseInt(this.props.visibleHeight)
}

containerNode.addEventListener('scroll', () => {
const offsetTop = Math.abs(containerNode.scrollTop)
console.log(containerNode.scrollTop)
if (offsetTop > visibleHeight) {
buttonNode.classList.add(TdClassNamePefix(`back-top--show`)) // 添加类名
buttonNode.classList.add(TdClassNamePrefix(`back-top--show`)) // 添加类名
} else {
buttonNode.classList.remove(TdClassNamePefix(`back-top--show`)) // 移除类名
buttonNode.classList.remove(TdClassNamePrefix(`back-top--show`)) // 移除类名
}
})
}


getSizeClass(size : string){
if(size == 'medium'){
Expand All @@ -92,28 +95,30 @@ export default class BackTop extends WeElement<BackTopProps> {
render(props: OmiProps<BackTopProps, any>, store: any) {
const { container, visibleHeight, offset, size, theme, shape } = props



return (
<>
<button
type="button"

class={classNames(TdClassNamePefix('back-top'),
this.getSizeClass(size),
this.getThemeClass(theme),
this.getShapeClass(shape)
)}
ref={this.button}

>
<span class={classNames(BackTopClassNamePefix('text'))}>返回顶部</span>
<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(
BackTopClassNamePefix('icon'),
)}
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"
Expand Down
Loading

0 comments on commit 764f8de

Please sign in to comment.