diff --git a/scripts/sync-docs.js b/scripts/sync-docs.js new file mode 100644 index 0000000000000000000000000000000000000000..40c4977cf49a0758768af465c1a2e57545b85723 --- /dev/null +++ b/scripts/sync-docs.js @@ -0,0 +1,15 @@ +const vfs = require('vinyl-fs') +const path = require('path') +const base = process.cwd() +const docs = path.join(base, 'docs') +const components = path.join(base, 'src/packages') +const { rm } = require('fs/promises') +rm(docs, { recursive: true, force: true }) + .then((res) => { + if (res === undefined) { + vfs.src([`${components}/**/*.md`]).pipe(vfs.dest(docs)) + } + }) + .catch((err) => { + console.log('rm docs err:', err) + }) diff --git a/src/config.json b/src/config.json index 5aff6034dd7197ad4d2d0376d27239b2e41581f2..36f388d2f1a9aa7323f7970c2d6bf5d975c2a71b 100644 --- a/src/config.json +++ b/src/config.json @@ -263,16 +263,6 @@ "show": true, "author": "swag~jun" }, - { - "version": "1.0.0", - "name": "Notify", - "type": "component", - "cName": "消息通知", - "desc": "在页面顶部展示消息提示", - "sort": 8, - "show": false, - "author": "vickyYE" - }, { "version": "1.0.0", "name": "CircleProgress", @@ -292,16 +282,6 @@ "show": true, "desc": "弹出层容器，用于展示弹窗、信息提示等内容，支持多个弹出层叠加展示", "author": "szg2008" - }, - { - "version": "1.0.0", - "name": "NoticeBar", - "type": "component", - "cName": "通告栏", - "desc": "用于循环播放展示一组消息通知。", - "sort": 11, - "show": true, - "author": "vickyYe" } ] }, diff --git a/src/packages/noticebar/demo.tsx b/src/packages/noticebar/demo.tsx deleted file mode 100644 index 337c28e8559a3dc753f905131a2322e81ece037b..0000000000000000000000000000000000000000 --- a/src/packages/noticebar/demo.tsx +++ /dev/null @@ -1,122 +0,0 @@ -import React from 'react' -import { NoticeBar } from './noticebar' -import Icon from '../icon' - -const NoticeBarDemo = () => { - const horseLamp1 = ['惊喜红包免费领', '爆款准点秒', '买超值优惠', '赢百万京豆'], - horseLamp2 = ['惊喜红包免费领', '爆款准点秒', '买超值优惠', '赢百万京豆'], - horseLamp3 = ['惊喜红包免费领1', '爆款准点秒2', '买超值优惠3', '赢百万京豆4'], - horseLamp4 = ['惊喜红包免费领', '爆款准点秒', '买超值优惠', '赢百万京豆'], - text = - '华为畅享9新品即将上市，活动期间0元预约可参与抽奖，赢HUAWEI WATCH等好礼，更多产品信息请持续关注！' - - const demoStyles: React.CSSProperties = { - padding: '0 10px', - background: 'rgba(251, 248, 220, 1)', - color: '#d9500b', - } - - const hello = () => { - console.log('hello world') - } - const go = (item: any) => { - console.log(item) - } - - return ( - <> -
-

基础用法

- - -

禁用滚动

- - -

通告栏模式--关闭模式

- - 华为畅享9新品即将上市，活动期间0元预约可参与抽奖，赢HUAWEI - WATCH等好礼，更多产品信息请持续关注！ - - -

通告栏模式--链接模式

- - 京东商城 - - -

纵向滚动

-
- { - go(item) - }} - closeMode={true} - background={`rgba(251, 248, 220, 1)`} - color={`#D9500B`} - > -
- -

纵向复杂滚动动画

-
- -
- -

纵向自定义滚动内容

-
- - {horseLamp3.map((item, index) => { - return ( -
- {item} -
- ) - })} - -
- -

纵向自定义右侧图标

-
- } - > -
-
- - ) -} - -export default NoticeBarDemo diff --git a/src/packages/noticebar/doc.md b/src/packages/noticebar/doc.md deleted file mode 100644 index 55dba24e66c58471d3bd7fda0cf02d281163985d..0000000000000000000000000000000000000000 --- a/src/packages/noticebar/doc.md +++ /dev/null @@ -1,182 +0,0 @@ -# NoticeBar通告栏 - -### 介绍 - -用于循环播放展示一组消息通知。 - -### 安装 - -```javascript -import { NoticeBar } from '@nutui/nutui-react'; -``` - -## 代码演示 - -### 基本用法 - -```tsx - -``` -```javascript -const text = '华为畅享9新品即将上市，活动期间0元预约可参与抽奖，赢HUAWEI WATCH等好礼，更多产品信息请持续关注！' -``` - -### 禁用滚动 -文字内容多于一行时，可通过scrollable参数控制是否开启滚动 -```tsx - -``` - -### 通告栏模式--关闭模式 -```tsx - - 华为畅享9新品即将上市，活动期间0元预约可参与抽奖，赢HUAWEI - WATCH等好礼，更多产品信息请持续关注！ - -``` -```javascript -const hello = () => { - console.log('hello world') - } -``` - -### 通告栏模式--链接模式 -```tsx - - 京东商城 - -``` - - -### 纵向滚动 - -```tsx - { - go(item) - }} - closeMode={true} - background={`rgba(251, 248, 220, 1)`} - color={`#D9500B`} - > -``` -```javascript - -const horseLamp1 = ['惊喜红包免费领', '爆款准点秒', '买超值优惠', '赢百万京豆'], - -const go = (item: any) => { - console.log(item) -} -``` - - -### 复杂滚动动画 - -```tsx - -``` -```javascript -const horseLamp2 = ['惊喜红包免费领', '爆款准点秒', '买超值优惠', '赢百万京豆'], - -} -``` - -### 自定义滚动内容 - -```tsx - - {horseLamp3.map((item, index) => { - return ( -
- {item} -
- ) - })} - -``` -```javascript -const horseLamp3 = ['惊喜红包免费领1', '爆款准点秒2', '买超值优惠3', '赢百万京豆4'] -} -``` - - -### 纵向自定义右侧图标 - -```tsx - } -> -``` -```javascript -const horseLamp4 = ['惊喜红包免费领', '爆款准点秒', '买超值优惠', '赢百万京豆'] -``` - - -## API - -### Prop - -| 字段 | 说明 | 类型 | 默认值 | -| ---------- | ---------------------------------------------------------- | ------------- | ------ | -| direction | 滚动的方向，可选 across、vertical | String | across | -| text | 提示的信息 | String | 空 | -| closeMode | 是否启用关闭模式 | Boolean | false | -| leftIcon | close为没有左边icon,其他为自定义的图片链接，没有为默认图片 | String | 空 | -| color | 导航栏的文字颜色 | String | 空 | -| background | 导航栏的背景颜色 | String | 空 | -| delay | 延时多少秒 | String/Number | 1 | -| scrollable | 是否可以滚动 | Boolean | true | -| speed | 滚动速率 (px/s) | Number | 50 | - -### Prop（direction=vertical） - -| 参数 | 说明 | 类型 | 默认值 | -|--------------|----------------------------------|--------|------------------| -| list | 纵向滚动数据列表 | Array | [] | -| speed | 滚动的速度 | Number | 50 | -| standTime | 停留时间(毫秒) | Number | 1000 | -| complexAm | 稍复杂的动画，耗能会高 | Boolean | false | -| height | 每一个滚动列的高度(px)，注意：在使用 slot 插槽定义滚动单元时，按照实际高度修改此值 | Number | 40 | -| closeMode | 是否启用右侧关闭图标，可以通过slot[name=rightIcon]自定义图标 | Boolean | false | - -### Event - -| 字段 | 说明 | 回调参数 | -| ----- | ---------------- | ------------ | -| click | 外层点击事件回调 | event: Event | -| close | 关闭通知栏时触发 | event: Event | diff --git a/src/packages/noticebar/index.ts b/src/packages/noticebar/index.ts deleted file mode 100644 index 3ed226400b425016ce73962699df2fa2ace4eb28..0000000000000000000000000000000000000000 --- a/src/packages/noticebar/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -import { NoticeBar } from './noticebar' -export default NoticeBar diff --git a/src/packages/noticebar/noticebar.scss b/src/packages/noticebar/noticebar.scss deleted file mode 100644 index 64c1d1030a93c4ca6bfd67b1b230eee8c7e23b63..0000000000000000000000000000000000000000 --- a/src/packages/noticebar/noticebar.scss +++ /dev/null @@ -1,111 +0,0 @@ -.nut-noticebar { - .nut-noticebar-page { - width: 100%; - display: flex; - height: $noticeBar-height; - font-size: $noticeBar-font-size; - position: relative; - align-items: center; - &.wrapable { - height: auto; - padding: 8px 16px; - .wrap { - height: auto; - .content { - position: relative; - white-space: normal; - word-wrap: break-word; - } - } - } - - .withicon { - position: relative; - padding-right: 40px; - } - .left-icon { - height: $noticeBar-left-icon-width; - min-width: $noticeBar-left-icon-width; - margin: 0 5px 0 10px; - background-size: 100% 100%; - } - .right-icon { - display: flex; - align-items: center; - justify-content: center; - width: $noticeBar-right-icon-width; - margin: 0 10px 0 5px; - } - .wrap { - flex: 1; - height: $noticeBar-line-height; - line-height: $noticeBar-line-height; - overflow: hidden; - position: relative; - } - .content { - position: absolute; - white-space: nowrap; - &.nut-ellipsis { - max-width: 100%; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - } - // 只跑一次 - .play { - animation: nut-notice-bar-play linear both running; - } - .play-infinite { - animation: nut-notice-bar-play-infinite linear infinite both running; - } - .play-vertical { - animation: nut-notice-bar-play-vertical linear infinite both running; - } - } - - @keyframes nut-notice-bar-play { - to { - transform: translate3d(-100%, 0, 0); - } - } - - @keyframes nut-notice-bar-play-infinite { - to { - transform: translate3d(-100%, 0, 0); - } - } - // 垂直方向的滚动 - @keyframes nut-notice-bar-play-vertical { - to { - transform: translateY($noticeBar-height); - } - } - - // 纵向 - .nut-noticebar-vertical { - position: relative; - display: flex; - justify-content: space-between; - height: $noticeBar-height; - font-size: $noticeBar-font-size; - overflow: hidden; - - .horseLamp_list { - margin: 0; - padding: 0; - display: block; - flex: 1; - .horseLamp_list_item { - display: flex; - align-items: center; - height: $noticeBar-height; - } - } - - .go { - align-self: center; - } - } -} diff --git a/src/packages/noticebar/noticebar.tsx b/src/packages/noticebar/noticebar.tsx deleted file mode 100644 index 03ee8cd8d285060ef17b7209d997b489fc4680a7..0000000000000000000000000000000000000000 --- a/src/packages/noticebar/noticebar.tsx +++ /dev/null @@ -1,342 +0,0 @@ -import React, { - useState, - useEffect, - useRef, - FunctionComponent, - useImperativeHandle, - MouseEvent, - CSSProperties, -} from 'react' -import './noticebar.scss' -import { number } from 'prop-types' -import Icon from '../icon' -import bem from '@/utils/bem' -import classNames from 'classnames' - -export interface NoticeBarProps { - // 滚动方向 across 横向 vertical 纵向 - direction: string - className?: string - style?: CSSProperties - list: any - standTime: number - complexAm: boolean - height: number - text: string - closeMode: boolean - wrapable: boolean - leftIcon: string - color: string - background: string - delay: string | number - scrollable: boolean - speed: number - rightIcon?: HTMLElement | any - close?: (list?: any) => void - click?: (item?: any) => void -} -const defaultProps = { - // 滚动方向 across 横向 vertical 纵向 - direction: 'across', - list: [], - standTime: 1000, - complexAm: false, - height: 40, - text: '', - closeMode: false, - wrapable: false, - leftIcon: '', - color: '', - background: '', - delay: 1, - scrollable: true, - speed: 50, -} as NoticeBarProps -export const NoticeBar: FunctionComponent< - Partial & React.HTMLAttributes -> = (props) => { - const { - children, - className, - style, - direction, - list, - standTime, - complexAm, - height, - text, - closeMode, - wrapable, - leftIcon, - color, - background, - delay, - scrollable, - speed, - rightIcon, - close, - click, - } = { ...defaultProps, ...props } - - const wrap = useRef(null) - const content = useRef(null) - // const [scrollList,SetScrollList] = useState([]) - const [showNoticeBar, SetShowNoticeBar] = useState(true) - let scrollList: any = useRef([]) - const [wrapWidth, SetWrapWidth] = useState(0) - const [firstRound, SetFirstRound] = useState(true) - const [duration, SetDuration] = useState(0) - const [offsetWidth, SetOffsetW] = useState(0) - const [animationClass, SetAnimationClass] = useState('') - const [animate, SetAnimate] = useState(false) - const [distance, SetDistance] = useState(0) - const [timer, SetTimer] = useState(0) - - const [index, setIndex] = useState(0) - - useEffect(() => { - if (direction == 'vertical') { - if (children) { - let arr: any = [] - React.Children.map(children, (child) => { - arr.push((child as any).props.children) - }) - // SetScrollList([].concat(arr)) - scrollList.current = [].concat(arr) - } else { - // SetScrollList([].concat(list)) - scrollList.current = [].concat(list) - } - setTimeout(() => { - complexAm ? startRoll() : startRollEasy() - }, Number(standTime)) - } else { - initScrollWrap(text) - } - return () => { - clearInterval(timer) - } - }, []) - - const cloneChild = (listItem: any, listIndex: any) => { - return React.Children.map(children, function (child: any, index) { - if (child && index == listIndex) { - return React.cloneElement(child, { - key: listIndex, - children: listItem, - }) - } - }) - } - - useEffect(() => { - initScrollWrap(text) - }, [text]) - - useEffect(() => { - if (list && list.length) { - scrollList.current = [].concat(list) - } - }, [list]) - - const initScrollWrap = (value: string) => { - if (showNoticeBar == false) { - return - } - setTimeout(() => { - if (!wrap.current || !content.current) { - return - } - const wrapW = wrap.current.getBoundingClientRect().width - const offsetW = content.current.getBoundingClientRect().width - - if (scrollable && offsetW > wrapW) { - SetWrapWidth(wrapW) - SetOffsetW(offsetW) - SetDuration(offsetW / speed) - SetAnimationClass('play') - } else { - SetAnimationClass('') - } - }) - } - const handleClick = (event: MouseEvent) => { - click && click(event) - } - - const onClickIcon = (event: MouseEvent) => { - event.stopPropagation() - SetShowNoticeBar(!closeMode) - close && close(event) - } - - const onAnimationEnd = () => { - SetFirstRound(false) - setTimeout(() => { - SetDuration((offsetWidth + wrapWidth) / speed) - SetAnimationClass('play-infinite') - }, 0) - } - - /** - * 利益点滚动方式一 - */ - const startRollEasy = () => { - showhorseLamp() - let timerCurr = window.setInterval( - showhorseLamp, - ~~(height / speed / 4) * 1000 + Number(standTime) - ) - SetTimer(timerCurr) - } - const showhorseLamp = () => { - SetAnimate(true) - setTimeout(() => { - scrollList.current.push(scrollList.current[0]) - scrollList.current.shift() - SetAnimate(false) - }, ~~(height / speed / 4) * 1000) - } - - const startRoll = () => { - let timerCurr = setInterval(() => { - let chunk = 100 - for (let i = 0; i < chunk; i++) { - scroll(i, i < chunk - 1 ? false : true) - } - }, Number(standTime) + 100 * speed) - SetTimer(timerCurr) - } - const scroll = (n: number, last: boolean) => { - SetAnimate(true) - setTimeout(() => { - let long = distance - long -= height / 100 - SetDistance(long) - if (last) { - scrollList.current.push(scrollList.current[0]) - scrollList.current.shift() - SetDistance(0) - SetAnimate(false) - } - }, n * speed) - } - /** - * 点击滚动单元 - */ - const go = (item: any) => { - click && click(item) - } - - const handleClickIcon = () => { - close && close(scrollList[0]) - } - - const iconShow = () => { - if (leftIcon == 'close') { - return false - } else { - return true - } - } - - const contentStyle = { - paddingLeft: firstRound ? 0 : wrapWidth + 'px', - animationDelay: (firstRound ? props.delay : 0) + 's', - animationDuration: duration + 's', - } - - const barStyle = { - color: color, - background: background, - height: direction == 'vertical' ? `${height}px` : '', - } - - const horseLampStyle = { - transform: complexAm ? `translateY(${distance}px)` : '', - transition: animate ? `all ${~~(height / speed / 4)}s` : '', - marginTop: animate ? `-${height}px` : '', - } - - const b = bem('noticebar') - const noticebarClass = classNames({ - 'nut-noticebar-page': true, - withicon: closeMode, - close: closeMode, - wrapable: wrapable, - }) - - return ( -
- {showNoticeBar && direction == 'across' ? ( -
-
- {!leftIcon ? : null} -
-
-
- {children} - {text} -
-
- {closeMode ? ( -
- -
- ) : null} -
- ) : scrollList.current.length > 0 && direction == 'vertical' ? ( -
- {children ? ( -
-   - {scrollList.current.map((item: any, index: any) => { - return cloneChild(item, index) - })} -
- ) : ( -
    - {scrollList.current.map((item: any, index: any) => { - return ( -
  • { - go(item) - }} - > - {item} -
    • - ) - })} -
- )} -
{ - handleClickIcon() - }} - > - {rightIcon ? ( - rightIcon - ) : closeMode ? ( - - ) : null} -
-
- ) : null} -
- ) -} - -NoticeBar.defaultProps = defaultProps -NoticeBar.displayName = 'NutNoticeBar' diff --git a/src/packages/notify/demo.tsx b/src/packages/notify/demo.tsx deleted file mode 100644 index e76fb2ff28fe02558dae8ed22cdefcecda3cf42c..0000000000000000000000000000000000000000 --- a/src/packages/notify/demo.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react' -import { Notify } from './notify' - -const NotifyDemo = () => { - return ( - <> -
-

基础用法

- -
- - ) -} - -export default NotifyDemo diff --git a/src/packages/notify/doc.md b/src/packages/notify/doc.md deleted file mode 100644 index 0aad0404591bca7ba16e96dec0c974351db09953..0000000000000000000000000000000000000000 --- a/src/packages/notify/doc.md +++ /dev/null @@ -1,33 +0,0 @@ -# Notify组件 - -### 介绍 - -基于 xxxxxxx - -### 安装 - - - -## 代码演示 - -### 基础用法1 - - - -## API - -### Props - -| 参数 | 说明 | 类型 | 默认值 | -|--------------|----------------------------------|--------|------------------| -| name | 图标名称或图片链接 | String | - | -| color | 图标颜色 | String | - | -| size | 图标大小，如 '20px' '2em' '2rem' | String | - | -| class-prefix | 类名前缀，用于使用自定义图标 | String | 'nutui-iconfont' | -| tag | HTML 标签 | String | 'i' | - -### Events - -| 事件名 | 说明 | 回调参数 | -|--------|----------------|--------------| -| click | 点击图标时触发 | event: Event | diff --git a/src/packages/notify/index.ts b/src/packages/notify/index.ts deleted file mode 100644 index 0f232475cdceb3c23286221631104027821546f4..0000000000000000000000000000000000000000 --- a/src/packages/notify/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -import { Notify } from './notify' -export default Notify diff --git a/src/packages/notify/notify.scss b/src/packages/notify/notify.scss deleted file mode 100644 index 4da3cd9d3ad9238b61b6893ada2e4e41a309905d..0000000000000000000000000000000000000000 --- a/src/packages/notify/notify.scss +++ /dev/null @@ -1,2 +0,0 @@ -.nut-notify { -} diff --git a/src/packages/notify/notify.tsx b/src/packages/notify/notify.tsx deleted file mode 100644 index f88afabc2f5f547b6ac2c150df5809e0080b07c9..0000000000000000000000000000000000000000 --- a/src/packages/notify/notify.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import React, { FunctionComponent, useEffect, useState } from 'react' -import './notify.scss' - -export interface NotifyProps { - id: string - color: string - msg: string - duration: number - className: string - background: string - type: string - visible: boolean - onClick: () => void - onClose: () => void - unmount: () => void -} -const defaultProps = { - color: '', - msg: '', - duration: 3000, - className: '', - background: '', - type: 'danger', - visible: false, -} as NotifyProps -export const Notify: FunctionComponent< - Partial & React.HTMLAttributes -> = (props) => { - const { children, id, color, msg, duration, className, background, type, visible } = { - ...defaultProps, - ...props, - } - - let timer: null | number = null - useEffect(() => {}, []) - return
{children ? children : msg}
-} - -Notify.defaultProps = defaultProps -Notify.displayName = 'NutNotify'