Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

try to add a icon and fix some misspelling #804

Merged
merged 3 commits into from
Aug 22, 2023
Merged

try to add a icon and fix some misspelling #804

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
029b45a
feat: add icon and fix some misspelling
GuYith Aug 22, 2023
a562771
Merge branch 'master' of github.com:GuYith/omi into master
GuYith Aug 22, 2023
133fa95
Merge branch 'master' into master
dntzhang Aug 22, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion tdesign/desktop/site/src/components/web/rate/index.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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