diff --git a/.eslintignore b/.eslintignore index f6ea6074c8..375f1db78a 100644 --- a/.eslintignore +++ b/.eslintignore @@ -12,4 +12,4 @@ script/test/cypress _site temp* static/ -src/_common +packages/common diff --git a/.eslintrc.js b/.eslintrc.js index b86c9c3283..c96cf4fd54 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -27,7 +27,7 @@ module.exports = { }, }, rules: { - "no-use-before-define": "off", + 'no-use-before-define': 'off', '@typescript-eslint/explicit-module-boundary-types': 'off', '@typescript-eslint/ban-types': 'off', '@typescript-eslint/explicit-function-return-type': 'off', @@ -72,5 +72,16 @@ module.exports = { 'func-names': 'off', 'consistent-return': 'off', 'default-case': 'off', + 'no-restricted-imports': [ + 'error', + { + paths: [ + { + name: 'lodash', + message: 'Please use lodash-es instead.', + }, + ], + }, + ], }, }; diff --git a/.gitignore b/.gitignore index 030771c223..48760265e9 100644 --- a/.gitignore +++ b/.gitignore @@ -26,4 +26,4 @@ cypress-coverage instrumented cy-report .history -src/**/_example-js/ \ No newline at end of file +packages/components/**/_example-js/ \ No newline at end of file diff --git a/.gitmodules b/.gitmodules index d0faca056e..bd2d737bd8 100644 --- a/.gitmodules +++ b/.gitmodules @@ -1,3 +1,3 @@ -[submodule "src/_common"] - path = src/_common +[submodule "packages/common"] + path = packages/common url = https://github.com/Tencent/tdesign-common.git diff --git a/CHANGELOG.md b/CHANGELOG.md index c57c2720de..be2681486c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,99 @@ toc: false spline: explain --- +## 🌈 1.11.1 `2025-02-28` +### 🚀 Features +- `Layout`: 子组件 `Content` 新增 `content` API @liweijie0812 ([#3384](https://github.com/Tencent/tdesign-react/pull/3384)) +### 🐞 Bug Fixes +- `reactRender`: fix `React19` `reactRender` error @HaixingOoO ([#3380](https://github.com/Tencent/tdesign-react/pull/3380)) +- `table`: 修复虚拟滚动下的footer渲染问题 @huangchen1031 ([#3383](https://github.com/Tencent/tdesign-react/pull/3383)) +- `fix`: 修复`1.11.0` cjs 产物的异常 @uyarn ([#3392](https://github.com/Tencent/tdesign-react/pull/3392)) +### 📝 Documentation +- `ConfigProvider`: 增加 `globalConfig` API文档 @liweijie0812 ([#3384](https://github.com/Tencent/tdesign-react/pull/3384)) + +## 🌈 1.11.0 `2025-02-20` +### 🚀 Features +- `Cascader`: 新增支持在打开菜单时,自动滚动到首个已选项所在节点的能力 @uyarn ([#3357](https://github.com/Tencent/tdesign-react/pull/3357)) +- `DatePicker`: 调整组件禁用日期`before`和`after`参数的逻辑,调整为禁用`before`定义之前和`after`定义之后的日期选择,此前有使用相关 API 请注意此改动 @lifeiFront ([#3362](https://github.com/Tencent/tdesign-react/pull/3362)) +- `List`: 新增 `scroll` API,用于大数据量下支持开启虚拟滚动 @HaixingOoO ([#3363](https://github.com/Tencent/tdesign-react/pull/3363)) +- `Menu`: 菜单新增折叠收起的动画效果 @hd10180 ([#3342](https://github.com/Tencent/tdesign-react/pull/3342)) +- `TagInput`: 新增 `maxRows` API,用于设置最大展示行数 @Shabi-x ([#3293](https://github.com/Tencent/tdesign-react/pull/3293)) + +### 🐞 Bug Fixes +- `Card`: 修复 React 19 中的告警问题 @HaixingOoO ([#3369](https://github.com/Tencent/tdesign-react/pull/3369)) +- `Cascader`: 修复多选动态加载使用异常的问题 @uyarn ([#3376](https://github.com/Tencent/tdesign-react/pull/3376)) +- `CheckboxGroup`: 修复 `onChange` 的 `context` 参数缺少`option`的问题 @HaixingOoO ([#3349](https://github.com/Tencent/tdesign-react/pull/3349)) +- `DatePicker`: 修复日期选择在负数时区的异常问题 @lifeiFront ([#3362](https://github.com/Tencent/tdesign-react/pull/3362)) +- `Dropdown`: 修复点击事件回调context参数返回不符合文档描述的问题 @uyarn ([#3372](https://github.com/Tencent/tdesign-react/pull/3372)) +- `Radio`: 修复 `RadioGroup` 在 React 19 版本下异常的问题 @HaixingOoO ([#3364](https://github.com/Tencent/tdesign-react/pull/3364)) +- `Tabs`: 修复可滑动`Tabs`配合`action`使用的样式问题 @Wesley-0808([#3343](https://github.com/Tencent/tdesign-react/pull/3343)) +- `Table`: 修复配合`Tabs`使用,切换 tab 时,Table 的 footer 不显示的问题 @wonkzhang ([#3370](https://github.com/Tencent/tdesign-react/pull/3370)) +- `Textarea`: 修复使用 `autofocus` API 且 `value` 有值时,光标没有跟随内容末尾的问题 @HaixingOoO ([#3358](https://github.com/Tencent/tdesign-react/pull/3358)) +- `Transfer`: 修复 `TransferItem` 无效的问题 @HaixingOoO ([#3339](https://github.com/Tencent/tdesign-react/pull/3339)) + + +### 🚧 Others +- 调整组件依赖 `lodash` 依赖为`lodash-es` @zhangpaopao0609 ([#3345](https://github.com/Tencent/tdesign-react/pull/3345)) + +## 🌈 1.10.5 `2025-01-16` +### 🚀 Features +- `Radio`: `RadioGroup` 新增 `theme` API,用于决定使用 options 时渲染的子组件样式 @HaixingOoO ([#3303](https://github.com/Tencent/tdesign-react/pull/3303)) +- `Upload`: 新增`imageProps` API,用于在上传图片场景下透传 `Image` 组件的相关属性 @HaixingOoO ([#3317](https://github.com/Tencent/tdesign-react/pull/3317)) +- `AutoComplete`: 新增 `empty` API ,用于支持自定义空节点内容 @liweijie0812 ([#3319](https://github.com/Tencent/tdesign-react/pull/3319)) +- `drawer`: `sizeDraggable`新增支持`SizeDragLimit`类型的功能实现 @huangchen1031 ([#3323](https://github.com/Tencent/tdesign-react/pull/3323)) +- `Icon`: 新增`logo-alipay`、`logo-behance-filled`等图标,修改`logo-wecom`图标,移除不合理的`logo-wecom-filled`图标 @uyarn ([#3326](https://github.com/Tencent/tdesign-react/pull/3326)) +### 🐞 Bug Fixes +- `Select`: 修复`onChange`回调 `context` 中的全部选项的值没有包含选项本身全部内容的问题 @uyarn ([#3305](https://github.com/Tencent/tdesign-react/pull/3305)) +- `DateRangePicker`: 开始结束值同时存在的逻辑判断错误问题 @betavs ([#3301](https://github.com/Tencent/tdesign-react/pull/3301)) +- `Notification`: 修复使用`attach`属性配置导致渲染节点异常的问题 @centuryPark ([#3306](https://github.com/Tencent/tdesign-react/pull/3306)) +- `AutoComplete`: 修复当选项为空时显示效果异常的问题 @betavs ([#3316](https://github.com/Tencent/tdesign-react/pull/3316)) +- `Menu`: 修复 `head-menu` 不渲染 `icon` 的问题 @HaixingOoO ([#3320](https://github.com/Tencent/tdesign-react/pull/3320)) +- `Statistic`: 修复`decimalPlaces=0`时数值动画期间精度错误的问题 @huangchen1031 ([#3327](https://github.com/Tencent/tdesign-react/pull/3327)) +- `ImageVewer`: 修复开启`closeOnOverlay`时,点击蒙层关闭存在闪烁情况的问题 @huangchen1031 + + +## 🌈 1.10.4 `2024-12-25` +### 🚀 Features +- `Tree`: 支持 `onScroll` API,用于处理滚动事件回调 @HaixingOoO ([#3295](https://github.com/Tencent/tdesign-react/pull/3295)) +- `Tooltip`: tooltip-lite 的`mouse` 模式下优化为完全跟随鼠标位置,更符合 API 描述 @moecasts ([#3267](https://github.com/Tencent/tdesign-react/pull/3267)) +### 🐞 Bug Fixes +- `Select`: 修复全选默认返回值错误的问题 @uyarn ([#3298](https://github.com/Tencent/tdesign-react/pull/3298)) +- `Upload`: 优化部分尺寸上传组件图片展示的样式问题 @huangchen1031 ([#3290](https://github.com/Tencent/tdesign-react/pull/3290)) +### 📝 Documentation +- `Stackblitz`: 调整`Stackblitz`示例的启动方式,并修复部分示例无法使用`stackblitz`或`codesandbox`运行的问题 @uyarn ([#3297](https://github.com/Tencent/tdesign-react/pull/3297)) + + + +## 🌈 1.10.2 `2024-12-19` + +### 🚀 Features + +- `Alert`: 在 `maxLine >= message` 数组长度的情况下,不再展示 `展开更多/收起` 的按钮 @miownag ([#3281](https://github.com/Tencent/tdesign-react/pull/3281)) +- `ConfigProvider`: `attach` 属性支持配置 `drawer` 组件,支持全局配置`drawer`的挂载位置 @HaixingOoO ([#3272](https://github.com/Tencent/tdesign-react/pull/3272)) +- `DatePicker`: 多选模式支持周选择和年选择的场景 @HaixingOoO @uyarn ([#3264](https://github.com/Tencent/tdesign-react/pull/3264)) +- `Form`: 新增`supportNumberKey` API,支持在`1.9.3`版本后不支持数字键值的场景使用,若不需要支持数字类型作为表单键值请关闭此 API @uyarn ([#3277](https://github.com/Tencent/tdesign-react/pull/3277)) +- `Radio`: 新增 `Radio` 及 `RadioGroup` 的 `reaonly`属性的支持 @liweijie0812 ([#3280](https://github.com/Tencent/tdesign-react/pull/3280)) +- `Tree`: 实例新增 `setIndeterminate` 方法,支持手动设置半选的功能 @uyarn ([#3261](https://github.com/Tencent/tdesign-react/pull/3261)) +- `label`: `DatePicker`、`TimePicker`、`RangeInput`支持`label` API @liweijie0812 ([#3276](https://github.com/Tencent/tdesign-react/pull/3276)) + +### 🐞 Bug Fixes + +- `DateRangePicker`: 修复日期区间选择器在跨年的场景下的展示异常问题 @huangchen1031 ([#3275](https://github.com/Tencent/tdesign-react/pull/3275)) +- `Menu`: 优化菜单项点击事件的绑定问题避免边界触发异常的问题 @huangchen1031 ([#3241](https://github.com/Tencent/tdesign-react/pull/3241)) +- `ImageViewer`: 修复不受控时,`visable`改变时都会触发`onClose`的问题 @HaixingOoO ([#3244](https://github.com/Tencent/tdesign-react/pull/3244)) +- `CheckboxGroup`: 修复复选框组的子元素不是复选框导致的问题 @HaixingOoO ([#3253](https://github.com/Tencent/tdesign-react/pull/3253)) +- `Form`: 修复`1.9.3`版本后,多级表单字段使用 `setFieldValues` 功能异常的问题 @l123wx ([#3279](https://github.com/Tencent/tdesign-react/pull/3279)) +- `Form`: 修复当规则为中涉及 `0` 判断时,验证不生效的问题 @RSS1102 ([#3283](https://github.com/Tencent/tdesign-react/pull/3283)) +- `Select`: 修复 `valueType` 为 `object`选中全选的展示异常及回调参数缺少的问题 @uyarn ([#3287](https://github.com/Tencent/tdesign-react/pull/3287)) +- `SelectInput`: 修复没有 `label` 都会渲染节点导致垂直对齐的问题 @huangchen1031 ([#3278](https://github.com/Tencent/tdesign-react/pull/3278)) +- `TextArea`: 优化 `TextArea` 初始化时 `autosize` 下计算高度的逻辑 @HaixingOoO ([#3286](https://github.com/Tencent/tdesign-react/pull/3286)) + +### 🚧 Others +- `Alert`: 优化测试用例代码类型和添加对于 `className`、`style` 的测试 @RSS1102 ([#3284](https://github.com/Tencent/tdesign-react/pull/3284)) + + + + ## 🌈 1.10.1 `2024-11-28` ### 🚀 Features - `DatePicker`: 新增`multiple` API,用于支持日期选择器多选功能,具体使用请参考示例 @HaixingOoO ([#3199](https://github.com/Tencent/tdesign-react/pull/3199)) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 5d28eead11..2f6acd13f1 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -88,7 +88,7 @@ npm run start ## 子仓库 tdesign-common -TDesign 的项目都会以子仓库的形式引入 `tdesign-common` 公共仓库,对应 `src/\_common` 文件夹, +TDesign 的项目都会以子仓库的形式引入 `tdesign-common` 公共仓库,对应 `packages/common` 文件夹, 公共仓库中包含 - 部分组件的一些框架无关的公共的工具函数 @@ -101,12 +101,18 @@ TDesign 的项目都会以子仓库的形式引入 `tdesign-common` 公共仓库 - 如开发部分提到的,初次克隆代码后需要初始化子仓库: `git submodule init && git submodule update` - git submodule update 之后子仓库不指向任何分支,只是一个指向某一个提交的游离状态 -### 子仓库开发 +### 涉及子仓库的开发 -子仓库组件分支从 `develop checkout` 示例:`feature/button`,提交代码时先进入子仓库完成提交,然在回到主仓库完成提交 +1. Fork 并克隆子仓库 https://github.com/Tencent/tdesign-common +2. 新建分支,并进行开发 +3. 提交子仓库的 PR,等待代码合入 +4. 如果仅涉及子仓库改动,项目维护方会通过评论触发 CI,自动更新主仓库的子仓库指向; -- 先进入 `src/\_common` 文件夹,正常将样式修改添加提交 -- 回到主仓库,此时应该会看到 `src/\_common` 文件夹是修改状态,按照正常步骤添加提交即可 + 如果需要配合子仓库改动,需要在步骤 3 完成后,在主仓库的开发过程中,将子仓库的指向改为合并后的主干的 commit id,主仓库代码开发完后正常提交发起 PR 即可 + + ```bash + git submodule update --init --remote + ``` ### 组件库 UI diff --git a/DEVELOP_GUIDE.md b/DEVELOP_GUIDE.md index 90d5774316..21b986f8ee 100644 --- a/DEVELOP_GUIDE.md +++ b/DEVELOP_GUIDE.md @@ -4,7 +4,7 @@ tdesign-react 包含 web-react 代码和一个子仓库,子仓库指向 [tdesi ## 公共子仓库 tdesign-common -本项目以子仓库的形式引入 tdesign-common 公共仓库,对应 src/\_common 文件夹 +本项目以子仓库的形式引入 tdesign-common 公共仓库,对应 packages/common 文件夹 公共仓库中包含 - 一些公共的工具函数 @@ -50,7 +50,7 @@ UI 开发规范参考子仓库 README [子仓库 README](https://github.com/Tenc ### API 规范 -[API](./src/_common/api.md) +[API](./packages/common/api.md) ### 前缀 @@ -157,7 +157,7 @@ npm run init button ### 组件 Demo 演示配置 -为了保证与 vue 等其他仓库演示文档内容统一,目前将公共基础演示 demo 与说明归档在 `src/_common/docs/web/api/[组件].md` 中,其中需要各个技术栈的组件提供文档里面所要求的基础 demo 文件否则会编译警告。 +为了保证与 vue 等其他仓库演示文档内容统一,目前将公共基础演示 demo 与说明归档在 `packages/common/docs/web/api/[组件].md` 中,其中需要各个技术栈的组件提供文档里面所要求的基础 demo 文件否则会编译警告。 例如 `tooltip` 组件则需要 `_expample` 文件夹中包含有 `arrow.jsx`、 `noArrow.jsx` 文件 diff --git a/package.json b/package.json index 0279e72c62..e1d3abd5ce 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "tdesign-react", "purename": "tdesign", - "version": "1.10.1", + "version": "1.11.1", "description": "TDesign Component for React", "title": "tdesign-react", "main": "lib/index.js", @@ -42,12 +42,12 @@ "site:preview": "npm run build:jsx-demo && cd site && vite build --mode preview", "postsite:preview": "cp _site/index.html _site/404.html", "lint": "npm run lint:tsc && eslint --ext .ts,.tsx ./ --max-warnings 0", - "lint:fix": "eslint --ext .ts,.tsx ./src --ignore-pattern src/__tests__ --max-warnings 0 --fix", + "lint:fix": "eslint --ext .ts,.tsx ./packages/components --ignore-pattern packages/components/__tests__ --max-warnings 0 --fix", "lint:tsc": "tsc -p ./tsconfig.dev.json ", "generate:usage": "node script/generate-usage/index.js", "generate:coverage-badge": "npm run test:coverage && node script/generate-coverage.js", - "generate:jsx-demo": "npx babel src/**/_example --extensions '.tsx' --config-file ./babel.config.demo.js --relative --out-dir ../_example-js --out-file-extension=.jsx", - "format:jsx-demo": "npx eslint src/**/_example-js/*.jsx --fix && npx prettier --write src/**/_example-js/*.jsx", + "generate:jsx-demo": "npx babel packages/components/**/_example --extensions '.tsx' --config-file ./babel.config.demo.js --relative --out-dir ../_example-js --out-file-extension=.jsx", + "format:jsx-demo": "npx eslint packages/components/**/_example-js/*.jsx --fix && npx prettier --write packages/components/**/_example-js/*.jsx", "test": "vitest run && npm run test:snap", "test:ui": "vitest --ui", "test:snap": "cross-env NODE_ENV=test-snap vitest run", @@ -121,7 +121,7 @@ "@testing-library/user-event": "^14.4.3", "@types/estree": "1.0.6", "@types/hoist-non-react-statics": "^3.3.1", - "@types/lodash": "4.17.13", + "@types/lodash-es": "^4.17.12", "@types/node": "^22.7.0", "@types/raf": "^3.4.0", "@types/react": "~18.2.0", @@ -185,7 +185,7 @@ "rollup-plugin-typescript2": "^0.31.2", "semver": "^7.6.3", "start-server-and-test": "^1.14.0", - "tdesign-icons-view": "^0.3.0", + "tdesign-icons-view": "^0.3.4", "tdesign-publish-cli": "^0.0.12", "tdesign-site-components": "^0.15.3", "tdesign-theme-generator": "^1.0.0", @@ -200,7 +200,7 @@ "workbox-precaching": "^7.0.0" }, "dependencies": { - "@babel/runtime": "~7.24.7", + "@babel/runtime": "~7.26.7", "@popperjs/core": "~2.11.2", "@types/sortablejs": "^1.10.7", "@types/tinycolor2": "^1.4.3", @@ -208,14 +208,14 @@ "classnames": "~2.5.1", "dayjs": "1.11.10", "hoist-non-react-statics": "~3.3.2", - "lodash": "~4.17.15", + "lodash-es": "^4.17.21", "mitt": "^3.0.0", "raf": "~3.4.1", "react-is": "^18.2.0", "react-popper": "~2.3.0", "react-transition-group": "~4.4.1", "sortablejs": "^1.15.0", - "tdesign-icons-react": "^0.3.4", + "tdesign-icons-react": "^0.4.3", "tinycolor2": "^1.4.2", "tslib": "~2.3.1", "validator": "~13.7.0" diff --git a/packages/common b/packages/common new file mode 160000 index 0000000000..f15c0ca618 --- /dev/null +++ b/packages/common @@ -0,0 +1 @@ +Subproject commit f15c0ca618d655b93fb21ac2115cbe691bd31596 diff --git a/src/_util/callBoth.ts b/packages/components/_util/callBoth.ts similarity index 100% rename from src/_util/callBoth.ts rename to packages/components/_util/callBoth.ts diff --git a/src/_util/composeRefs.ts b/packages/components/_util/composeRefs.ts similarity index 100% rename from src/_util/composeRefs.ts rename to packages/components/_util/composeRefs.ts diff --git a/src/_util/copyText.ts b/packages/components/_util/copyText.ts similarity index 100% rename from src/_util/copyText.ts rename to packages/components/_util/copyText.ts diff --git a/src/_util/createHookContext.tsx b/packages/components/_util/createHookContext.tsx similarity index 100% rename from src/_util/createHookContext.tsx rename to packages/components/_util/createHookContext.tsx diff --git a/src/_util/dom.ts b/packages/components/_util/dom.ts similarity index 99% rename from src/_util/dom.ts rename to packages/components/_util/dom.ts index 65865a9b8f..cdc0374d1c 100644 --- a/src/_util/dom.ts +++ b/packages/components/_util/dom.ts @@ -1,5 +1,5 @@ import raf from 'raf'; -import isString from 'lodash/isString'; +import { isString } from 'lodash-es'; import { easeInOutCubic, EasingFunction } from './easing'; import { ScrollContainer, ScrollContainerElement } from '../common'; diff --git a/src/_util/easing.ts b/packages/components/_util/easing.ts similarity index 100% rename from src/_util/easing.ts rename to packages/components/_util/easing.ts diff --git a/src/_util/forwardRefWithStatics.ts b/packages/components/_util/forwardRefWithStatics.ts similarity index 100% rename from src/_util/forwardRefWithStatics.ts rename to packages/components/_util/forwardRefWithStatics.ts diff --git a/src/_util/hasScrollBar.ts b/packages/components/_util/hasScrollBar.ts similarity index 100% rename from src/_util/hasScrollBar.ts rename to packages/components/_util/hasScrollBar.ts diff --git a/src/_util/helper.ts b/packages/components/_util/helper.ts similarity index 98% rename from src/_util/helper.ts rename to packages/components/_util/helper.ts index c86070d6d6..24a6c20dc9 100644 --- a/src/_util/helper.ts +++ b/packages/components/_util/helper.ts @@ -1,4 +1,4 @@ -import camelCase from 'lodash/camelCase'; +import { camelCase } from 'lodash-es'; export function omit(obj: object, fields: string[]): object { const shallowCopy = { diff --git a/src/_util/injectValue.ts b/packages/components/_util/injectValue.ts similarity index 100% rename from src/_util/injectValue.ts rename to packages/components/_util/injectValue.ts diff --git a/src/_util/insertCSS.ts b/packages/components/_util/insertCSS.ts similarity index 100% rename from src/_util/insertCSS.ts rename to packages/components/_util/insertCSS.ts diff --git a/src/_util/isCallable.ts b/packages/components/_util/isCallable.ts similarity index 100% rename from src/_util/isCallable.ts rename to packages/components/_util/isCallable.ts diff --git a/src/_util/linearGradient.ts b/packages/components/_util/linearGradient.ts similarity index 100% rename from src/_util/linearGradient.ts rename to packages/components/_util/linearGradient.ts diff --git a/src/_util/noop.ts b/packages/components/_util/noop.ts similarity index 100% rename from src/_util/noop.ts rename to packages/components/_util/noop.ts diff --git a/src/_util/number.ts b/packages/components/_util/number.ts similarity index 100% rename from src/_util/number.ts rename to packages/components/_util/number.ts diff --git a/src/_util/parseTNode.ts b/packages/components/_util/parseTNode.ts similarity index 93% rename from src/_util/parseTNode.ts rename to packages/components/_util/parseTNode.ts index 468639ee23..84d9dd43ed 100644 --- a/src/_util/parseTNode.ts +++ b/packages/components/_util/parseTNode.ts @@ -1,7 +1,7 @@ import React, { ReactElement, ReactNode } from 'react'; -import isFunction from 'lodash/isFunction'; +import { isFunction } from 'lodash-es'; import { TNode } from '../common'; -import log from '../_common/js/log'; +import log from '../../common/js/log'; // 解析 TNode 数据结构 export default function parseTNode( diff --git a/src/_util/react-render.ts b/packages/components/_util/react-render.ts similarity index 92% rename from src/_util/react-render.ts rename to packages/components/_util/react-render.ts index 7ce1dd6d01..0fdbcd7ba5 100644 --- a/src/_util/react-render.ts +++ b/packages/components/_util/react-render.ts @@ -2,6 +2,7 @@ // @ts-ignore import type * as React from 'react'; import * as ReactDOM from 'react-dom'; +import { createRoot as createRootClient } from 'react-dom/client'; import type { Root } from 'react-dom/client'; // Let compiler not to search module usage @@ -16,13 +17,16 @@ const fullClone = { type CreateRoot = (container: ContainerType) => Root; +// @ts-ignore const { version, render: reactRender, unmountComponentAtNode } = fullClone; let createRoot: CreateRoot; try { const mainVersion = Number((version || '').split('.')[0]); - if (mainVersion >= 18) { + if (mainVersion >= 18 && mainVersion < 19) { ({ createRoot } = fullClone); + } else if (mainVersion >= 19) { + createRoot = createRootClient; } } catch (e) { // Do nothing; diff --git a/src/_util/setStyle.ts b/packages/components/_util/setStyle.ts similarity index 100% rename from src/_util/setStyle.ts rename to packages/components/_util/setStyle.ts diff --git a/src/_util/wrapDisabledButton.tsx b/packages/components/_util/wrapDisabledButton.tsx similarity index 100% rename from src/_util/wrapDisabledButton.tsx rename to packages/components/_util/wrapDisabledButton.tsx diff --git a/src/affix/Affix.tsx b/packages/components/affix/Affix.tsx similarity index 99% rename from src/affix/Affix.tsx rename to packages/components/affix/Affix.tsx index d950033b57..c24486852b 100644 --- a/src/affix/Affix.tsx +++ b/packages/components/affix/Affix.tsx @@ -1,5 +1,5 @@ import React, { useEffect, forwardRef, useCallback, useImperativeHandle, useRef } from 'react'; -import isFunction from 'lodash/isFunction'; +import { isFunction } from 'lodash-es'; import { StyledProps, ScrollContainerElement } from '../common'; import { TdAffixProps } from './type'; import { getScrollContainer } from '../_util/dom'; diff --git a/src/affix/__tests__/affix.test.tsx b/packages/components/affix/__tests__/affix.test.tsx similarity index 100% rename from src/affix/__tests__/affix.test.tsx rename to packages/components/affix/__tests__/affix.test.tsx diff --git a/src/affix/_example/base.tsx b/packages/components/affix/_example/base.tsx similarity index 100% rename from src/affix/_example/base.tsx rename to packages/components/affix/_example/base.tsx diff --git a/src/affix/_example/container.tsx b/packages/components/affix/_example/container.tsx similarity index 100% rename from src/affix/_example/container.tsx rename to packages/components/affix/_example/container.tsx diff --git a/src/affix/_usage/props.json b/packages/components/affix/_usage/props.json similarity index 100% rename from src/affix/_usage/props.json rename to packages/components/affix/_usage/props.json diff --git a/src/affix/affix.en-US.md b/packages/components/affix/affix.en-US.md similarity index 86% rename from src/affix/affix.en-US.md rename to packages/components/affix/affix.en-US.md index 030007a0e8..9adbc53cec 100644 --- a/src/affix/affix.en-US.md +++ b/packages/components/affix/affix.en-US.md @@ -7,9 +7,9 @@ name | type | default | description | required -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式,Typescript:`React.CSSProperties` | N -children | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -container | String / Function | () => (() => window) | Typescript:`ScrollContainer`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -content | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +children | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +container | String / Function | () => (() => window) | Typescript:`ScrollContainer`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +content | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N offsetBottom | Number | 0 | When the distance from the bottom of the container reaches the specified distance, the trigger is fixed | N offsetTop | Number | 0 | When the distance from the top of the container reaches the specified distance, the trigger is fixed | N zIndex | Number | - | \- | N diff --git a/src/affix/affix.md b/packages/components/affix/affix.md similarity index 85% rename from src/affix/affix.md rename to packages/components/affix/affix.md index 26d96653f4..78cdd362df 100644 --- a/src/affix/affix.md +++ b/packages/components/affix/affix.md @@ -7,9 +7,9 @@ -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式,TS 类型:`React.CSSProperties` | N -children | TNode | - | 内容,同 content。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -container | String / Function | () => (() => window) | 指定滚动的容器。数据类型为 String 时,会被当作选择器处理,进行节点查询。示例:'body' 或 () => document.body。TS 类型:`ScrollContainer`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -content | TNode | - | 内容。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +children | TNode | - | 内容,同 content。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +container | String / Function | () => (() => window) | 指定滚动的容器。数据类型为 String 时,会被当作选择器处理,进行节点查询。示例:'body' 或 () => document.body。TS 类型:`ScrollContainer`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +content | TNode | - | 内容。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N offsetBottom | Number | 0 | 距离容器顶部达到指定距离后触发固定 | N offsetTop | Number | 0 | 距离容器底部达到指定距离后触发固定 | N zIndex | Number | - | 固钉定位层级,样式默认为 500 | N diff --git a/src/affix/defaultProps.ts b/packages/components/affix/defaultProps.ts similarity index 100% rename from src/affix/defaultProps.ts rename to packages/components/affix/defaultProps.ts diff --git a/src/affix/index.ts b/packages/components/affix/index.ts similarity index 100% rename from src/affix/index.ts rename to packages/components/affix/index.ts diff --git a/src/affix/style/css.js b/packages/components/affix/style/css.js similarity index 100% rename from src/affix/style/css.js rename to packages/components/affix/style/css.js diff --git a/packages/components/affix/style/index.js b/packages/components/affix/style/index.js new file mode 100644 index 0000000000..9e0cd06c87 --- /dev/null +++ b/packages/components/affix/style/index.js @@ -0,0 +1 @@ +import '../../../common/style/web/components/affix/_index.less'; diff --git a/src/affix/type.ts b/packages/components/affix/type.ts similarity index 100% rename from src/affix/type.ts rename to packages/components/affix/type.ts diff --git a/src/alert/Alert.tsx b/packages/components/alert/Alert.tsx similarity index 100% rename from src/alert/Alert.tsx rename to packages/components/alert/Alert.tsx diff --git a/src/alert/__tests__/alert.test.tsx b/packages/components/alert/__tests__/alert.test.tsx similarity index 81% rename from src/alert/__tests__/alert.test.tsx rename to packages/components/alert/__tests__/alert.test.tsx index cc42f15381..e0b7918784 100644 --- a/src/alert/__tests__/alert.test.tsx +++ b/packages/components/alert/__tests__/alert.test.tsx @@ -30,9 +30,13 @@ describe('Alert 组件测试', () => { expect(container.querySelector('.t-alert--error')).not.toBeNull(); expect(container.querySelector('.t-alert--error')).toBeInTheDocument(); - act(() => { - fireEvent.click(queryByTestId(testId)); - }); + const element = queryByTestId(testId); + if (element) { + // 在 react 18.3.1之后 可以在 react 中导出 act,且在18.3.1 之后应该在react中使用 act + act(() => fireEvent.click(element)); + } else { + throw new Error(`Element with testId ${testId} not found`); + } expect(container.querySelector('.t-alert--closing')).toBeInTheDocument(); expect(onClose).toHaveBeenCalledTimes(1); @@ -116,9 +120,11 @@ describe('Alert 组件测试', () => { expect(element).toBeNull(); const btn = await waitFor(() => queryByText('展开更多')); - act(() => { - fireEvent.click(btn); - }); + if (btn) { + act(() => fireEvent.click(btn)); + } else { + throw new Error(`Button with text '展开更多' not found`); + } expect(queryByText('收起')).not.toBeNull(); expect(queryByText('收起')).toBeInTheDocument(); @@ -126,11 +132,23 @@ describe('Alert 组件测试', () => { expect(element1).not.toBeNull(); const btn1 = await waitFor(() => queryByText('收起')); - act(() => { - fireEvent.click(btn1); - }); - + if (btn1) { + act(() => fireEvent.click(btn1)); + } else { + throw new Error(`Button with text '收起' not found`); + } const element3 = await waitFor(() => queryByTestId(testId)); expect(element3).toBeNull(); }); + + test('className', () => { + const { container } = render(); + expect(container.querySelector('.custom-class')).not.toBeNull(); + }); + + test('style', () => { + const { container } = render(); + const element = container.querySelector('.t-alert') as HTMLElement; + expect(element?.style.color).toBe('red'); + }); }); diff --git a/src/alert/_example/base.tsx b/packages/components/alert/_example/base.tsx similarity index 100% rename from src/alert/_example/base.tsx rename to packages/components/alert/_example/base.tsx diff --git a/src/alert/_example/close.tsx b/packages/components/alert/_example/close.tsx similarity index 100% rename from src/alert/_example/close.tsx rename to packages/components/alert/_example/close.tsx diff --git a/src/alert/_example/collapse.tsx b/packages/components/alert/_example/collapse.tsx similarity index 100% rename from src/alert/_example/collapse.tsx rename to packages/components/alert/_example/collapse.tsx diff --git a/src/alert/_example/icon.tsx b/packages/components/alert/_example/icon.tsx similarity index 100% rename from src/alert/_example/icon.tsx rename to packages/components/alert/_example/icon.tsx diff --git a/src/alert/_example/operation.tsx b/packages/components/alert/_example/operation.tsx similarity index 100% rename from src/alert/_example/operation.tsx rename to packages/components/alert/_example/operation.tsx diff --git a/src/alert/_example/swiper.tsx b/packages/components/alert/_example/swiper.tsx similarity index 100% rename from src/alert/_example/swiper.tsx rename to packages/components/alert/_example/swiper.tsx diff --git a/src/alert/_example/title.tsx b/packages/components/alert/_example/title.tsx similarity index 100% rename from src/alert/_example/title.tsx rename to packages/components/alert/_example/title.tsx diff --git a/src/alert/_usage/index.jsx b/packages/components/alert/_usage/index.jsx similarity index 100% rename from src/alert/_usage/index.jsx rename to packages/components/alert/_usage/index.jsx diff --git a/src/alert/_usage/props.json b/packages/components/alert/_usage/props.json similarity index 100% rename from src/alert/_usage/props.json rename to packages/components/alert/_usage/props.json diff --git a/src/alert/alert.en-US.md b/packages/components/alert/alert.en-US.md similarity index 80% rename from src/alert/alert.en-US.md rename to packages/components/alert/alert.en-US.md index e17aee5520..58c40400e9 100644 --- a/src/alert/alert.en-US.md +++ b/packages/components/alert/alert.en-US.md @@ -8,12 +8,12 @@ name | type | default | description | required -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式,Typescript:`React.CSSProperties` | N -close | TNode | false | Typescript:`string \| boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -icon | TElement | - | Typescript:`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +close | TNode | false | Typescript:`string \| boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +icon | TElement | - | Typescript:`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N maxLine | Number | 0 | \- | N -message | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -operation | TElement | - | Typescript:`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +message | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +operation | TElement | - | Typescript:`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N theme | String | info | options:success/info/warning/error | N -title | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +title | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N onClose | Function | | Typescript:`(context: { e: MouseEvent }) => void` | N onClosed | Function | | Typescript:`(context: { e: TransitionEvent }) => void` | N diff --git a/src/alert/alert.md b/packages/components/alert/alert.md similarity index 85% rename from src/alert/alert.md rename to packages/components/alert/alert.md index 7a110b422c..ad9c1066d3 100644 --- a/src/alert/alert.md +++ b/packages/components/alert/alert.md @@ -7,12 +7,12 @@ -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式,TS 类型:`React.CSSProperties` | N -close | TNode | false | 关闭按钮。值为 true 则显示默认关闭按钮;值为 false 则不显示按钮;值类型为 string 则直接显示;值类型为 Function 则可以自定关闭按钮。TS 类型:`string \| boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -icon | TElement | - | 图标。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +close | TNode | false | 关闭按钮。值为 true 则显示默认关闭按钮;值为 false 则不显示按钮;值类型为 string 则直接显示;值类型为 Function 则可以自定关闭按钮。TS 类型:`string \| boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +icon | TElement | - | 图标。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N maxLine | Number | 0 | 内容显示最大行数,超出的内容会折叠收起,用户点击后再展开。值为 0 表示不折叠 | N -message | TNode | - | 内容(子元素)。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -operation | TElement | - | 跟在告警内容后面的操作区。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +message | TNode | - | 内容(子元素)。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +operation | TElement | - | 跟在告警内容后面的操作区。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N theme | String | info | 组件风格。可选项:success/info/warning/error | N -title | TNode | - | 标题。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +title | TNode | - | 标题。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N onClose | Function | | TS 类型:`(context: { e: MouseEvent }) => void`关闭按钮点击时触发 | N onClosed | Function | | TS 类型:`(context: { e: TransitionEvent }) => void`告警提示框关闭动画结束后触发 | N diff --git a/src/alert/defaultProps.ts b/packages/components/alert/defaultProps.ts similarity index 100% rename from src/alert/defaultProps.ts rename to packages/components/alert/defaultProps.ts diff --git a/src/alert/index.ts b/packages/components/alert/index.ts similarity index 100% rename from src/alert/index.ts rename to packages/components/alert/index.ts diff --git a/src/alert/style/css.js b/packages/components/alert/style/css.js similarity index 100% rename from src/alert/style/css.js rename to packages/components/alert/style/css.js diff --git a/packages/components/alert/style/index.js b/packages/components/alert/style/index.js new file mode 100644 index 0000000000..139bb76e3d --- /dev/null +++ b/packages/components/alert/style/index.js @@ -0,0 +1 @@ +import '../../../common/style/web/components/alert/_index.less'; diff --git a/src/alert/type.ts b/packages/components/alert/type.ts similarity index 100% rename from src/alert/type.ts rename to packages/components/alert/type.ts diff --git a/src/anchor/Anchor.tsx b/packages/components/anchor/Anchor.tsx similarity index 98% rename from src/anchor/Anchor.tsx rename to packages/components/anchor/Anchor.tsx index c93d77efa4..330d0501a6 100644 --- a/src/anchor/Anchor.tsx +++ b/packages/components/anchor/Anchor.tsx @@ -1,7 +1,6 @@ import React, { useState, useRef, useEffect, useCallback, useImperativeHandle } from 'react'; import classNames from 'classnames'; -import isEmpty from 'lodash/isEmpty'; -import isFunction from 'lodash/isFunction'; +import { isEmpty , isFunction } from 'lodash-es'; import { StyledProps } from '../common'; import { TdAnchorProps } from './type'; import useConfig from '../hooks/useConfig'; diff --git a/src/anchor/AnchorContext.tsx b/packages/components/anchor/AnchorContext.tsx similarity index 100% rename from src/anchor/AnchorContext.tsx rename to packages/components/anchor/AnchorContext.tsx diff --git a/src/anchor/AnchorItem.tsx b/packages/components/anchor/AnchorItem.tsx similarity index 100% rename from src/anchor/AnchorItem.tsx rename to packages/components/anchor/AnchorItem.tsx diff --git a/src/anchor/AnchorTarget.tsx b/packages/components/anchor/AnchorTarget.tsx similarity index 100% rename from src/anchor/AnchorTarget.tsx rename to packages/components/anchor/AnchorTarget.tsx diff --git a/src/anchor/__tests__/anchor.test.tsx b/packages/components/anchor/__tests__/anchor.test.tsx similarity index 100% rename from src/anchor/__tests__/anchor.test.tsx rename to packages/components/anchor/__tests__/anchor.test.tsx diff --git a/src/anchor/_example/base.tsx b/packages/components/anchor/_example/base.tsx similarity index 100% rename from src/anchor/_example/base.tsx rename to packages/components/anchor/_example/base.tsx diff --git a/src/anchor/_example/container.tsx b/packages/components/anchor/_example/container.tsx similarity index 100% rename from src/anchor/_example/container.tsx rename to packages/components/anchor/_example/container.tsx diff --git a/src/anchor/_example/cursor.tsx b/packages/components/anchor/_example/cursor.tsx similarity index 100% rename from src/anchor/_example/cursor.tsx rename to packages/components/anchor/_example/cursor.tsx diff --git a/src/anchor/_example/customize-highlight.tsx b/packages/components/anchor/_example/customize-highlight.tsx similarity index 100% rename from src/anchor/_example/customize-highlight.tsx rename to packages/components/anchor/_example/customize-highlight.tsx diff --git a/src/anchor/_example/large.tsx b/packages/components/anchor/_example/large.tsx similarity index 100% rename from src/anchor/_example/large.tsx rename to packages/components/anchor/_example/large.tsx diff --git a/src/anchor/_example/multiple.tsx b/packages/components/anchor/_example/multiple.tsx similarity index 100% rename from src/anchor/_example/multiple.tsx rename to packages/components/anchor/_example/multiple.tsx diff --git a/src/anchor/_example/small.tsx b/packages/components/anchor/_example/small.tsx similarity index 100% rename from src/anchor/_example/small.tsx rename to packages/components/anchor/_example/small.tsx diff --git a/src/anchor/_example/target.tsx b/packages/components/anchor/_example/target.tsx similarity index 100% rename from src/anchor/_example/target.tsx rename to packages/components/anchor/_example/target.tsx diff --git a/src/anchor/_usage/index.jsx b/packages/components/anchor/_usage/index.jsx similarity index 100% rename from src/anchor/_usage/index.jsx rename to packages/components/anchor/_usage/index.jsx diff --git a/src/anchor/_usage/props.json b/packages/components/anchor/_usage/props.json similarity index 100% rename from src/anchor/_usage/props.json rename to packages/components/anchor/_usage/props.json diff --git a/src/anchor/_util/dom.ts b/packages/components/anchor/_util/dom.ts similarity index 100% rename from src/anchor/_util/dom.ts rename to packages/components/anchor/_util/dom.ts diff --git a/src/anchor/anchor.en-US.md b/packages/components/anchor/anchor.en-US.md similarity index 85% rename from src/anchor/anchor.en-US.md rename to packages/components/anchor/anchor.en-US.md index 64f0b9c8b8..4cb08b896a 100644 --- a/src/anchor/anchor.en-US.md +++ b/packages/components/anchor/anchor.en-US.md @@ -7,12 +7,12 @@ name | type | default | description | required -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式,Typescript:`React.CSSProperties` | N -affixProps | Object | - | Typescript:`Omit`,[Affix API Documents](./affix?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/anchor/type.ts) | N +affixProps | Object | - | Typescript:`Omit`,[Affix API Documents](./affix?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/anchor/type.ts) | N bounds | Number | 5 | \- | N -container | String / Function | () => window | Typescript:`ScrollContainer`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -cursor | TElement | - | Typescript:`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +container | String / Function | () => window | Typescript:`ScrollContainer`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +cursor | TElement | - | Typescript:`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N getCurrentAnchor | Function | - | Custom Highlighted Anchor Points。Typescript:`(activeLink: string) => string` | N -size | String | medium | options: small/medium/large。Typescript:`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +size | String | medium | options: small/medium/large。Typescript:`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N targetOffset | Number | 0 | \- | N onChange | Function | | Typescript:`(currentLink: string, prevLink: string) => void` | N onClick | Function | | Typescript:`(link: { href: string; title: string; e: MouseEvent }) => void` | N @@ -25,7 +25,7 @@ className | String | - | 类名 | N style | Object | - | 样式,Typescript:`React.CSSProperties` | N href | String | - | required | Y target | String | _self | options: _self/_blank/_parent/_top | N -title | TNode | '' | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +title | TNode | '' | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N ### AnchorTarget Props diff --git a/src/anchor/anchor.md b/packages/components/anchor/anchor.md similarity index 88% rename from src/anchor/anchor.md rename to packages/components/anchor/anchor.md index c613d357ca..9486f4d1a5 100644 --- a/src/anchor/anchor.md +++ b/packages/components/anchor/anchor.md @@ -7,12 +7,12 @@ -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式,TS 类型:`React.CSSProperties` | N -affixProps | Object | - | 透传 Affix 组件属性,即让 Anchor 组件支持所有 Affix 组件特性。TS 类型:`Omit`,[Affix API Documents](./affix?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/anchor/type.ts) | N +affixProps | Object | - | 透传 Affix 组件属性,即让 Anchor 组件支持所有 Affix 组件特性。TS 类型:`Omit`,[Affix API Documents](./affix?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/anchor/type.ts) | N bounds | Number | 5 | 锚点区域边界 | N -container | String / Function | () => window | 指定滚动的容器。数据类型为 String 时,会被当作选择器处理,进行节点查询。示例:'body' 或 () => document.body。TS 类型:`ScrollContainer`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -cursor | TElement | - | 用于自定义选中项左侧游标。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +container | String / Function | () => window | 指定滚动的容器。数据类型为 String 时,会被当作选择器处理,进行节点查询。示例:'body' 或 () => document.body。TS 类型:`ScrollContainer`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +cursor | TElement | - | 用于自定义选中项左侧游标。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N getCurrentAnchor | Function | - | 自定义高亮的锚点 。TS 类型:`(activeLink: string) => string` | N -size | String | medium | 组件尺寸,small(120px),medium(200px),large(320px)。可选项:small/medium/large。TS 类型:`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +size | String | medium | 组件尺寸,small(120px),medium(200px),large(320px)。可选项:small/medium/large。TS 类型:`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N targetOffset | Number | 0 | 锚点滚动偏移量 | N onChange | Function | | TS 类型:`(currentLink: string, prevLink: string) => void`锚点改变时触发 | N onClick | Function | | TS 类型:`(link: { href: string; title: string; e: MouseEvent }) => void`锚点被点击时触发 | N @@ -25,7 +25,7 @@ className | String | - | 类名 | N style | Object | - | 样式,TS 类型:`React.CSSProperties` | N href | String | - | 必需。锚点链接, 如果是 hash 模式需要加上当前 path | Y target | String | _self | 锚点文本。可选项:_self/_blank/_parent/_top | N -title | TNode | '' | 锚点文本。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +title | TNode | '' | 锚点文本。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N ### AnchorTarget Props diff --git a/src/anchor/defaultProps.ts b/packages/components/anchor/defaultProps.ts similarity index 100% rename from src/anchor/defaultProps.ts rename to packages/components/anchor/defaultProps.ts diff --git a/src/anchor/index.ts b/packages/components/anchor/index.ts similarity index 100% rename from src/anchor/index.ts rename to packages/components/anchor/index.ts diff --git a/src/anchor/style/css.js b/packages/components/anchor/style/css.js similarity index 100% rename from src/anchor/style/css.js rename to packages/components/anchor/style/css.js diff --git a/packages/components/anchor/style/index.js b/packages/components/anchor/style/index.js new file mode 100644 index 0000000000..77256bd92b --- /dev/null +++ b/packages/components/anchor/style/index.js @@ -0,0 +1 @@ +import '../../../common/style/web/components/anchor/_index.less'; diff --git a/src/anchor/type.ts b/packages/components/anchor/type.ts similarity index 100% rename from src/anchor/type.ts rename to packages/components/anchor/type.ts diff --git a/src/auto-complete/AutoComplete.tsx b/packages/components/auto-complete/AutoComplete.tsx similarity index 98% rename from src/auto-complete/AutoComplete.tsx rename to packages/components/auto-complete/AutoComplete.tsx index 0aceba8e7e..1dacbfb774 100644 --- a/src/auto-complete/AutoComplete.tsx +++ b/packages/components/auto-complete/AutoComplete.tsx @@ -151,13 +151,14 @@ const AutoComplete = forwardRef((originalPro highlightKeyword={props.highlightKeyword} filterable={props.filterable} filter={props.filter} + empty={props.empty} /> ); const topContent = props.panelTopContent; const bottomContent = props.panelBottomContent; const panelContent = topContent || listContent || bottomContent ? ( - + {topContent} {listContent} {bottomContent} diff --git a/src/auto-complete/HighlightOption.tsx b/packages/components/auto-complete/HighlightOption.tsx similarity index 96% rename from src/auto-complete/HighlightOption.tsx rename to packages/components/auto-complete/HighlightOption.tsx index b53a8a798a..e51064024c 100644 --- a/src/auto-complete/HighlightOption.tsx +++ b/packages/components/auto-complete/HighlightOption.tsx @@ -1,5 +1,5 @@ import React, { useMemo } from 'react'; -import escapeRegExp from 'lodash/escapeRegExp'; +import { escapeRegExp } from 'lodash-es'; import useConfig from '../hooks/useConfig'; export interface TdHighlightOptionProps { diff --git a/src/auto-complete/OptionList.tsx b/packages/components/auto-complete/OptionList.tsx similarity index 88% rename from src/auto-complete/OptionList.tsx rename to packages/components/auto-complete/OptionList.tsx index 9aa7c169bc..40a4f1b7f4 100644 --- a/src/auto-complete/OptionList.tsx +++ b/packages/components/auto-complete/OptionList.tsx @@ -1,13 +1,13 @@ import React, { useMemo, useState, useRef, MouseEvent, useEffect, useImperativeHandle, forwardRef } from 'react'; import classNames from 'classnames'; -import isFunction from 'lodash/isFunction'; -import escapeRegExp from 'lodash/escapeRegExp'; +import { isFunction , escapeRegExp } from 'lodash-es'; import useConfig from '../hooks/useConfig'; -import log from '../_common/js/log'; +import log from '../../common/js/log'; import { CommonClassNameType } from '../hooks/useCommonClassName'; import { AutoCompleteOptionObj, TdAutoCompleteProps } from './type'; import HighlightOption from './HighlightOption'; import { on, off } from '../_util/dom'; +import { useLocaleReceiver } from '../locale/LocalReceiver'; export interface OptionsListProps { sizeClassNames: CommonClassNameType['sizeClassNames']; @@ -18,7 +18,8 @@ export interface OptionsListProps { highlightKeyword: boolean; filterable: boolean; filter: TdAutoCompleteProps['filter']; - onSelect?: (keyword: string, context: { e: MouseEvent | KeyboardEvent | any }) => void; + empty: TdAutoCompleteProps['empty']; + onSelect: (keyword: string, context: { e: MouseEvent | KeyboardEvent | any }) => void; } export interface OptionsListRef { @@ -32,6 +33,8 @@ const OptionsList = forwardRef((props: Options const [active, setActive] = useState(''); const activeIndexRef = useRef(-1); + const [global] = useLocaleReceiver('autoComplete'); + const classes = `${classPrefix}-select__list`; const optionClasses = [ `${classPrefix}-select-option`, @@ -81,7 +84,7 @@ const OptionsList = forwardRef((props: Options } const keyword = liNode.getAttribute('title'); setActive(keyword); - onSelect?.(keyword, { e }); + onSelect(keyword, { e }); }; // 键盘事件,上下选择 @@ -90,10 +93,10 @@ const OptionsList = forwardRef((props: Options const currentIndex = activeIndexRef.current; if (currentIndex === -1) { - return + return; } - onSelect?.(tOptions[activeIndexRef.current].text, { e }); + onSelect(tOptions[activeIndexRef.current].text, { e }); } else { const index = activeIndexRef.current; let newIndex; @@ -141,7 +144,9 @@ const OptionsList = forwardRef((props: Options activeIndexRef.current = tOptions.findIndex((item) => item.text === active); }, [active, tOptions]); - if (!tOptions.length) return null; + if (!tOptions.length) { + return {props.empty || global.empty}; + } return ( {tOptions.map((item) => { diff --git a/src/auto-complete/__tests__/mount.jsx b/packages/components/auto-complete/__tests__/mount.jsx similarity index 100% rename from src/auto-complete/__tests__/mount.jsx rename to packages/components/auto-complete/__tests__/mount.jsx diff --git a/src/auto-complete/__tests__/vitest-auto-complete.test.jsx b/packages/components/auto-complete/__tests__/vitest-auto-complete.test.jsx similarity index 100% rename from src/auto-complete/__tests__/vitest-auto-complete.test.jsx rename to packages/components/auto-complete/__tests__/vitest-auto-complete.test.jsx diff --git a/src/auto-complete/_example/base.tsx b/packages/components/auto-complete/_example/base.tsx similarity index 100% rename from src/auto-complete/_example/base.tsx rename to packages/components/auto-complete/_example/base.tsx diff --git a/src/auto-complete/_example/filter.tsx b/packages/components/auto-complete/_example/filter.tsx similarity index 96% rename from src/auto-complete/_example/filter.tsx rename to packages/components/auto-complete/_example/filter.tsx index b54d00ab1a..2379263524 100644 --- a/src/auto-complete/_example/filter.tsx +++ b/packages/components/auto-complete/_example/filter.tsx @@ -1,7 +1,7 @@ import React, { useState } from 'react'; import { Space, AutoComplete } from 'tdesign-react'; import type { AutoCompleteProps } from 'tdesign-react'; -import escapeRegExp from 'lodash/escapeRegExp'; +import { escapeRegExp } from 'lodash-es'; const LIST = ['第一个 AutoComplete 默认联想词', '第二个 AutoComplete 默认联想词', '第三个 AutoComplete 默认联想词']; diff --git a/src/auto-complete/_example/option.tsx b/packages/components/auto-complete/_example/option.tsx similarity index 100% rename from src/auto-complete/_example/option.tsx rename to packages/components/auto-complete/_example/option.tsx diff --git a/src/auto-complete/_example/size.tsx b/packages/components/auto-complete/_example/size.tsx similarity index 100% rename from src/auto-complete/_example/size.tsx rename to packages/components/auto-complete/_example/size.tsx diff --git a/src/auto-complete/_example/status.tsx b/packages/components/auto-complete/_example/status.tsx similarity index 100% rename from src/auto-complete/_example/status.tsx rename to packages/components/auto-complete/_example/status.tsx diff --git a/src/auto-complete/_example/trigger-element.tsx b/packages/components/auto-complete/_example/trigger-element.tsx similarity index 100% rename from src/auto-complete/_example/trigger-element.tsx rename to packages/components/auto-complete/_example/trigger-element.tsx diff --git a/src/auto-complete/auto-complete.en-US.md b/packages/components/auto-complete/auto-complete.en-US.md similarity index 79% rename from src/auto-complete/auto-complete.en-US.md rename to packages/components/auto-complete/auto-complete.en-US.md index e7351aefae..d0cd7b978f 100644 --- a/src/auto-complete/auto-complete.en-US.md +++ b/packages/components/auto-complete/auto-complete.en-US.md @@ -10,24 +10,25 @@ className | String | - | className of component | N style | Object | - | CSS(Cascading Style Sheets),Typescript:`React.CSSProperties` | N autofocus | Boolean | - | \- | N borderless | Boolean | false | \- | N -children | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +children | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N clearable | Boolean | - | \- | N disabled | Boolean | - | \- | N +empty | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N filter | Function | - | Typescript:`(filterWords: string, option: T) => boolean \| Promise` | N filterable | Boolean | true | \- | N highlightKeyword | Boolean | true | \- | N -inputProps | Object | - | Typescript:`InputProps`,[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/auto-complete/type.ts) | N +inputProps | Object | - | Typescript:`InputProps`,[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/auto-complete/type.ts) | N options | Array | - | Typescript:`Array` | N -panelBottomContent | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -panelTopContent | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +panelBottomContent | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +panelTopContent | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N placeholder | String | undefined | \- | N -popupProps | Object | - | Typescript:`PopupProps`,[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/auto-complete/type.ts) | N +popupProps | Object | - | Typescript:`PopupProps`,[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/auto-complete/type.ts) | N readonly | Boolean | - | \- | N -size | String | medium | options: small/medium/large。Typescript:`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +size | String | medium | options: small/medium/large。Typescript:`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N status | String | default | options: default/success/warning/error | N -textareaProps | Object | - | Typescript:`TextareaProps`,[Textarea API Documents](./textarea?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/auto-complete/type.ts) | N -tips | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -triggerElement | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +textareaProps | Object | - | Typescript:`TextareaProps`,[Textarea API Documents](./textarea?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/auto-complete/type.ts) | N +tips | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +triggerElement | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N value | String | - | \- | N defaultValue | String | - | uncontrolled property | N onBlur | Function | | Typescript:`(context: { e: FocusEvent; value: string }) => void` | N diff --git a/src/auto-complete/auto-complete.md b/packages/components/auto-complete/auto-complete.md similarity index 84% rename from src/auto-complete/auto-complete.md rename to packages/components/auto-complete/auto-complete.md index 8f7e7e818b..2ef5fcffce 100644 --- a/src/auto-complete/auto-complete.md +++ b/packages/components/auto-complete/auto-complete.md @@ -10,24 +10,25 @@ className | String | - | 类名 | N style | Object | - | 样式,TS 类型:`React.CSSProperties` | N autofocus | Boolean | - | 自动获取焦点 | N borderless | Boolean | false | 无边框模式 | N -children | TNode | - | 触发显示联想词下拉框的元素,同 `triggerElement`。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +children | TNode | - | 触发显示联想词下拉框的元素,同 `triggerElement`。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N clearable | Boolean | - | 是否允许清空 | N disabled | Boolean | - | 是否禁用 | N +empty | TNode | - | 当下拉联想词列表为空时显示的内容。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N filter | Function | - | 自定义过滤规则,用于对现有数据进行搜索过滤,判断是否过滤某一项数据。参数 `filterWords` 表示搜索词,`option`表示单个选项内容,返回值为 `true` 保留该选项,返回值为 `false` 则隐藏该选项。使用该方法时无需设置 `filterable`。TS 类型:`(filterWords: string, option: T) => boolean \| Promise` | N filterable | Boolean | true | 是否根据输入内容过滤联想词。默认过滤规则不区分大小写,全文本任意位置匹配。如果默认搜索规则不符合业务需求,可以更为使用 `filter` 自定义过滤规则。部分场景下输入关键词和下拉联想词完全不同,此时可以设置为 `false` | N highlightKeyword | Boolean | true | 是否高亮联想词中和输入值的相同部分 | N -inputProps | Object | - | 透传 Input 组件全部特性。TS 类型:`InputProps`,[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/auto-complete/type.ts) | N +inputProps | Object | - | 透传 Input 组件全部特性。TS 类型:`InputProps`,[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/auto-complete/type.ts) | N options | Array | - | 下拉联想词列表。示例一:`['联想词一', '联想词二']`。示例二:`{ label: () => 联想词元素, text: '用于搜索的纯联想词' }`。TS 类型:`Array` | N -panelBottomContent | TNode | - | 面板内的底部内容。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -panelTopContent | TNode | - | 面板内的顶部内容。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +panelBottomContent | TNode | - | 面板内的底部内容。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +panelTopContent | TNode | - | 面板内的顶部内容。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N placeholder | String | undefined | 输入框为空时的占位提示。组件本身默认值为 `undefined`,但全局配置存在默认值,不同语言全局默认值不同 | N -popupProps | Object | - | 透传 Popup 组件全部特性。TS 类型:`PopupProps`,[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/auto-complete/type.ts) | N +popupProps | Object | - | 透传 Popup 组件全部属性。TS 类型:`PopupProps`,[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/auto-complete/type.ts) | N readonly | Boolean | - | 是否只读 | N -size | String | medium | 组件尺寸。可选项:small/medium/large。TS 类型:`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +size | String | medium | 组件尺寸。可选项:small/medium/large。TS 类型:`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N status | String | default | 输入框状态。可选项:default/success/warning/error | N -textareaProps | Object | - | 透传 Textarea 组件全部特性。TS 类型:`TextareaProps`,[Textarea API Documents](./textarea?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/auto-complete/type.ts) | N -tips | TNode | - | 输入框下方提示文本,会根据不同的 `status` 呈现不同的样式。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -triggerElement | TNode | - | 触发显示联想词下拉框的元素,默认为 Input 组件,可以使用 `trigger` 自定义为 Textarea 组件或其他组件。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +textareaProps | Object | - | 透传 Textarea 组件全部特性。TS 类型:`TextareaProps`,[Textarea API Documents](./textarea?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/auto-complete/type.ts) | N +tips | TNode | - | 输入框下方提示文本,会根据不同的 `status` 呈现不同的样式。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +triggerElement | TNode | - | 触发显示联想词下拉框的元素,默认为 Input 组件,可以使用 `trigger` 自定义为 Textarea 组件或其他组件。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N value | String | - | 输入框的值,即当前指定的联想词 | N defaultValue | String | - | 输入框的值,即当前指定的联想词。非受控属性 | N onBlur | Function | | TS 类型:`(context: { e: FocusEvent; value: string }) => void`失去焦点时触发 | N diff --git a/src/auto-complete/defaultProps.ts b/packages/components/auto-complete/defaultProps.ts similarity index 100% rename from src/auto-complete/defaultProps.ts rename to packages/components/auto-complete/defaultProps.ts diff --git a/src/auto-complete/index.ts b/packages/components/auto-complete/index.ts similarity index 100% rename from src/auto-complete/index.ts rename to packages/components/auto-complete/index.ts diff --git a/src/auto-complete/style/css.js b/packages/components/auto-complete/style/css.js similarity index 100% rename from src/auto-complete/style/css.js rename to packages/components/auto-complete/style/css.js diff --git a/packages/components/auto-complete/style/index.js b/packages/components/auto-complete/style/index.js new file mode 100644 index 0000000000..fcb1dd8c9d --- /dev/null +++ b/packages/components/auto-complete/style/index.js @@ -0,0 +1 @@ +import '../../../common/style/web/components/auto-complete/_index.less'; diff --git a/src/auto-complete/type.ts b/packages/components/auto-complete/type.ts similarity index 97% rename from src/auto-complete/type.ts rename to packages/components/auto-complete/type.ts index b67866c94e..32aacdc9c6 100644 --- a/src/auto-complete/type.ts +++ b/packages/components/auto-complete/type.ts @@ -32,6 +32,10 @@ export interface TdAutoCompleteProps void`trigger on image load failed | N onClick | Function | | Typescript:`(context: { e: React.MouseEvent }) => void`trigger on click | N @@ -27,8 +27,8 @@ name | type | default | description | required -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式,Typescript:`React.CSSProperties` | N -cascading | String | 'right-up' | multiple images cascading。options:left-up/right-up。Typescript:`CascadingValue` `type CascadingValue = 'left-up' \| 'right-up'`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/avatar/type.ts) | N -collapseAvatar | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +cascading | String | 'right-up' | multiple images cascading。options:left-up/right-up。Typescript:`CascadingValue` `type CascadingValue = 'left-up' \| 'right-up'`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/avatar/type.ts) | N +collapseAvatar | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N max | Number | - | \- | N -popupProps | Object | - | Typescript:`PopupProps`,[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/avatar/type.ts) | N +popupProps | Object | - | Typescript:`PopupProps`,[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/avatar/type.ts) | N size | String | - | size | N diff --git a/src/avatar/avatar.md b/packages/components/avatar/avatar.md similarity index 86% rename from src/avatar/avatar.md rename to packages/components/avatar/avatar.md index b2866ebddd..3dd4a04e7f 100644 --- a/src/avatar/avatar.md +++ b/packages/components/avatar/avatar.md @@ -8,13 +8,13 @@ className | String | - | 类名 | N style | Object | - | 样式,TS 类型:`React.CSSProperties` | N alt | String | - | 头像替换文本,仅当图片加载失败时有效 | N -children | TNode | - | 子元素内容,同 content。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -content | TNode | - | 子元素内容。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +children | TNode | - | 子元素内容,同 content。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +content | TNode | - | 子元素内容。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N hideOnLoadFailed | Boolean | false | 加载失败时隐藏图片 | N -icon | TElement | - | 图标。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +icon | TElement | - | 图标。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N image | String | - | 图片地址 | N -imageProps | Object | - | 透传至 Image 组件。TS 类型:`ImageProps`,[Image API Documents](./image?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/avatar/type.ts) | N -shape | String | circle | 形状。可选项:circle/round。TS 类型:`ShapeEnum ` `type ShapeEnum = 'circle' \| 'round'`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/avatar/type.ts) | N +imageProps | Object | - | 透传至 Image 组件。TS 类型:`ImageProps`,[Image API Documents](./image?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/avatar/type.ts) | N +shape | String | circle | 形状。可选项:circle/round。TS 类型:`ShapeEnum ` `type ShapeEnum = 'circle' \| 'round'`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/avatar/type.ts) | N size | String | - | 尺寸,示例值:small/medium/large/24px/38px 等。优先级高于 AvatarGroup.size 。Avatar 单独存在时,默认值为 medium。如果父组件存在 AvatarGroup,默认值便由 AvatarGroup.size 决定 | N onError | Function | | TS 类型:`(context: { e: ImageEvent }) => void`图片加载失败时触发 | N onClick | Function | | TS 类型:`(context: { e: React.MouseEvent }) => void`点击时触发 | N @@ -27,8 +27,8 @@ onContextmenu | Function | | TS 类型:`(context: { e: React.MouseEvent }) => -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式,TS 类型:`React.CSSProperties` | N -cascading | String | 'right-up' | 图片之间的层叠关系,可选值:左侧图片在上和右侧图片在上。可选项:left-up/right-up。TS 类型:`CascadingValue` `type CascadingValue = 'left-up' \| 'right-up'`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/avatar/type.ts) | N -collapseAvatar | TNode | - | 头像数量超出时,会出现一个头像折叠元素。该元素内容可自定义。默认为 `+N`。示例:`+5`,`...`, `更多`。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +cascading | String | 'right-up' | 图片之间的层叠关系,可选值:左侧图片在上和右侧图片在上。可选项:left-up/right-up。TS 类型:`CascadingValue` `type CascadingValue = 'left-up' \| 'right-up'`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/avatar/type.ts) | N +collapseAvatar | TNode | - | 头像数量超出时,会出现一个头像折叠元素。该元素内容可自定义。默认为 `+N`。示例:`+5`,`...`, `更多`。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N max | Number | - | 能够同时显示的最多头像数量 | N -popupProps | Object | - | 头像右上角提示信息。TS 类型:`PopupProps`,[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/avatar/type.ts) | N +popupProps | Object | - | 头像右上角提示信息。TS 类型:`PopupProps`,[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/avatar/type.ts) | N size | String | - | 尺寸,示例值:small/medium/large/24px/38px 等。优先级低于 Avatar.size | N diff --git a/src/avatar/defaultProps.ts b/packages/components/avatar/defaultProps.ts similarity index 100% rename from src/avatar/defaultProps.ts rename to packages/components/avatar/defaultProps.ts diff --git a/src/avatar/index.ts b/packages/components/avatar/index.ts similarity index 100% rename from src/avatar/index.ts rename to packages/components/avatar/index.ts diff --git a/src/avatar/style/css.js b/packages/components/avatar/style/css.js similarity index 100% rename from src/avatar/style/css.js rename to packages/components/avatar/style/css.js diff --git a/packages/components/avatar/style/index.js b/packages/components/avatar/style/index.js new file mode 100644 index 0000000000..c7ddab522a --- /dev/null +++ b/packages/components/avatar/style/index.js @@ -0,0 +1 @@ +import '../../../common/style/web/components/avatar/_index.less'; diff --git a/src/avatar/type.ts b/packages/components/avatar/type.ts similarity index 100% rename from src/avatar/type.ts rename to packages/components/avatar/type.ts diff --git a/src/back-top/BackTop.tsx b/packages/components/back-top/BackTop.tsx similarity index 100% rename from src/back-top/BackTop.tsx rename to packages/components/back-top/BackTop.tsx diff --git a/src/back-top/__tests__/__snapshots__/vitest-back-top.test.jsx.snap b/packages/components/back-top/__tests__/__snapshots__/vitest-back-top.test.jsx.snap similarity index 100% rename from src/back-top/__tests__/__snapshots__/vitest-back-top.test.jsx.snap rename to packages/components/back-top/__tests__/__snapshots__/vitest-back-top.test.jsx.snap diff --git a/src/back-top/__tests__/vitest-back-top.test.jsx b/packages/components/back-top/__tests__/vitest-back-top.test.jsx similarity index 100% rename from src/back-top/__tests__/vitest-back-top.test.jsx rename to packages/components/back-top/__tests__/vitest-back-top.test.jsx diff --git a/src/back-top/_example/baseList.tsx b/packages/components/back-top/_example/baseList.tsx similarity index 100% rename from src/back-top/_example/baseList.tsx rename to packages/components/back-top/_example/baseList.tsx diff --git a/src/back-top/_example/baseListSmall.tsx b/packages/components/back-top/_example/baseListSmall.tsx similarity index 100% rename from src/back-top/_example/baseListSmall.tsx rename to packages/components/back-top/_example/baseListSmall.tsx diff --git a/src/back-top/_example/custom.tsx b/packages/components/back-top/_example/custom.tsx similarity index 100% rename from src/back-top/_example/custom.tsx rename to packages/components/back-top/_example/custom.tsx diff --git a/src/back-top/_example/shape.tsx b/packages/components/back-top/_example/shape.tsx similarity index 100% rename from src/back-top/_example/shape.tsx rename to packages/components/back-top/_example/shape.tsx diff --git a/src/back-top/_example/size.tsx b/packages/components/back-top/_example/size.tsx similarity index 100% rename from src/back-top/_example/size.tsx rename to packages/components/back-top/_example/size.tsx diff --git a/src/back-top/_example/theme.tsx b/packages/components/back-top/_example/theme.tsx similarity index 100% rename from src/back-top/_example/theme.tsx rename to packages/components/back-top/_example/theme.tsx diff --git a/src/back-top/back-top.en-US.md b/packages/components/back-top/back-top.en-US.md similarity index 76% rename from src/back-top/back-top.en-US.md rename to packages/components/back-top/back-top.en-US.md index 3b3ae29d8a..433290dee6 100644 --- a/src/back-top/back-top.en-US.md +++ b/packages/components/back-top/back-top.en-US.md @@ -8,15 +8,15 @@ name | type | default | description | required -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式,Typescript:`React.CSSProperties` | N -children | TNode | - | Backtop's children elements, same as `content`。Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -container | String / Function | 'body' | Typescript:`AttachNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -content | TNode | - | Backtop's children elements。Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -default | TNode | - | Backtop's children elements, same as `content`。Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +children | TNode | - | Backtop's children elements, same as `content`。Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +container | String / Function | 'body' | Typescript:`AttachNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +content | TNode | - | Backtop's children elements。Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +default | TNode | - | Backtop's children elements, same as `content`。Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N duration | Number | 200 | \- | N offset | Array | ["24px", "80px"] | Typescript:`Array` | N -shape | String | square | shape of BackTop element。options:circle/square。Typescript:`BackTopShapeEnum ` `type BackTopShapeEnum = 'circle' \| 'square'`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/back-top/type.ts) | N +shape | String | square | shape of BackTop element。options:circle/square。Typescript:`BackTopShapeEnum ` `type BackTopShapeEnum = 'circle' \| 'square'`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/back-top/type.ts) | N size | String | medium | size of BackTop。options:medium/small | N -target | String / Function | 'body' | Typescript:`AttachNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +target | String / Function | 'body' | Typescript:`AttachNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N theme | String | light | theme of BackTop。options:light/primary/dark | N visibleHeight | String / Number | '200px' | \- | N onClick | Function | | Typescript:`(context: { e: MouseEvent }) => void` | N diff --git a/src/back-top/back-top.md b/packages/components/back-top/back-top.md similarity index 82% rename from src/back-top/back-top.md rename to packages/components/back-top/back-top.md index 54989a0119..8d40b603b6 100644 --- a/src/back-top/back-top.md +++ b/packages/components/back-top/back-top.md @@ -8,15 +8,15 @@ -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式,TS 类型:`React.CSSProperties` | N -children | TNode | - | 回到顶部内容,同 `content`。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -container | String / Function | 'body' | 监听滚动的容器。数据类型为 String 时,会被当作选择器处理,进行节点查询。示例:'body' 或 () => document.body。TS 类型:`AttachNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -content | TNode | - | 回到顶部内容。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -default | TNode | - | 回到顶部内容,同 `content`。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +children | TNode | - | 回到顶部内容,同 `content`。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +container | String / Function | 'body' | 监听滚动的容器。数据类型为 String 时,会被当作选择器处理,进行节点查询。示例:'body' 或 () => document.body。TS 类型:`AttachNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +content | TNode | - | 回到顶部内容。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +default | TNode | - | 回到顶部内容,同 `content`。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N duration | Number | 200 | 回到顶部的耗时单位:毫秒 | N offset | Array | ["24px", "80px"] | 回到顶部相对右下角的位置偏移,示例:[10, 20] 或 ['10em', '8rem']。TS 类型:`Array` | N -shape | String | square | 回到顶部的形状。可选项:circle/square。TS 类型:`BackTopShapeEnum ` `type BackTopShapeEnum = 'circle' \| 'square'`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/back-top/type.ts) | N +shape | String | square | 回到顶部的形状。可选项:circle/square。TS 类型:`BackTopShapeEnum ` `type BackTopShapeEnum = 'circle' \| 'square'`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/back-top/type.ts) | N size | String | medium | 组件尺寸。可选项:medium/small | N -target | String / Function | 'body' | 指定回到该对象。数据类型为 String 时,会被当作选择器处理,进行节点查询。示例:'body' 或 () => document.body。TS 类型:`AttachNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +target | String / Function | 'body' | 指定回到该对象。数据类型为 String 时,会被当作选择器处理,进行节点查询。示例:'body' 或 () => document.body。TS 类型:`AttachNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N theme | String | light | 组件主题风格,浅色、主色、深色。可选项:light/primary/dark | N visibleHeight | String / Number | '200px' | 滚动高度达到此参数值才出现 | N onClick | Function | | TS 类型:`(context: { e: MouseEvent }) => void`点击回到顶部时触发 | N diff --git a/src/back-top/defaultProps.ts b/packages/components/back-top/defaultProps.ts similarity index 100% rename from src/back-top/defaultProps.ts rename to packages/components/back-top/defaultProps.ts diff --git a/src/back-top/index.ts b/packages/components/back-top/index.ts similarity index 100% rename from src/back-top/index.ts rename to packages/components/back-top/index.ts diff --git a/src/back-top/style/css.js b/packages/components/back-top/style/css.js similarity index 100% rename from src/back-top/style/css.js rename to packages/components/back-top/style/css.js diff --git a/packages/components/back-top/style/index.js b/packages/components/back-top/style/index.js new file mode 100644 index 0000000000..fd9ebbe675 --- /dev/null +++ b/packages/components/back-top/style/index.js @@ -0,0 +1 @@ +import '../../../common/style/web/components/back-top/_index.less'; diff --git a/src/back-top/type.ts b/packages/components/back-top/type.ts similarity index 100% rename from src/back-top/type.ts rename to packages/components/back-top/type.ts diff --git a/src/back-top/useScroll.ts b/packages/components/back-top/useScroll.ts similarity index 100% rename from src/back-top/useScroll.ts rename to packages/components/back-top/useScroll.ts diff --git a/src/badge/Badge.tsx b/packages/components/badge/Badge.tsx similarity index 100% rename from src/badge/Badge.tsx rename to packages/components/badge/Badge.tsx diff --git a/src/badge/__tests__/badge.test.tsx b/packages/components/badge/__tests__/badge.test.tsx similarity index 100% rename from src/badge/__tests__/badge.test.tsx rename to packages/components/badge/__tests__/badge.test.tsx diff --git a/src/badge/_example/base.tsx b/packages/components/badge/_example/base.tsx similarity index 100% rename from src/badge/_example/base.tsx rename to packages/components/badge/_example/base.tsx diff --git a/src/badge/_example/color.tsx b/packages/components/badge/_example/color.tsx similarity index 100% rename from src/badge/_example/color.tsx rename to packages/components/badge/_example/color.tsx diff --git a/src/badge/_example/custom.tsx b/packages/components/badge/_example/custom.tsx similarity index 100% rename from src/badge/_example/custom.tsx rename to packages/components/badge/_example/custom.tsx diff --git a/src/badge/_example/number.tsx b/packages/components/badge/_example/number.tsx similarity index 100% rename from src/badge/_example/number.tsx rename to packages/components/badge/_example/number.tsx diff --git a/src/badge/_example/offset.tsx b/packages/components/badge/_example/offset.tsx similarity index 100% rename from src/badge/_example/offset.tsx rename to packages/components/badge/_example/offset.tsx diff --git a/src/badge/_example/shape.tsx b/packages/components/badge/_example/shape.tsx similarity index 100% rename from src/badge/_example/shape.tsx rename to packages/components/badge/_example/shape.tsx diff --git a/src/badge/_example/size.tsx b/packages/components/badge/_example/size.tsx similarity index 100% rename from src/badge/_example/size.tsx rename to packages/components/badge/_example/size.tsx diff --git a/src/badge/_usage/index.jsx b/packages/components/badge/_usage/index.jsx similarity index 100% rename from src/badge/_usage/index.jsx rename to packages/components/badge/_usage/index.jsx diff --git a/src/badge/_usage/props.json b/packages/components/badge/_usage/props.json similarity index 100% rename from src/badge/_usage/props.json rename to packages/components/badge/_usage/props.json diff --git a/src/badge/badge.en-US.md b/packages/components/badge/badge.en-US.md similarity index 87% rename from src/badge/badge.en-US.md rename to packages/components/badge/badge.en-US.md index d0a623df21..7702187ca6 100644 --- a/src/badge/badge.en-US.md +++ b/packages/components/badge/badge.en-US.md @@ -8,10 +8,10 @@ name | type | default | description | required -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式,Typescript:`React.CSSProperties` | N -children | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +children | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N color | String | - | \- | N -content | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -count | TNode | 0 | Typescript:`string \| number \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +content | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +count | TNode | 0 | Typescript:`string \| number \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N dot | Boolean | false | \- | N maxCount | Number | 99 | \- | N offset | Array | - | Typescript:`Array` | N diff --git a/src/badge/badge.md b/packages/components/badge/badge.md similarity index 86% rename from src/badge/badge.md rename to packages/components/badge/badge.md index 211752f705..af36b85af7 100644 --- a/src/badge/badge.md +++ b/packages/components/badge/badge.md @@ -7,10 +7,10 @@ -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式,TS 类型:`React.CSSProperties` | N -children | TNode | - | 徽标内容,同 content。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +children | TNode | - | 徽标内容,同 content。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N color | String | - | 颜色 | N -content | TNode | - | 徽标内容。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -count | TNode | 0 | 徽标右上角内容。可以是数字,也可以是文字。如:'new'/3/99+。TS 类型:`string \| number \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +content | TNode | - | 徽标内容。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +count | TNode | 0 | 徽标右上角内容。可以是数字,也可以是文字。如:'new'/3/99+。TS 类型:`string \| number \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N dot | Boolean | false | 是否为红点 | N maxCount | Number | 99 | 封顶的数字值 | N offset | Array | - | 设置状态点的位置偏移,示例:[-10, 20] 或 ['10em', '8rem']。TS 类型:`Array` | N diff --git a/src/badge/defaultProps.ts b/packages/components/badge/defaultProps.ts similarity index 100% rename from src/badge/defaultProps.ts rename to packages/components/badge/defaultProps.ts diff --git a/src/badge/index.ts b/packages/components/badge/index.ts similarity index 100% rename from src/badge/index.ts rename to packages/components/badge/index.ts diff --git a/src/badge/style/css.js b/packages/components/badge/style/css.js similarity index 100% rename from src/badge/style/css.js rename to packages/components/badge/style/css.js diff --git a/packages/components/badge/style/index.js b/packages/components/badge/style/index.js new file mode 100644 index 0000000000..8fe7a83393 --- /dev/null +++ b/packages/components/badge/style/index.js @@ -0,0 +1 @@ +import '../../../common/style/web/components/badge/_index.less'; diff --git a/src/badge/type.ts b/packages/components/badge/type.ts similarity index 100% rename from src/badge/type.ts rename to packages/components/badge/type.ts diff --git a/src/breadcrumb/Breadcrumb.tsx b/packages/components/breadcrumb/Breadcrumb.tsx similarity index 100% rename from src/breadcrumb/Breadcrumb.tsx rename to packages/components/breadcrumb/Breadcrumb.tsx diff --git a/src/breadcrumb/BreadcrumbContext.tsx b/packages/components/breadcrumb/BreadcrumbContext.tsx similarity index 100% rename from src/breadcrumb/BreadcrumbContext.tsx rename to packages/components/breadcrumb/BreadcrumbContext.tsx diff --git a/src/breadcrumb/BreadcrumbItem.tsx b/packages/components/breadcrumb/BreadcrumbItem.tsx similarity index 98% rename from src/breadcrumb/BreadcrumbItem.tsx rename to packages/components/breadcrumb/BreadcrumbItem.tsx index 26bb5ea55d..0004dc1783 100644 --- a/src/breadcrumb/BreadcrumbItem.tsx +++ b/packages/components/breadcrumb/BreadcrumbItem.tsx @@ -1,7 +1,7 @@ import React, { forwardRef, useContext, useEffect, useMemo, useRef, useState } from 'react'; import classNames from 'classnames'; import { ChevronRightIcon as TdChevronRightIcon } from 'tdesign-icons-react'; -import isFunction from 'lodash/isFunction'; +import { isFunction } from 'lodash-es'; import useConfig from '../hooks/useConfig'; import useGlobalIcon from '../hooks/useGlobalIcon'; import useCommonClassName from '../hooks/useCommonClassName'; diff --git a/src/breadcrumb/BreadcrumbProps.ts b/packages/components/breadcrumb/BreadcrumbProps.ts similarity index 100% rename from src/breadcrumb/BreadcrumbProps.ts rename to packages/components/breadcrumb/BreadcrumbProps.ts diff --git a/src/breadcrumb/__tests__/breadcrumb.test.tsx b/packages/components/breadcrumb/__tests__/breadcrumb.test.tsx similarity index 100% rename from src/breadcrumb/__tests__/breadcrumb.test.tsx rename to packages/components/breadcrumb/__tests__/breadcrumb.test.tsx diff --git a/src/breadcrumb/_example/base.tsx b/packages/components/breadcrumb/_example/base.tsx similarity index 100% rename from src/breadcrumb/_example/base.tsx rename to packages/components/breadcrumb/_example/base.tsx diff --git a/src/breadcrumb/_example/custom.tsx b/packages/components/breadcrumb/_example/custom.tsx similarity index 100% rename from src/breadcrumb/_example/custom.tsx rename to packages/components/breadcrumb/_example/custom.tsx diff --git a/src/breadcrumb/_example/href.tsx b/packages/components/breadcrumb/_example/href.tsx similarity index 100% rename from src/breadcrumb/_example/href.tsx rename to packages/components/breadcrumb/_example/href.tsx diff --git a/src/breadcrumb/_example/icon.tsx b/packages/components/breadcrumb/_example/icon.tsx similarity index 100% rename from src/breadcrumb/_example/icon.tsx rename to packages/components/breadcrumb/_example/icon.tsx diff --git a/src/breadcrumb/_example/options.tsx b/packages/components/breadcrumb/_example/options.tsx similarity index 100% rename from src/breadcrumb/_example/options.tsx rename to packages/components/breadcrumb/_example/options.tsx diff --git a/src/breadcrumb/_example/to.tsx b/packages/components/breadcrumb/_example/to.tsx similarity index 100% rename from src/breadcrumb/_example/to.tsx rename to packages/components/breadcrumb/_example/to.tsx diff --git a/src/breadcrumb/_example/width.tsx b/packages/components/breadcrumb/_example/width.tsx similarity index 100% rename from src/breadcrumb/_example/width.tsx rename to packages/components/breadcrumb/_example/width.tsx diff --git a/src/breadcrumb/_usage/props.json b/packages/components/breadcrumb/_usage/props.json similarity index 100% rename from src/breadcrumb/_usage/props.json rename to packages/components/breadcrumb/_usage/props.json diff --git a/src/breadcrumb/breadcrumb.en-US.md b/packages/components/breadcrumb/breadcrumb.en-US.md similarity index 82% rename from src/breadcrumb/breadcrumb.en-US.md rename to packages/components/breadcrumb/breadcrumb.en-US.md index 9e3d27164c..f4e934f9e9 100644 --- a/src/breadcrumb/breadcrumb.en-US.md +++ b/packages/components/breadcrumb/breadcrumb.en-US.md @@ -10,7 +10,7 @@ className | String | - | className of component | N style | Object | - | CSS(Cascading Style Sheets),Typescript:`React.CSSProperties` | N maxItemWidth | String | undefined | \- | N options | Array | - | Typescript:`Array` | N -separator | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +separator | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N ### BreadcrumbItem Props @@ -19,15 +19,15 @@ name | type | default | description | required -- | -- | -- | -- | -- className | String | - | className of component | N style | Object | - | CSS(Cascading Style Sheets),Typescript:`React.CSSProperties` | N -children | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -content | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +children | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +content | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N disabled | Boolean | - | \- | N href | String | - | \- | N -icon | TElement | - | prefix icon in breadcrumb item。Typescript:`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +icon | TElement | - | prefix icon in breadcrumb item。Typescript:`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N maxWidth | String | undefined | \- | N replace | Boolean | false | \- | N router | Object | - | Typescript:`any` | N target | String | _self | options: _blank/_self/_parent/_top | N -to | String / Object | - | Typescript:`string \| Route` `interface Route { path?: string; name?: string; hash?: string; query?: RouteData; params?: RouteData }` `type RouteData = { [key: string]: string \| string[] }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/breadcrumb/type.ts) | N -tooltipProps | Object | - | Typescript:`TooltipProps`,[Tooltip API Documents](./tooltip?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/breadcrumb/type.ts) | N +to | String / Object | - | Typescript:`string \| Route` `interface Route { path?: string; name?: string; hash?: string; query?: RouteData; params?: RouteData }` `type RouteData = { [key: string]: string \| string[] }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/breadcrumb/type.ts) | N +tooltipProps | Object | - | Typescript:`TooltipProps`,[Tooltip API Documents](./tooltip?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/breadcrumb/type.ts) | N onClick | Function | | Typescript:`(e: MouseEvent) => void`trigger on click | N diff --git a/src/breadcrumb/breadcrumb.md b/packages/components/breadcrumb/breadcrumb.md similarity index 85% rename from src/breadcrumb/breadcrumb.md rename to packages/components/breadcrumb/breadcrumb.md index 0c61f4c680..13d5513a8b 100644 --- a/src/breadcrumb/breadcrumb.md +++ b/packages/components/breadcrumb/breadcrumb.md @@ -10,7 +10,7 @@ className | String | - | 类名 | N style | Object | - | 样式,TS 类型:`React.CSSProperties` | N maxItemWidth | String | undefined | 单项最大宽度,超出后会以省略号形式呈现 | N options | Array | - | 面包屑项,功能同 BreadcrumbItem。TS 类型:`Array` | N -separator | TNode | - | 自定义分隔符。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +separator | TNode | - | 自定义分隔符。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N ### BreadcrumbItem Props @@ -19,15 +19,15 @@ separator | TNode | - | 自定义分隔符。TS 类型:`string \| TNode`。[ -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式,TS 类型:`React.CSSProperties` | N -children | TNode | - | 子元素,同 content。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -content | TNode | - | 子元素。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +children | TNode | - | 子元素,同 content。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +content | TNode | - | 子元素。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N disabled | Boolean | - | 是否禁用当前项点击 | N href | String | - | 跳转链接 | N -icon | TElement | - | 面板屑项内的前置图标。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +icon | TElement | - | 面板屑项内的前置图标。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N maxWidth | String | undefined | 最大宽度,超出后会以省略号形式呈现。优先级高于 Breadcrumb 中的 maxItemWidth | N replace | Boolean | false | 路由跳转是否采用覆盖的方式(覆盖后将没有浏览器历史记录) | N router | Object | - | 路由对象。如果项目存在 Router,则默认使用 Router。TS 类型:`any` | N target | String | _self | 链接或路由跳转方式。可选项:_blank/_self/_parent/_top | N -to | String / Object | - | 路由跳转目标,当且仅当 Router 存在时,该 API 有效。TS 类型:`string \| Route` `interface Route { path?: string; name?: string; hash?: string; query?: RouteData; params?: RouteData }` `type RouteData = { [key: string]: string \| string[] }`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/breadcrumb/type.ts) | N -tooltipProps | Object | - | 透传提示组件属性。TS 类型:`TooltipProps`,[Tooltip API Documents](./tooltip?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/breadcrumb/type.ts) | N +to | String / Object | - | 路由跳转目标,当且仅当 Router 存在时,该 API 有效。TS 类型:`string \| Route` `interface Route { path?: string; name?: string; hash?: string; query?: RouteData; params?: RouteData }` `type RouteData = { [key: string]: string \| string[] }`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/breadcrumb/type.ts) | N +tooltipProps | Object | - | 透传提示组件属性。TS 类型:`TooltipProps`,[Tooltip API Documents](./tooltip?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/breadcrumb/type.ts) | N onClick | Function | | TS 类型:`(e: MouseEvent) => void`点击时触发 | N diff --git a/src/breadcrumb/defaultProps.ts b/packages/components/breadcrumb/defaultProps.ts similarity index 100% rename from src/breadcrumb/defaultProps.ts rename to packages/components/breadcrumb/defaultProps.ts diff --git a/src/breadcrumb/index.ts b/packages/components/breadcrumb/index.ts similarity index 100% rename from src/breadcrumb/index.ts rename to packages/components/breadcrumb/index.ts diff --git a/src/breadcrumb/style/css.js b/packages/components/breadcrumb/style/css.js similarity index 100% rename from src/breadcrumb/style/css.js rename to packages/components/breadcrumb/style/css.js diff --git a/packages/components/breadcrumb/style/index.js b/packages/components/breadcrumb/style/index.js new file mode 100644 index 0000000000..c6e2765300 --- /dev/null +++ b/packages/components/breadcrumb/style/index.js @@ -0,0 +1 @@ +import '../../../common/style/web/components/breadcrumb/_index.less'; diff --git a/src/breadcrumb/type.ts b/packages/components/breadcrumb/type.ts similarity index 100% rename from src/breadcrumb/type.ts rename to packages/components/breadcrumb/type.ts diff --git a/src/button/Button.tsx b/packages/components/button/Button.tsx similarity index 100% rename from src/button/Button.tsx rename to packages/components/button/Button.tsx diff --git a/src/button/__tests__/__snapshots__/vitest-button.test.jsx.snap b/packages/components/button/__tests__/__snapshots__/vitest-button.test.jsx.snap similarity index 100% rename from src/button/__tests__/__snapshots__/vitest-button.test.jsx.snap rename to packages/components/button/__tests__/__snapshots__/vitest-button.test.jsx.snap diff --git a/src/button/__tests__/vitest-button.test.jsx b/packages/components/button/__tests__/vitest-button.test.jsx similarity index 100% rename from src/button/__tests__/vitest-button.test.jsx rename to packages/components/button/__tests__/vitest-button.test.jsx diff --git a/src/button/_example/base.tsx b/packages/components/button/_example/base.tsx similarity index 100% rename from src/button/_example/base.tsx rename to packages/components/button/_example/base.tsx diff --git a/src/button/_example/block.tsx b/packages/components/button/_example/block.tsx similarity index 100% rename from src/button/_example/block.tsx rename to packages/components/button/_example/block.tsx diff --git a/src/button/_example/custom-element.tsx b/packages/components/button/_example/custom-element.tsx similarity index 100% rename from src/button/_example/custom-element.tsx rename to packages/components/button/_example/custom-element.tsx diff --git a/src/button/_example/ghost.tsx b/packages/components/button/_example/ghost.tsx similarity index 100% rename from src/button/_example/ghost.tsx rename to packages/components/button/_example/ghost.tsx diff --git a/src/button/_example/icon.tsx b/packages/components/button/_example/icon.tsx similarity index 100% rename from src/button/_example/icon.tsx rename to packages/components/button/_example/icon.tsx diff --git a/src/button/_example/shape.tsx b/packages/components/button/_example/shape.tsx similarity index 100% rename from src/button/_example/shape.tsx rename to packages/components/button/_example/shape.tsx diff --git a/src/button/_example/size.tsx b/packages/components/button/_example/size.tsx similarity index 100% rename from src/button/_example/size.tsx rename to packages/components/button/_example/size.tsx diff --git a/src/button/_example/status.tsx b/packages/components/button/_example/status.tsx similarity index 100% rename from src/button/_example/status.tsx rename to packages/components/button/_example/status.tsx diff --git a/src/button/_example/theme.tsx b/packages/components/button/_example/theme.tsx similarity index 100% rename from src/button/_example/theme.tsx rename to packages/components/button/_example/theme.tsx diff --git a/src/button/_usage/index.jsx b/packages/components/button/_usage/index.jsx similarity index 100% rename from src/button/_usage/index.jsx rename to packages/components/button/_usage/index.jsx diff --git a/src/button/_usage/props.json b/packages/components/button/_usage/props.json similarity index 100% rename from src/button/_usage/props.json rename to packages/components/button/_usage/props.json diff --git a/src/button/button.en-US.md b/packages/components/button/button.en-US.md similarity index 81% rename from src/button/button.en-US.md rename to packages/components/button/button.en-US.md index 1e1bf0193a..c417d90bbb 100644 --- a/src/button/button.en-US.md +++ b/packages/components/button/button.en-US.md @@ -8,17 +8,17 @@ name | type | default | description | required className | String | - | 类名 | N style | Object | - | 样式,Typescript:`React.CSSProperties` | N block | Boolean | false | make button to be a block-level element | N -children | TNode | - | button's children elements。Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -content | TNode | - | button's children elements。Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +children | TNode | - | button's children elements。Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +content | TNode | - | button's children elements。Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N disabled | Boolean | false | disable the button, make it can not be clicked | N form | String | undefined | native `form` attribute,which supports triggering events for a form with a specified id through the use of the form attribute. | N ghost | Boolean | false | make background-color to be transparent | N href | String | - | \- | N -icon | TElement | - | use it to set left icon in button。Typescript:`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +icon | TElement | - | use it to set left icon in button。Typescript:`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N loading | Boolean | false | set button to be loading state | N shape | String | rectangle | button shape。options:rectangle/square/round/circle | N -size | String | medium | a button has three size。options:small/medium/large。Typescript:`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -suffix | TElement | - | Typescript:`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +size | String | medium | a button has three size。options:small/medium/large。Typescript:`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +suffix | TElement | - | Typescript:`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N tag | String | - | HTML Tag Element。options:button/a/div | N theme | String | - | button theme。options:default/primary/danger/warning/success | N type | String | button | type of button element in html。options:submit/reset/button | N diff --git a/src/button/button.md b/packages/components/button/button.md similarity index 87% rename from src/button/button.md rename to packages/components/button/button.md index 80666d407b..75ff9210b7 100644 --- a/src/button/button.md +++ b/packages/components/button/button.md @@ -8,17 +8,17 @@ className | String | - | 类名 | N style | Object | - | 样式,TS 类型:`React.CSSProperties` | N block | Boolean | false | 是否为块级元素 | N -children | TNode | - | 按钮内容,同 content。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -content | TNode | - | 按钮内容。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +children | TNode | - | 按钮内容,同 content。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +content | TNode | - | 按钮内容。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N disabled | Boolean | false | 禁用状态 | N form | String | undefined | 原生的form属性,支持用于通过 form 属性触发对应 id 的 form 的表单事件 | N ghost | Boolean | false | 是否为幽灵按钮(镂空按钮) | N href | String | - | 跳转地址。href 存在时,按钮标签默认使用 `` 渲染;如果指定了 `tag` 则使用指定的标签渲染 | N -icon | TElement | - | 按钮内部图标,可完全自定义。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +icon | TElement | - | 按钮内部图标,可完全自定义。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N loading | Boolean | false | 是否显示为加载状态 | N shape | String | rectangle | 按钮形状,有 4 种:长方形、正方形、圆角长方形、圆形。可选项:rectangle/square/round/circle | N -size | String | medium | 组件尺寸。可选项:small/medium/large。TS 类型:`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -suffix | TElement | - | 右侧内容,可用于定义右侧图标。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +size | String | medium | 组件尺寸。可选项:small/medium/large。TS 类型:`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +suffix | TElement | - | 右侧内容,可用于定义右侧图标。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N tag | String | - | 渲染按钮的 HTML 标签,默认使用标签 `` 渲染,可以自定义为 `` `` 等。透传全部 HTML 属性,如:`href/target/data-*` 等。⚠️ 禁用按钮 ``无法显示 Popup 浮层信息,可通过修改 `tag=div` 解决这个问题。可选项:button/a/div | N theme | String | - | 组件风格,依次为默认色、品牌色、危险色、警告色、成功色。可选项:default/primary/danger/warning/success | N type | String | button | 按钮类型。可选项:submit/reset/button | N diff --git a/src/button/defaultProps.ts b/packages/components/button/defaultProps.ts similarity index 100% rename from src/button/defaultProps.ts rename to packages/components/button/defaultProps.ts diff --git a/src/button/index.ts b/packages/components/button/index.ts similarity index 100% rename from src/button/index.ts rename to packages/components/button/index.ts diff --git a/src/button/style/css.js b/packages/components/button/style/css.js similarity index 100% rename from src/button/style/css.js rename to packages/components/button/style/css.js diff --git a/packages/components/button/style/index.js b/packages/components/button/style/index.js new file mode 100644 index 0000000000..b4c6a862ca --- /dev/null +++ b/packages/components/button/style/index.js @@ -0,0 +1 @@ +import '../../../common/style/web/components/button/_index.less'; diff --git a/src/button/type.ts b/packages/components/button/type.ts similarity index 100% rename from src/button/type.ts rename to packages/components/button/type.ts diff --git a/src/calendar/Calendar.tsx b/packages/components/calendar/Calendar.tsx similarity index 100% rename from src/calendar/Calendar.tsx rename to packages/components/calendar/Calendar.tsx diff --git a/src/calendar/CalendarCellComp.tsx b/packages/components/calendar/CalendarCellComp.tsx similarity index 100% rename from src/calendar/CalendarCellComp.tsx rename to packages/components/calendar/CalendarCellComp.tsx diff --git a/src/calendar/__tests__/calendar.test.tsx b/packages/components/calendar/__tests__/calendar.test.tsx similarity index 100% rename from src/calendar/__tests__/calendar.test.tsx rename to packages/components/calendar/__tests__/calendar.test.tsx diff --git a/src/calendar/_example/base.tsx b/packages/components/calendar/_example/base.tsx similarity index 100% rename from src/calendar/_example/base.tsx rename to packages/components/calendar/_example/base.tsx diff --git a/src/calendar/_example/card.tsx b/packages/components/calendar/_example/card.tsx similarity index 100% rename from src/calendar/_example/card.tsx rename to packages/components/calendar/_example/card.tsx diff --git a/src/calendar/_example/cell-append.tsx b/packages/components/calendar/_example/cell-append.tsx similarity index 100% rename from src/calendar/_example/cell-append.tsx rename to packages/components/calendar/_example/cell-append.tsx diff --git a/src/calendar/_example/cell.tsx b/packages/components/calendar/_example/cell.tsx similarity index 100% rename from src/calendar/_example/cell.tsx rename to packages/components/calendar/_example/cell.tsx diff --git a/src/calendar/_example/controller-config.tsx b/packages/components/calendar/_example/controller-config.tsx similarity index 100% rename from src/calendar/_example/controller-config.tsx rename to packages/components/calendar/_example/controller-config.tsx diff --git a/src/calendar/_example/events.tsx b/packages/components/calendar/_example/events.tsx similarity index 100% rename from src/calendar/_example/events.tsx rename to packages/components/calendar/_example/events.tsx diff --git a/src/calendar/_example/filter.tsx b/packages/components/calendar/_example/filter.tsx similarity index 100% rename from src/calendar/_example/filter.tsx rename to packages/components/calendar/_example/filter.tsx diff --git a/src/calendar/_example/first-day-of-week.tsx b/packages/components/calendar/_example/first-day-of-week.tsx similarity index 100% rename from src/calendar/_example/first-day-of-week.tsx rename to packages/components/calendar/_example/first-day-of-week.tsx diff --git a/src/calendar/_example/head.tsx b/packages/components/calendar/_example/head.tsx similarity index 100% rename from src/calendar/_example/head.tsx rename to packages/components/calendar/_example/head.tsx diff --git a/src/calendar/_example/mode.tsx b/packages/components/calendar/_example/mode.tsx similarity index 100% rename from src/calendar/_example/mode.tsx rename to packages/components/calendar/_example/mode.tsx diff --git a/src/calendar/_example/range.tsx b/packages/components/calendar/_example/range.tsx similarity index 100% rename from src/calendar/_example/range.tsx rename to packages/components/calendar/_example/range.tsx diff --git a/src/calendar/_example/slot-props-api.tsx b/packages/components/calendar/_example/slot-props-api.tsx similarity index 100% rename from src/calendar/_example/slot-props-api.tsx rename to packages/components/calendar/_example/slot-props-api.tsx diff --git a/src/calendar/_example/value.tsx b/packages/components/calendar/_example/value.tsx similarity index 100% rename from src/calendar/_example/value.tsx rename to packages/components/calendar/_example/value.tsx diff --git a/src/calendar/_example/week.tsx b/packages/components/calendar/_example/week.tsx similarity index 100% rename from src/calendar/_example/week.tsx rename to packages/components/calendar/_example/week.tsx diff --git a/src/calendar/_usage/index.jsx b/packages/components/calendar/_usage/index.jsx similarity index 100% rename from src/calendar/_usage/index.jsx rename to packages/components/calendar/_usage/index.jsx diff --git a/src/calendar/_usage/props.json b/packages/components/calendar/_usage/props.json similarity index 100% rename from src/calendar/_usage/props.json rename to packages/components/calendar/_usage/props.json diff --git a/src/calendar/_util.ts b/packages/components/calendar/_util.ts similarity index 100% rename from src/calendar/_util.ts rename to packages/components/calendar/_util.ts diff --git a/src/calendar/calendar.en-US.md b/packages/components/calendar/calendar.en-US.md similarity index 80% rename from src/calendar/calendar.en-US.md rename to packages/components/calendar/calendar.en-US.md index 48390f0b21..4a2f909f4c 100644 --- a/src/calendar/calendar.en-US.md +++ b/packages/components/calendar/calendar.en-US.md @@ -8,26 +8,26 @@ name | type | default | description | required -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式,Typescript:`React.CSSProperties` | N -cell | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -cellAppend | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +cell | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +cellAppend | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N controllerConfig | Boolean / Object | - | Typescript:`boolean \| CalendarController` | N fillWithZero | Boolean | true | \- | N firstDayOfWeek | Number | 1 | options:1/2/3/4/5/6/7 | N format | String | 'YYYY-MM-DD' | \- | N -head | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +head | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N isShowWeekendDefault | Boolean | true | \- | N mode | String | month | options:month/year | N month | String / Number | - | \- | N preventCellContextmenu | Boolean | false | \- | N range | Array | - | Typescript:`Array` | N theme | String | full | options:full/card | N -value | String / Date | - | Typescript:`CalendarValue` `type CalendarValue = string \| Date`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/calendar/type.ts) | N -week | TNode | - | Typescript:`Array \| TNode` `interface CalendarWeek { day: WeekDay }` `type WeekDay = 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/calendar/type.ts) | N +value | String / Date | - | Typescript:`CalendarValue` `type CalendarValue = string \| Date`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/calendar/type.ts) | N +week | TNode | - | Typescript:`Array \| TNode` `interface CalendarWeek { day: WeekDay }` `type WeekDay = 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/calendar/type.ts) | N year | String / Number | - | \- | N onCellClick | Function | | Typescript:`(options: { cell: CalendarCell; e: MouseEvent }) => void` | N onCellDoubleClick | Function | | Typescript:`(options: { cell: CalendarCell; e: MouseEvent }) => void` | N onCellRightClick | Function | | Typescript:`(options: { cell: CalendarCell; e: MouseEvent }) => void` | N -onControllerChange | Function | | Typescript:`(options: ControllerOptions) => void`[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/calendar/type.ts)。`interface ControllerOptions { filterDate: Date; formattedFilterDate: string; mode: string; isShowWeekend: boolean }` | N +onControllerChange | Function | | Typescript:`(options: ControllerOptions) => void`[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/calendar/type.ts)。`interface ControllerOptions { filterDate: Date; formattedFilterDate: string; mode: string; isShowWeekend: boolean }` | N onMonthChange | Function | | Typescript:`(options: { month: string; year: string }) => void` | N ### CalendarController @@ -36,10 +36,10 @@ name | type | default | description | required -- | -- | -- | -- | -- current | Object | - | Typescript:`{ visible?: boolean; currentDayButtonProps?: ButtonProps; currentMonthButtonProps?: ButtonProps }` | N disabled | Boolean | false | \- | N -mode | Object | - | Typescript:`{ visible?: boolean; radioGroupProps?: RadioGroupProps }`,[Radio API Documents](./radio?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/calendar/type.ts) | N +mode | Object | - | Typescript:`{ visible?: boolean; radioGroupProps?: RadioGroupProps }`,[Radio API Documents](./radio?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/calendar/type.ts) | N month | Object | - | Typescript:`{ visible?: boolean; selectProps?: SelectProps }` | N -weekend | Object | - | Typescript:`{ visible?: boolean; showWeekendButtonProps?: CheckTagProps; hideWeekendButtonProps?: CheckTagProps }`,[Tag API Documents](./tag?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/calendar/type.ts) | N -year | Object | - | Typescript:`{ visible?: boolean; selectProps?: SelectProps }`,[Select API Documents](./select?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/calendar/type.ts) | N +weekend | Object | - | Typescript:`{ visible?: boolean; showWeekendButtonProps?: CheckTagProps; hideWeekendButtonProps?: CheckTagProps }`,[Tag API Documents](./tag?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/calendar/type.ts) | N +year | Object | - | Typescript:`{ visible?: boolean; selectProps?: SelectProps }`,[Select API Documents](./select?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/calendar/type.ts) | N ### CalendarCell diff --git a/src/calendar/calendar.md b/packages/components/calendar/calendar.md similarity index 87% rename from src/calendar/calendar.md rename to packages/components/calendar/calendar.md index 44a696a388..ace3ec19bc 100644 --- a/src/calendar/calendar.md +++ b/packages/components/calendar/calendar.md @@ -7,26 +7,26 @@ -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式,TS 类型:`React.CSSProperties` | N -cell | TNode | - | 单元格插槽。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -cellAppend | TNode | - | 单元格插槽,在原来的内容之后追加。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +cell | TNode | - | 单元格插槽。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +cellAppend | TNode | - | 单元格插槽,在原来的内容之后追加。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N controllerConfig | Boolean / Object | - | 右上角控制器配置。值为 false 则表示不显示控制器,值为 true 则显示控制器默认配置,值类型为 CalendarController 则显示为自定义控制器配置。TS 类型:`boolean \| CalendarController` | N fillWithZero | Boolean | true | 小于 10 的日期,是否使用 '0' 填充。默认表现为 `01` `02`,值为 false 表现为 `1` `2` `9` | N firstDayOfWeek | Number | 1 | 第一天从星期几开始,仅在日历展示维度为月份时(mode = month)有效。默认为 1。可选项:1/2/3/4/5/6/7 | N format | String | 'YYYY-MM-DD' | 用于格式化日期,决定事件参数 formattedFilterDate 的输出值。[详细文档](https://day.js.org/docs/en/display/format) | N -head | TNode | - | 头部插槽(左上角处,默认不显示任何内容)。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +head | TNode | - | 头部插槽(左上角处,默认不显示任何内容)。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N isShowWeekendDefault | Boolean | true | 默认是否显示周末 | N mode | String | month | 日历展示维度。可选项:month/year | N month | String / Number | - | 控制当前面板展示月份,优先级高于 `controllerConfig.month` | N preventCellContextmenu | Boolean | false | 是否禁用单元格右键默认系统菜单 | N range | Array | - | 用于设置日历的年月份显示范围,[范围开始,范围结束]。TS 类型:`Array` | N theme | String | full | 日历风格。可选项:full/card | N -value | String / Date | - | 当前高亮的日期。TS 类型:`CalendarValue` `type CalendarValue = string \| Date`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/calendar/type.ts) | N -week | TNode | - | 用于自定义日历星期呈现方式。CalendarWeek.day 表示当前是星期几。示例一:['周一', '周二', '周三', '周四', '周五', '星期六', '星期天']。示例二:`({ day }) => '周' + day`。TS 类型:`Array \| TNode` `interface CalendarWeek { day: WeekDay }` `type WeekDay = 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/calendar/type.ts) | N +value | String / Date | - | 当前高亮的日期。TS 类型:`CalendarValue` `type CalendarValue = string \| Date`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/calendar/type.ts) | N +week | TNode | - | 用于自定义日历星期呈现方式。CalendarWeek.day 表示当前是星期几。示例一:['周一', '周二', '周三', '周四', '周五', '星期六', '星期天']。示例二:`({ day }) => '周' + day`。TS 类型:`Array \| TNode` `interface CalendarWeek { day: WeekDay }` `type WeekDay = 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/calendar/type.ts) | N year | String / Number | - | 控制当前面板展示年份,优先级高于 `controllerConfig.year` | N onCellClick | Function | | TS 类型:`(options: { cell: CalendarCell; e: MouseEvent }) => void`日历单元格点击时触发 | N onCellDoubleClick | Function | | TS 类型:`(options: { cell: CalendarCell; e: MouseEvent }) => void`日历单元格双击时触发 | N onCellRightClick | Function | | TS 类型:`(options: { cell: CalendarCell; e: MouseEvent }) => void`日历单元格右击时触发 | N -onControllerChange | Function | | TS 类型:`(options: ControllerOptions) => void`右上角控件组选中值有变化的时候触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/calendar/type.ts)。`interface ControllerOptions { filterDate: Date; formattedFilterDate: string; mode: string; isShowWeekend: boolean }` | N +onControllerChange | Function | | TS 类型:`(options: ControllerOptions) => void`右上角控件组选中值有变化的时候触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/calendar/type.ts)。`interface ControllerOptions { filterDate: Date; formattedFilterDate: string; mode: string; isShowWeekend: boolean }` | N onMonthChange | Function | | TS 类型:`(options: { month: string; year: string }) => void`月份切换时触发 | N ### CalendarController @@ -35,10 +35,10 @@ onMonthChange | Function | | TS 类型:`(options: { month: string; year: stri -- | -- | -- | -- | -- current | Object | - | “今天(本月)”按钮控制器。TS 类型:`{ visible?: boolean; currentDayButtonProps?: ButtonProps; currentMonthButtonProps?: ButtonProps }` | N disabled | Boolean | false | 是否禁用右上角控制器 | N -mode | Object | - | 日历展示维度控制器。TS 类型:`{ visible?: boolean; radioGroupProps?: RadioGroupProps }`,[Radio API Documents](./radio?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/calendar/type.ts) | N +mode | Object | - | 日历展示维度控制器。TS 类型:`{ visible?: boolean; radioGroupProps?: RadioGroupProps }`,[Radio API Documents](./radio?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/calendar/type.ts) | N month | Object | - | 日历月份控制器。TS 类型:`{ visible?: boolean; selectProps?: SelectProps }` | N -weekend | Object | - | 隐藏/显示周末控制器。TS 类型:`{ visible?: boolean; showWeekendButtonProps?: CheckTagProps; hideWeekendButtonProps?: CheckTagProps }`,[Tag API Documents](./tag?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/calendar/type.ts) | N -year | Object | - | 日历年份控制器。TS 类型:`{ visible?: boolean; selectProps?: SelectProps }`,[Select API Documents](./select?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/calendar/type.ts) | N +weekend | Object | - | 隐藏/显示周末控制器。TS 类型:`{ visible?: boolean; showWeekendButtonProps?: CheckTagProps; hideWeekendButtonProps?: CheckTagProps }`,[Tag API Documents](./tag?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/calendar/type.ts) | N +year | Object | - | 日历年份控制器。TS 类型:`{ visible?: boolean; selectProps?: SelectProps }`,[Select API Documents](./select?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/calendar/type.ts) | N ### CalendarCell diff --git a/src/calendar/defaultProps.ts b/packages/components/calendar/defaultProps.ts similarity index 100% rename from src/calendar/defaultProps.ts rename to packages/components/calendar/defaultProps.ts diff --git a/src/calendar/hooks/usePrefixClass.ts b/packages/components/calendar/hooks/usePrefixClass.ts similarity index 100% rename from src/calendar/hooks/usePrefixClass.ts rename to packages/components/calendar/hooks/usePrefixClass.ts diff --git a/src/calendar/index.ts b/packages/components/calendar/index.ts similarity index 100% rename from src/calendar/index.ts rename to packages/components/calendar/index.ts diff --git a/src/calendar/style/css.js b/packages/components/calendar/style/css.js similarity index 100% rename from src/calendar/style/css.js rename to packages/components/calendar/style/css.js diff --git a/packages/components/calendar/style/index.js b/packages/components/calendar/style/index.js new file mode 100644 index 0000000000..513875a454 --- /dev/null +++ b/packages/components/calendar/style/index.js @@ -0,0 +1 @@ +import '../../../common/style/web/components/calendar/_index.less'; diff --git a/src/calendar/type.ts b/packages/components/calendar/type.ts similarity index 100% rename from src/calendar/type.ts rename to packages/components/calendar/type.ts diff --git a/src/card/Card.tsx b/packages/components/card/Card.tsx similarity index 98% rename from src/card/Card.tsx rename to packages/components/card/Card.tsx index dee578d108..c199719cb6 100644 --- a/src/card/Card.tsx +++ b/packages/components/card/Card.tsx @@ -143,7 +143,7 @@ const Card = forwardRef((props, ref) => { let childrenNode: React.ReactNode = null; if (!Reflect.has(props, 'loading')) { - childrenNode = React.cloneElement(card, { style }); + childrenNode = card; } else if (React.isValidElement(loading)) { childrenNode = React.cloneElement(loading, null, card); } else { diff --git a/src/card/__tests__/card.test.tsx b/packages/components/card/__tests__/card.test.tsx similarity index 100% rename from src/card/__tests__/card.test.tsx rename to packages/components/card/__tests__/card.test.tsx diff --git a/src/card/_example/base.tsx b/packages/components/card/_example/base.tsx similarity index 100% rename from src/card/_example/base.tsx rename to packages/components/card/_example/base.tsx diff --git a/src/card/_example/bordered-none.tsx b/packages/components/card/_example/bordered-none.tsx similarity index 100% rename from src/card/_example/bordered-none.tsx rename to packages/components/card/_example/bordered-none.tsx diff --git a/src/card/_example/bordered.tsx b/packages/components/card/_example/bordered.tsx similarity index 100% rename from src/card/_example/bordered.tsx rename to packages/components/card/_example/bordered.tsx diff --git a/src/card/_example/custom-loading-props.tsx b/packages/components/card/_example/custom-loading-props.tsx similarity index 100% rename from src/card/_example/custom-loading-props.tsx rename to packages/components/card/_example/custom-loading-props.tsx diff --git a/src/card/_example/footer-actions.tsx b/packages/components/card/_example/footer-actions.tsx similarity index 100% rename from src/card/_example/footer-actions.tsx rename to packages/components/card/_example/footer-actions.tsx diff --git a/src/card/_example/footer-content-actions.tsx b/packages/components/card/_example/footer-content-actions.tsx similarity index 100% rename from src/card/_example/footer-content-actions.tsx rename to packages/components/card/_example/footer-content-actions.tsx diff --git a/src/card/_example/footer-content.tsx b/packages/components/card/_example/footer-content.tsx similarity index 100% rename from src/card/_example/footer-content.tsx rename to packages/components/card/_example/footer-content.tsx diff --git a/src/card/_example/footer.tsx b/packages/components/card/_example/footer.tsx similarity index 100% rename from src/card/_example/footer.tsx rename to packages/components/card/_example/footer.tsx diff --git a/src/card/_example/header-all-props.tsx b/packages/components/card/_example/header-all-props.tsx similarity index 100% rename from src/card/_example/header-all-props.tsx rename to packages/components/card/_example/header-all-props.tsx diff --git a/src/card/_example/header-bordered.tsx b/packages/components/card/_example/header-bordered.tsx similarity index 100% rename from src/card/_example/header-bordered.tsx rename to packages/components/card/_example/header-bordered.tsx diff --git a/src/card/_example/header-description.tsx b/packages/components/card/_example/header-description.tsx similarity index 100% rename from src/card/_example/header-description.tsx rename to packages/components/card/_example/header-description.tsx diff --git a/src/card/_example/header-footer-actions.tsx b/packages/components/card/_example/header-footer-actions.tsx similarity index 100% rename from src/card/_example/header-footer-actions.tsx rename to packages/components/card/_example/header-footer-actions.tsx diff --git a/src/card/_example/header-subtitle-footer-actions.tsx b/packages/components/card/_example/header-subtitle-footer-actions.tsx similarity index 100% rename from src/card/_example/header-subtitle-footer-actions.tsx rename to packages/components/card/_example/header-subtitle-footer-actions.tsx diff --git a/src/card/_example/header-subtitle.tsx b/packages/components/card/_example/header-subtitle.tsx similarity index 100% rename from src/card/_example/header-subtitle.tsx rename to packages/components/card/_example/header-subtitle.tsx diff --git a/src/card/_example/header.tsx b/packages/components/card/_example/header.tsx similarity index 100% rename from src/card/_example/header.tsx rename to packages/components/card/_example/header.tsx diff --git a/src/card/_usage/index.jsx b/packages/components/card/_usage/index.jsx similarity index 100% rename from src/card/_usage/index.jsx rename to packages/components/card/_usage/index.jsx diff --git a/src/card/_usage/props.json b/packages/components/card/_usage/props.json similarity index 100% rename from src/card/_usage/props.json rename to packages/components/card/_usage/props.json diff --git a/src/card/card.en-US.md b/packages/components/card/card.en-US.md similarity index 79% rename from src/card/card.en-US.md rename to packages/components/card/card.en-US.md index 15793dff1f..da27085cb2 100644 --- a/src/card/card.en-US.md +++ b/packages/components/card/card.en-US.md @@ -7,22 +7,22 @@ name | type | default | description | required -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式,Typescript:`React.CSSProperties` | N -actions | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -avatar | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +actions | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +avatar | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N bordered | Boolean | true | \- | N -children | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -content | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -cover | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -description | TNode | - | card description。Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -footer | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -header | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +children | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +content | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +cover | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +description | TNode | - | card description。Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +footer | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +header | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N headerBordered | Boolean | false | \- | N hoverShadow | Boolean | false | \- | N -loading | TNode | false | Typescript:`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -loadingProps | Object | - | Loading Component Props。Typescript:`LoadingProps`,[Loading API Documents](./loading?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/card/type.ts) | N +loading | TNode | false | Typescript:`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +loadingProps | Object | - | Loading Component Props。Typescript:`LoadingProps`,[Loading API Documents](./loading?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/card/type.ts) | N shadow | Boolean | false | \- | N size | String | medium | options: medium/small | N status | String | - | \- | N -subtitle | TNode | - | card subtitle。Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +subtitle | TNode | - | card subtitle。Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N theme | String | normal | options: normal/poster1/poster2 | N -title | TNode | - | card title。Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +title | TNode | - | card title。Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N diff --git a/src/card/card.md b/packages/components/card/card.md similarity index 78% rename from src/card/card.md rename to packages/components/card/card.md index cb41dc4442..aa2950b0aa 100644 --- a/src/card/card.md +++ b/packages/components/card/card.md @@ -7,22 +7,22 @@ -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式,TS 类型:`React.CSSProperties` | N -actions | TNode | - | 卡片操作区。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -avatar | TNode | - | 卡片中的用户头像,仅在海报风格的卡片中有效。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +actions | TNode | - | 卡片操作区。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +avatar | TNode | - | 卡片中的用户头像,仅在海报风格的卡片中有效。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N bordered | Boolean | true | 是否有边框 | N -children | TNode | - | 卡片内容,同 content。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -content | TNode | - | 卡片内容。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -cover | TNode | - | 卡片封面图。值类型为字符串,会自动使用 `img` 标签输出封面图;也可以完全最定义封面图。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -description | TNode | - | 卡片描述文案。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -footer | TNode | - | 卡片底部内容,可完全自定义。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -header | TNode | - | 卡片顶部内容,优先级高于其他所有元素。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +children | TNode | - | 卡片内容,同 content。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +content | TNode | - | 卡片内容。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +cover | TNode | - | 卡片封面图。值类型为字符串,会自动使用 `img` 标签输出封面图;也可以完全最定义封面图。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +description | TNode | - | 卡片描述文案。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +footer | TNode | - | 卡片底部内容,可完全自定义。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +header | TNode | - | 卡片顶部内容,优先级高于其他所有元素。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N headerBordered | Boolean | false | 头部是否带分割线,仅在有header时有效 | N hoverShadow | Boolean | false | hover时是否有阴影 | N -loading | TNode | false | 加载状态,值为 true 会根据不同的布局显示不同的加载状态,值为 false 则表示非加载状态。也可以使用 Skeleton 组件完全自定义加载态呈现内容。TS 类型:`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -loadingProps | Object | - | 透传加载组件(Loading)全部属性。TS 类型:`LoadingProps`,[Loading API Documents](./loading?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/card/type.ts) | N +loading | TNode | false | 加载状态,值为 true 会根据不同的布局显示不同的加载状态,值为 false 则表示非加载状态。也可以使用 Skeleton 组件完全自定义加载态呈现内容。TS 类型:`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +loadingProps | Object | - | 透传加载组件(Loading)全部属性。TS 类型:`LoadingProps`,[Loading API Documents](./loading?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/card/type.ts) | N shadow | Boolean | false | 是否显示卡片阴影,默认不显示 | N size | String | medium | 尺寸。可选项:medium/small | N status | String | - | 卡片状态内容,仅在操作区域不在顶部时有效(即 `theme=poster2` ) | N -subtitle | TNode | - | 卡片副标题。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +subtitle | TNode | - | 卡片副标题。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N theme | String | normal | 卡片风格:普通风格、海报风格1(操作区域在顶部)、海报风格2(操作区域在底部)。可选项:normal/poster1/poster2 | N -title | TNode | - | 卡片标题。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +title | TNode | - | 卡片标题。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N diff --git a/src/card/defaultProps.ts b/packages/components/card/defaultProps.ts similarity index 100% rename from src/card/defaultProps.ts rename to packages/components/card/defaultProps.ts diff --git a/src/card/index.ts b/packages/components/card/index.ts similarity index 100% rename from src/card/index.ts rename to packages/components/card/index.ts diff --git a/src/card/style/css.js b/packages/components/card/style/css.js similarity index 100% rename from src/card/style/css.js rename to packages/components/card/style/css.js diff --git a/packages/components/card/style/index.js b/packages/components/card/style/index.js new file mode 100644 index 0000000000..4c2b4e3b6b --- /dev/null +++ b/packages/components/card/style/index.js @@ -0,0 +1 @@ +import '../../../common/style/web/components/card/_index.less'; diff --git a/src/card/type.ts b/packages/components/card/type.ts similarity index 100% rename from src/card/type.ts rename to packages/components/card/type.ts diff --git a/src/cascader/Cascader.tsx b/packages/components/cascader/Cascader.tsx similarity index 86% rename from src/cascader/Cascader.tsx rename to packages/components/cascader/Cascader.tsx index 1d907e57f2..8171f16602 100644 --- a/src/cascader/Cascader.tsx +++ b/packages/components/cascader/Cascader.tsx @@ -1,7 +1,6 @@ import React, { useMemo } from 'react'; import classNames from 'classnames'; -import pick from 'lodash/pick'; -import omit from 'lodash/omit'; +import { pick, omit } from 'lodash-es'; import Panel from './components/Panel'; import SelectInput from '../select-input'; import FakeArrow from '../common/FakeArrow'; @@ -92,6 +91,30 @@ const Cascader: React.FC = (originalProps) => { const renderValueDisplay = () => parseContentTNode(props.valueDisplay, valueDisplayParams); const { setVisible, visible, inputVal, setInputVal } = cascaderContext; + + const updateScrollTop = (content: HTMLDivElement) => { + const cascaderMenuList = content.querySelectorAll(`.${COMPONENT_NAME}__menu`); + requestAnimationFrame(() => { + cascaderMenuList.forEach((menu: HTMLDivElement) => { + const firstSelectedNode: HTMLDivElement = + menu?.querySelector(`.${classPrefix}-is-selected`) || menu?.querySelector(`.${classPrefix}-is-expanded`); + if (!firstSelectedNode || !menu) return; + + const { paddingBottom } = getComputedStyle(firstSelectedNode); + const { marginBottom } = getComputedStyle(menu); + const elementBottomHeight = parseInt(paddingBottom, 10) + parseInt(marginBottom, 10); + + const updateValue = + firstSelectedNode.offsetTop - + menu.offsetTop - + (menu.clientHeight - firstSelectedNode.clientHeight) + + elementBottomHeight; + // eslint-disable-next-line no-param-reassign + menu.scrollTop = updateValue; + }); + }); + }; + return ( = (originalProps) => { valueDisplay={renderValueDisplay()} suffix={props.suffix} suffixIcon={renderSuffixIcon()} + updateScrollTop={updateScrollTop} popupProps={{ ...props.popupProps, overlayInnerStyle: panels.length && !props.loading ? { width: 'auto' } : {}, diff --git a/src/cascader/CascaderPanel.tsx b/packages/components/cascader/CascaderPanel.tsx similarity index 96% rename from src/cascader/CascaderPanel.tsx rename to packages/components/cascader/CascaderPanel.tsx index feff148f44..3f76758523 100644 --- a/src/cascader/CascaderPanel.tsx +++ b/packages/components/cascader/CascaderPanel.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import pick from 'lodash/pick'; +import { pick } from 'lodash-es'; import classNames from 'classnames'; import Panel from './components/Panel'; import { TdCascaderProps } from './interface'; diff --git a/src/cascader/__tests__/cascader.test.tsx b/packages/components/cascader/__tests__/cascader.test.tsx similarity index 100% rename from src/cascader/__tests__/cascader.test.tsx rename to packages/components/cascader/__tests__/cascader.test.tsx diff --git a/src/cascader/_example/base.tsx b/packages/components/cascader/_example/base.tsx similarity index 100% rename from src/cascader/_example/base.tsx rename to packages/components/cascader/_example/base.tsx diff --git a/src/cascader/_example/check-strictly.tsx b/packages/components/cascader/_example/check-strictly.tsx similarity index 100% rename from src/cascader/_example/check-strictly.tsx rename to packages/components/cascader/_example/check-strictly.tsx diff --git a/src/cascader/_example/collapsed.tsx b/packages/components/cascader/_example/collapsed.tsx similarity index 100% rename from src/cascader/_example/collapsed.tsx rename to packages/components/cascader/_example/collapsed.tsx diff --git a/src/cascader/_example/disabled.tsx b/packages/components/cascader/_example/disabled.tsx similarity index 100% rename from src/cascader/_example/disabled.tsx rename to packages/components/cascader/_example/disabled.tsx diff --git a/src/cascader/_example/ellipsis.tsx b/packages/components/cascader/_example/ellipsis.tsx similarity index 100% rename from src/cascader/_example/ellipsis.tsx rename to packages/components/cascader/_example/ellipsis.tsx diff --git a/src/cascader/_example/filterable.tsx b/packages/components/cascader/_example/filterable.tsx similarity index 100% rename from src/cascader/_example/filterable.tsx rename to packages/components/cascader/_example/filterable.tsx diff --git a/src/cascader/_example/keys.tsx b/packages/components/cascader/_example/keys.tsx similarity index 100% rename from src/cascader/_example/keys.tsx rename to packages/components/cascader/_example/keys.tsx diff --git a/src/cascader/_example/load.tsx b/packages/components/cascader/_example/load.tsx similarity index 56% rename from src/cascader/_example/load.tsx rename to packages/components/cascader/_example/load.tsx index b72e433cb0..e0a4ef05dc 100644 --- a/src/cascader/_example/load.tsx +++ b/packages/components/cascader/_example/load.tsx @@ -1,11 +1,13 @@ import React, { useState } from 'react'; -import { Cascader } from 'tdesign-react'; +import { Cascader, Space } from 'tdesign-react'; import type { CascaderProps, CascaderValue } from 'tdesign-react'; import type { TreeOptionData } from '../../common'; export default function Example() { - const [value1, setValue1] = useState([]); + const [singleValue, setSingleValue] = useState(''); + const [multipleValue, setMultipleValue] = useState([]); + const options = [ { label: '选项1', @@ -19,8 +21,12 @@ export default function Example() { }, ]; - const onChange1: CascaderProps['onChange'] = (value) => { - setValue1(value); + const onSingleChange: CascaderProps['onChange'] = (value) => { + setSingleValue(value); + }; + + const onMultipleChange: CascaderProps['onChange'] = (value) => { + setMultipleValue(value); }; const load: CascaderProps['load'] = (node) => @@ -40,8 +46,13 @@ export default function Example() { ]; } resolve(nodes); - }, 1000); + }, 300); }); - return ; + return ( + + + + + ); } diff --git a/src/cascader/_example/max.tsx b/packages/components/cascader/_example/max.tsx similarity index 100% rename from src/cascader/_example/max.tsx rename to packages/components/cascader/_example/max.tsx diff --git a/packages/components/cascader/_example/multiple.tsx b/packages/components/cascader/_example/multiple.tsx new file mode 100644 index 0000000000..6cf85f0afd --- /dev/null +++ b/packages/components/cascader/_example/multiple.tsx @@ -0,0 +1,135 @@ +import React, { useState } from 'react'; +import { Cascader } from 'tdesign-react'; +import type { CascaderProps, CascaderValue } from 'tdesign-react'; + +export default function Example() { + const [value, setValue] = useState(['8.1']); + const options = [ + { + label: '选项一', + value: '1', + children: [ + { + label: '子选项一', + value: '1.1', + }, + { + label: '子选项二', + value: '1.2', + }, + { + label: '子选项三', + value: '1.3', + }, + ], + }, + { + label: '选项二', + value: '2', + children: [ + { + label: '子选项一', + value: '2.1', + }, + { + label: '子选项二', + value: '2.2', + }, + ], + }, + { + label: '选项三', + value: '3', + children: [ + { + label: '子选项一', + value: '3.1', + }, + { + label: '子选项二', + value: '3.2', + }, + ], + }, + { + label: '选项四', + value: '4', + children: [ + { + label: '子选项一', + value: '4.1', + }, + { + label: '子选项二', + value: '4.2', + }, + ], + }, + { + label: '选项五', + value: '5', + children: [ + { + label: '子选项一', + value: '5.1', + }, + { + label: '子选项二', + value: '5.2', + }, + ], + }, + { + label: '选项六', + value: '6', + children: [ + { + label: '子选项一', + value: '6.1', + }, + { + label: '子选项二', + value: '6.2', + }, + ], + }, + { + label: '选项七', + value: '7', + children: [ + { + label: '子选项一', + value: '7.1', + }, + { + label: '子选项二', + value: '7.2', + }, + ], + }, + { + label: '选项8', + value: '8', + children: [ + { + label: '子选项一', + value: '8.1', + }, + { + label: '子选项二', + value: '8.2', + }, + ], + }, + ]; + + const onChange: CascaderProps['onChange'] = (value) => { + setValue(value); + }; + + return ( + + + + ); +} diff --git a/src/cascader/_example/panel.tsx b/packages/components/cascader/_example/panel.tsx similarity index 100% rename from src/cascader/_example/panel.tsx rename to packages/components/cascader/_example/panel.tsx diff --git a/src/cascader/_example/show-all-levels.tsx b/packages/components/cascader/_example/show-all-levels.tsx similarity index 100% rename from src/cascader/_example/show-all-levels.tsx rename to packages/components/cascader/_example/show-all-levels.tsx diff --git a/src/cascader/_example/size.tsx b/packages/components/cascader/_example/size.tsx similarity index 100% rename from src/cascader/_example/size.tsx rename to packages/components/cascader/_example/size.tsx diff --git a/src/cascader/_example/trigger.tsx b/packages/components/cascader/_example/trigger.tsx similarity index 100% rename from src/cascader/_example/trigger.tsx rename to packages/components/cascader/_example/trigger.tsx diff --git a/src/cascader/_example/value-display.tsx b/packages/components/cascader/_example/value-display.tsx similarity index 100% rename from src/cascader/_example/value-display.tsx rename to packages/components/cascader/_example/value-display.tsx diff --git a/src/cascader/_example/value-mode.tsx b/packages/components/cascader/_example/value-mode.tsx similarity index 100% rename from src/cascader/_example/value-mode.tsx rename to packages/components/cascader/_example/value-mode.tsx diff --git a/src/cascader/_example/value-type.tsx b/packages/components/cascader/_example/value-type.tsx similarity index 100% rename from src/cascader/_example/value-type.tsx rename to packages/components/cascader/_example/value-type.tsx diff --git a/src/cascader/_usage/index.jsx b/packages/components/cascader/_usage/index.jsx similarity index 100% rename from src/cascader/_usage/index.jsx rename to packages/components/cascader/_usage/index.jsx diff --git a/src/cascader/_usage/props.json b/packages/components/cascader/_usage/props.json similarity index 100% rename from src/cascader/_usage/props.json rename to packages/components/cascader/_usage/props.json diff --git a/src/cascader/cascader.en-US.md b/packages/components/cascader/cascader.en-US.md similarity index 71% rename from src/cascader/cascader.en-US.md rename to packages/components/cascader/cascader.en-US.md index b10c272653..21132031b7 100644 --- a/src/cascader/cascader.en-US.md +++ b/packages/components/cascader/cascader.en-US.md @@ -10,52 +10,52 @@ className | String | - | className of component | N style | Object | - | CSS(Cascading Style Sheets),Typescript:`React.CSSProperties` | N autofocus | Boolean | - | \- | N borderless | Boolean | false | \- | N -checkProps | Object | - | Typescript:`CheckboxProps`,[Checkbox API Documents](./checkbox?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/cascader/type.ts) | N +checkProps | Object | - | Typescript:`CheckboxProps`,[Checkbox API Documents](./checkbox?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/cascader/type.ts) | N checkStrictly | Boolean | false | \- | N clearable | Boolean | false | \- | N -collapsedItems | TElement | - | Typescript:`TNode<{ value: CascaderOption[]; collapsedSelectedItems: CascaderOption[]; count: number; onClose: (context: { index: number, e?: MouseEvent }) => void }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +collapsedItems | TElement | - | Typescript:`TNode<{ value: CascaderOption[]; collapsedSelectedItems: CascaderOption[]; count: number; onClose: (context: { index: number, e?: MouseEvent }) => void }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N disabled | Boolean | undefined | \- | N -empty | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +empty | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N filter | Function | - | Typescript:`(filterWords: string, node: TreeNodeModel) => boolean \| Promise` | N filterable | Boolean | false | \- | N -inputProps | Object | - | Typescript:`InputProps`,[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/cascader/type.ts) | N -keys | Object | - | Typescript:`TreeKeysType`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -label | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +inputProps | Object | - | Typescript:`InputProps`,[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/cascader/type.ts) | N +keys | Object | - | Typescript:`TreeKeysType`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +label | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N lazy | Boolean | true | \- | N load | Function | - | Typescript:`(node: TreeNodeModel) => Promise>` | N loading | Boolean | false | \- | N -loadingText | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +loadingText | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N max | Number | 0 | \- | N minCollapsedNum | Number | 0 | \- | N multiple | Boolean | false | \- | N -option | TElement | - | customize one option。Typescript:`TNode<{ item: CascaderOption; index: number }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +option | TElement | - | customize one option。Typescript:`TNode<{ item: CascaderOption; index: number }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N options | Array | [] | Typescript:`Array` | N -panelBottomContent | TNode | - | bottom content of the cascader panel。Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -panelTopContent | TNode | - | top content of the cascader panel。Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +panelBottomContent | TNode | - | bottom content of the cascader panel。Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +panelTopContent | TNode | - | top content of the cascader panel。Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N placeholder | String | undefined | \- | N -popupProps | Object | - | Typescript:`PopupProps`,[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/cascader/type.ts) | N +popupProps | Object | - | Typescript:`PopupProps`,[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/cascader/type.ts) | N popupVisible | Boolean | - | \- | N defaultPopupVisible | Boolean | - | uncontrolled property | N -prefixIcon | TElement | - | Typescript:`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +prefixIcon | TElement | - | Typescript:`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N readonly | Boolean | false | \- | N reserveKeyword | Boolean | false | \- | N -selectInputProps | Object | - | Typescript:`SelectInputProps`,[SelectInput API Documents](./select-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/cascader/type.ts) | N +selectInputProps | Object | - | Typescript:`SelectInputProps`,[SelectInput API Documents](./select-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/cascader/type.ts) | N showAllLevels | Boolean | true | \- | N -size | String | medium | options: large/medium/small。Typescript:`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +size | String | medium | options: large/medium/small。Typescript:`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N status | String | default | options: default/success/warning/error | N -suffix | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -suffixIcon | TElement | - | Typescript:`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -tagInputProps | Object | - | Typescript:`TagInputProps`,[TagInput API Documents](./tag-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/cascader/type.ts) | N -tagProps | Object | - | Typescript:`TagProps`,[Tag API Documents](./tag?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/cascader/type.ts) | N -tips | TNode | - | tips at the bottom of cascader。Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +suffix | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +suffixIcon | TElement | - | Typescript:`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +tagInputProps | Object | - | Typescript:`TagInputProps`,[TagInput API Documents](./tag-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/cascader/type.ts) | N +tagProps | Object | - | Typescript:`TagProps`,[Tag API Documents](./tag?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/cascader/type.ts) | N +tips | TNode | - | tips at the bottom of cascader。Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N trigger | String | click | options: click/hover | N -value | String / Number / Array | [] | Typescript:`CascaderValue` `type CascaderValue = string \| number \| T \| Array>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/cascader/type.ts) | N -defaultValue | String / Number / Array | [] | uncontrolled property。Typescript:`CascaderValue` `type CascaderValue = string \| number \| T \| Array>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/cascader/type.ts) | N -valueDisplay | TNode | - | `MouseEvent`。Typescript:`string \| TNode<{ value: CascaderValue; onClose: (index: number) => void; displayValue?: CascaderValue; selectedOptions: CascaderOption[] }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +value | String / Number / Array | [] | Typescript:`CascaderValue` `type CascaderValue = string \| number \| T \| Array>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/cascader/type.ts) | N +defaultValue | String / Number / Array | [] | uncontrolled property。Typescript:`CascaderValue` `type CascaderValue = string \| number \| T \| Array>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/cascader/type.ts) | N +valueDisplay | TNode | - | `MouseEvent`。Typescript:`string \| TNode<{ value: CascaderValue; onClose: (index: number) => void; displayValue?: CascaderValue; selectedOptions: CascaderOption[] }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N valueMode | String | onlyLeaf | options: onlyLeaf/parentFirst/all | N valueType | String | single | options: single/full | N onBlur | Function | | Typescript:`(context: { value: CascaderValue } & SelectInputBlurContext ) => void` | N -onChange | Function | | Typescript:`(value: CascaderValue, context: CascaderChangeContext) => void`[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/cascader/type.ts)。`interface CascaderChangeContext { node?: TreeNodeModel; source: CascaderChangeSource }``import { TreeNodeModel } from '@Tree'``type CascaderChangeSource = 'invalid-value' \| 'check' \| 'clear' \| 'uncheck'` | N +onChange | Function | | Typescript:`(value: CascaderValue, context: CascaderChangeContext) => void`[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/cascader/type.ts)。`interface CascaderChangeContext { node?: TreeNodeModel; source: CascaderChangeSource }``import { TreeNodeModel } from '@Tree'``type CascaderChangeSource = 'invalid-value' \| 'check' \| 'clear' \| 'uncheck'` | N onFocus | Function | | Typescript:`(context: { value: CascaderValue; e: FocusEvent }) => void` | N -onPopupVisibleChange | Function | | Typescript:`(visible: boolean, context: PopupVisibleChangeContext) => void`[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/cascader/type.ts)。`import { PopupVisibleChangeContext } from '@Popup'` | N -onRemove | Function | | Typescript:`(context: RemoveContext) => void`[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/cascader/type.ts)。`interface RemoveContext { value: CascaderValue; node: TreeNodeModel }` | N +onPopupVisibleChange | Function | | Typescript:`(visible: boolean, context: PopupVisibleChangeContext) => void`[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/cascader/type.ts)。`import { PopupVisibleChangeContext } from '@Popup'` | N +onRemove | Function | | Typescript:`(context: RemoveContext) => void`[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/cascader/type.ts)。`interface RemoveContext { value: CascaderValue; node: TreeNodeModel }` | N diff --git a/src/cascader/cascader.md b/packages/components/cascader/cascader.md similarity index 78% rename from src/cascader/cascader.md rename to packages/components/cascader/cascader.md index 88dedb9035..864439a89b 100644 --- a/src/cascader/cascader.md +++ b/packages/components/cascader/cascader.md @@ -10,52 +10,52 @@ className | String | - | 类名 | N style | Object | - | 样式,TS 类型:`React.CSSProperties` | N autofocus | Boolean | - | 自动聚焦 | N borderless | Boolean | false | 无边框模式 | N -checkProps | Object | - | 参考 checkbox 组件 API。TS 类型:`CheckboxProps`,[Checkbox API Documents](./checkbox?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/cascader/type.ts) | N +checkProps | Object | - | 参考 checkbox 组件 API。TS 类型:`CheckboxProps`,[Checkbox API Documents](./checkbox?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/cascader/type.ts) | N checkStrictly | Boolean | false | 父子节点选中状态不再关联,可各自选中或取消 | N clearable | Boolean | false | 是否支持清空选项 | N -collapsedItems | TElement | - | 多选情况下,用于设置折叠项内容,默认为 `+N`。如果需要悬浮就显示其他内容,可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签,`collapsedSelectedItems` 表示折叠的标签,`count` 表示折叠的数量,`onClose` 表示移除标签的事件回调。TS 类型:`TNode<{ value: CascaderOption[]; collapsedSelectedItems: CascaderOption[]; count: number; onClose: (context: { index: number, e?: MouseEvent }) => void }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +collapsedItems | TElement | - | 多选情况下,用于设置折叠项内容,默认为 `+N`。如果需要悬浮就显示其他内容,可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签,`collapsedSelectedItems` 表示折叠的标签,`count` 表示折叠的数量,`onClose` 表示移除标签的事件回调。TS 类型:`TNode<{ value: CascaderOption[]; collapsedSelectedItems: CascaderOption[]; count: number; onClose: (context: { index: number, e?: MouseEvent }) => void }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N disabled | Boolean | undefined | 是否禁用组件 | N -empty | TNode | - | 无匹配选项时的内容,默认全局配置为 '暂无数据'。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +empty | TNode | - | 无匹配选项时的内容,默认全局配置为 '暂无数据'。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N filter | Function | - | 自定义过滤方法,用于对现有数据进行搜索过滤,判断是否过滤某一项数据。TS 类型:`(filterWords: string, node: TreeNodeModel) => boolean \| Promise` | N filterable | Boolean | false | 是否可搜索 | N -inputProps | Object | - | 透传 Input 输入框组件的全部属性。TS 类型:`InputProps`,[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/cascader/type.ts) | N -keys | Object | - | 用来定义 value / label / children / disabled 在 `options` 中对应的字段别名。TS 类型:`TreeKeysType`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -label | TNode | - | 左侧文本。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +inputProps | Object | - | 透传 Input 输入框组件的全部属性。TS 类型:`InputProps`,[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/cascader/type.ts) | N +keys | Object | - | 用来定义 value / label / children / disabled 在 `options` 中对应的字段别名。TS 类型:`TreeKeysType`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +label | TNode | - | 左侧文本。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N lazy | Boolean | true | 延迟加载 children 为 true 的子节点,即使 expandAll 被设置为 true,也同样延迟加载 | N load | Function | - | 加载子树数据的方法(仅当节点 children 为 true 时生效)。TS 类型:`(node: TreeNodeModel) => Promise>` | N loading | Boolean | false | 是否为加载状态 | N -loadingText | TNode | - | 远程加载时显示的文字,支持自定义。如加上超链接。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +loadingText | TNode | - | 远程加载时显示的文字,支持自定义。如加上超链接。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N max | Number | 0 | 用于控制多选数量,值为 0 则不限制 | N minCollapsedNum | Number | 0 | 最小折叠数量,用于多选情况下折叠选中项,超出该数值的选中项折叠。值为 0 则表示不折叠 | N multiple | Boolean | false | 是否允许多选 | N -option | TElement | - | 自定义单个级联选项。TS 类型:`TNode<{ item: CascaderOption; index: number }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +option | TElement | - | 自定义单个级联选项。TS 类型:`TNode<{ item: CascaderOption; index: number }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N options | Array | [] | 可选项数据源。TS 类型:`Array` | N -panelBottomContent | TNode | - | 面板内的底部内容。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -panelTopContent | TNode | - | 面板内的顶部内容。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +panelBottomContent | TNode | - | 面板内的底部内容。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +panelTopContent | TNode | - | 面板内的顶部内容。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N placeholder | String | undefined | 占位符 | N -popupProps | Object | - | 参考 popup 组件 API。TS 类型:`PopupProps`,[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/cascader/type.ts) | N +popupProps | Object | - | 参考 popup 组件 API。TS 类型:`PopupProps`,[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/cascader/type.ts) | N popupVisible | Boolean | - | 是否显示下拉框 | N defaultPopupVisible | Boolean | - | 是否显示下拉框。非受控属性 | N -prefixIcon | TElement | - | 组件前置图标。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +prefixIcon | TElement | - | 组件前置图标。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N readonly | Boolean | false | 只读状态,值为真会隐藏输入框,且无法打开下拉框 | N reserveKeyword | Boolean | false | 多选且可搜索时,是否在选中一个选项后保留当前的搜索关键词 | N -selectInputProps | Object | - | 透传 SelectInput 筛选器输入框组件的全部属性。TS 类型:`SelectInputProps`,[SelectInput API Documents](./select-input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/cascader/type.ts) | N +selectInputProps | Object | - | 透传 SelectInput 筛选器输入框组件的全部属性。TS 类型:`SelectInputProps`,[SelectInput API Documents](./select-input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/cascader/type.ts) | N showAllLevels | Boolean | true | 选中值使用完整路径,输入框在单选时也显示完整路径 | N -size | String | medium | 组件尺寸。可选项:large/medium/small。TS 类型:`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +size | String | medium | 组件尺寸。可选项:large/medium/small。TS 类型:`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N status | String | default | 输入框状态。可选项:default/success/warning/error | N -suffix | TNode | - | 后置图标前的后置内容。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -suffixIcon | TElement | - | 组件后置图标。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -tagInputProps | Object | - | 透传 TagInput 标签输入框组件的全部属性。TS 类型:`TagInputProps`,[TagInput API Documents](./tag-input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/cascader/type.ts) | N -tagProps | Object | - | 透传 Tag 标签组件全部属性。TS 类型:`TagProps`,[Tag API Documents](./tag?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/cascader/type.ts) | N -tips | TNode | - | 输入框下方提示文本,会根据不同的 `status` 呈现不同的样式。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +suffix | TNode | - | 后置图标前的后置内容。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +suffixIcon | TElement | - | 组件后置图标。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +tagInputProps | Object | - | 透传 TagInput 标签输入框组件的全部属性。TS 类型:`TagInputProps`,[TagInput API Documents](./tag-input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/cascader/type.ts) | N +tagProps | Object | - | 透传 Tag 标签组件全部属性。TS 类型:`TagProps`,[Tag API Documents](./tag?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/cascader/type.ts) | N +tips | TNode | - | 输入框下方提示文本,会根据不同的 `status` 呈现不同的样式。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N trigger | String | click | 展开下一层级的方式。可选项:click/hover | N -value | String / Number / Array | [] | 选中项的值。TS 类型:`CascaderValue` `type CascaderValue = string \| number \| T \| Array>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/cascader/type.ts) | N -defaultValue | String / Number / Array | [] | 选中项的值。非受控属性。TS 类型:`CascaderValue` `type CascaderValue = string \| number \| T \| Array>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/cascader/type.ts) | N -valueDisplay | TNode | - | 自定义选中项呈现的内容。TS 类型:`string \| TNode<{ value: CascaderValue; onClose: (index: number) => void; displayValue?: CascaderValue; selectedOptions: CascaderOption[] }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +value | String / Number / Array | [] | 选中项的值。TS 类型:`CascaderValue` `type CascaderValue = string \| number \| T \| Array>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/cascader/type.ts) | N +defaultValue | String / Number / Array | [] | 选中项的值。非受控属性。TS 类型:`CascaderValue` `type CascaderValue = string \| number \| T \| Array>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/cascader/type.ts) | N +valueDisplay | TNode | - | 自定义选中项呈现的内容。TS 类型:`string \| TNode<{ value: CascaderValue; onClose: (index: number) => void; displayValue?: CascaderValue; selectedOptions: CascaderOption[] }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N valueMode | String | onlyLeaf | 选中值模式。all 表示父节点和子节点全部会出现在选中值里面;parentFirst 表示当子节点全部选中时,仅父节点在选中值里面;onlyLeaf 表示无论什么情况,选中值仅呈现叶子节点。可选项:onlyLeaf/parentFirst/all | N valueType | String | single | 用于控制选中值的类型。single 表示输入输出值为 叶子结点值, full 表示输入输出值为全路径。可选项:single/full | N onBlur | Function | | TS 类型:`(context: { value: CascaderValue } & SelectInputBlurContext ) => void`当输入框失去焦点时触发 | N -onChange | Function | | TS 类型:`(value: CascaderValue, context: CascaderChangeContext) => void`选中值发生变化时触发。TreeNodeModel 从树组件中导出。`context.node` 表示触发事件的节点,`context.source` 表示触发事件的来源。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/cascader/type.ts)。`interface CascaderChangeContext { node?: TreeNodeModel; source: CascaderChangeSource }``import { TreeNodeModel } from '@Tree'``type CascaderChangeSource = 'invalid-value' \| 'check' \| 'clear' \| 'uncheck'` | N +onChange | Function | | TS 类型:`(value: CascaderValue, context: CascaderChangeContext) => void`选中值发生变化时触发。TreeNodeModel 从树组件中导出。`context.node` 表示触发事件的节点,`context.source` 表示触发事件的来源。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/cascader/type.ts)。`interface CascaderChangeContext { node?: TreeNodeModel; source: CascaderChangeSource }``import { TreeNodeModel } from '@Tree'``type CascaderChangeSource = 'invalid-value' \| 'check' \| 'clear' \| 'uncheck'` | N onFocus | Function | | TS 类型:`(context: { value: CascaderValue; e: FocusEvent }) => void`获得焦点时触发 | N -onPopupVisibleChange | Function | | TS 类型:`(visible: boolean, context: PopupVisibleChangeContext) => void`下拉框显示或隐藏时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/cascader/type.ts)。`import { PopupVisibleChangeContext } from '@Popup'` | N -onRemove | Function | | TS 类型:`(context: RemoveContext) => void`多选模式下,选中数据被移除时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/cascader/type.ts)。`interface RemoveContext { value: CascaderValue; node: TreeNodeModel }` | N +onPopupVisibleChange | Function | | TS 类型:`(visible: boolean, context: PopupVisibleChangeContext) => void`下拉框显示或隐藏时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/cascader/type.ts)。`import { PopupVisibleChangeContext } from '@Popup'` | N +onRemove | Function | | TS 类型:`(context: RemoveContext) => void`多选模式下,选中数据被移除时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/cascader/type.ts)。`interface RemoveContext { value: CascaderValue; node: TreeNodeModel }` | N diff --git a/src/cascader/components/Item.tsx b/packages/components/cascader/components/Item.tsx similarity index 99% rename from src/cascader/components/Item.tsx rename to packages/components/cascader/components/Item.tsx index d8184cd2e8..970247d5ac 100644 --- a/src/cascader/components/Item.tsx +++ b/packages/components/cascader/components/Item.tsx @@ -2,7 +2,7 @@ import React, { forwardRef, useMemo } from 'react'; import classNames from 'classnames'; import { ChevronRightIcon as TdChevronRightIcon } from 'tdesign-icons-react'; -import isFunction from 'lodash/isFunction'; +import { isFunction } from 'lodash-es'; import TLoading from '../../loading'; import Checkbox from '../../checkbox'; diff --git a/src/cascader/components/Panel.tsx b/packages/components/cascader/components/Panel.tsx similarity index 100% rename from src/cascader/components/Panel.tsx rename to packages/components/cascader/components/Panel.tsx diff --git a/src/cascader/components/style/css.js b/packages/components/cascader/components/style/css.js similarity index 100% rename from src/cascader/components/style/css.js rename to packages/components/cascader/components/style/css.js diff --git a/src/cascader/components/style/index.js b/packages/components/cascader/components/style/index.js similarity index 100% rename from src/cascader/components/style/index.js rename to packages/components/cascader/components/style/index.js diff --git a/src/cascader/core/className.ts b/packages/components/cascader/core/className.ts similarity index 100% rename from src/cascader/core/className.ts rename to packages/components/cascader/core/className.ts diff --git a/src/cascader/core/effect.ts b/packages/components/cascader/core/effect.ts similarity index 96% rename from src/cascader/core/effect.ts rename to packages/components/cascader/core/effect.ts index 7f30f6ef05..70e5eb183b 100644 --- a/src/cascader/core/effect.ts +++ b/packages/components/cascader/core/effect.ts @@ -1,6 +1,4 @@ -import isNumber from 'lodash/isNumber'; -import isFunction from 'lodash/isFunction'; -import cloneDeep from 'lodash/cloneDeep'; +import { isNumber , isFunction , cloneDeep } from 'lodash-es'; import { TreeNode, CascaderContextType, TdCascaderProps, TreeNodeValue, TreeNodeModel } from '../interface'; import { getFullPathLabel, getTreeValue } from './helper'; @@ -45,7 +43,7 @@ export function expendClickEffect( // 非受控状态下更新状态 setValue(valueType === 'single' ? value : node.getPath().map((item) => item.value), 'check', node.getModel()); - // 当 trigger 为 hover 时 ,点击节点一定是关闭 panel 的操作 + // 当 trigger 为 hover 时 ,点击节点一定是关闭 panel 的操作 if (!checkStrictly || propsTrigger === 'hover') { setVisible(false, {}); } diff --git a/src/cascader/core/helper.ts b/packages/components/cascader/core/helper.ts similarity index 99% rename from src/cascader/core/helper.ts rename to packages/components/cascader/core/helper.ts index 8f64ddce8b..1960aa11da 100644 --- a/src/cascader/core/helper.ts +++ b/packages/components/cascader/core/helper.ts @@ -1,4 +1,4 @@ -import isEmpty from 'lodash/isEmpty'; +import { isEmpty } from 'lodash-es'; import { TreeNode, CascaderContextType, diff --git a/src/cascader/defaultProps.ts b/packages/components/cascader/defaultProps.ts similarity index 100% rename from src/cascader/defaultProps.ts rename to packages/components/cascader/defaultProps.ts diff --git a/src/cascader/hooks.tsx b/packages/components/cascader/hooks.tsx similarity index 92% rename from src/cascader/hooks.tsx rename to packages/components/cascader/hooks.tsx index b6f62e70a8..d33ac40c85 100644 --- a/src/cascader/hooks.tsx +++ b/packages/components/cascader/hooks.tsx @@ -1,13 +1,13 @@ -import { useState, useEffect, useMemo } from 'react'; +import { useState, useEffect, useMemo, useRef } from 'react'; -import isEqual from 'lodash/isEqual'; -import isFunction from 'lodash/isFunction'; +import { isEqual, isFunction } from 'lodash-es'; -import TreeStore from '../_common/js/tree-v1/tree-store'; +import TreeStore from '../../common/js/tree-v1/tree-store'; import { getTreeValue, getCascaderValue, isEmptyValues, isValueInvalid } from './core/helper'; import { treeNodesEffect, treeStoreExpendEffect } from './core/effect'; import useControlled from '../hooks/useControlled'; + import type { TreeNode, TreeNodeValue, @@ -17,7 +17,7 @@ import type { CascaderValue, } from './interface'; -import type { TypeTreeNodeData } from '../_common/js/tree-v1/types'; +import type { TypeTreeNodeData } from '../../common/js/tree-v1/types'; import { TreeOptionData } from '../common'; export const useCascaderContext = (props: TdCascaderProps) => { @@ -84,6 +84,15 @@ export const useCascaderContext = (props: TdCascaderProps) => { */ const { disabled, options = [], keys = {}, checkStrictly = false, lazy = true, load, valueMode = 'onlyLeaf' } = props; + + const optionCurrent = useRef(options); + + useEffect(() => { + if (!isEqual(optionCurrent.current, options)) { + optionCurrent.current = options; + } + }, [options]); + useEffect(() => { if (!treeStore) { if (!options.length) return; @@ -100,6 +109,7 @@ export const useCascaderContext = (props: TdCascaderProps) => { }, }); store.append(options as Array); + setTreeStore(store); } else { treeStore.reload(options); @@ -108,7 +118,7 @@ export const useCascaderContext = (props: TdCascaderProps) => { treeNodesEffect(inputVal, treeStore, setTreeNodes, props.filter, checkStrictly); } // eslint-disable-next-line react-hooks/exhaustive-deps - }, [options]); + }, [optionCurrent.current]); useEffect(() => { if (!treeStore) return; diff --git a/src/cascader/index.ts b/packages/components/cascader/index.ts similarity index 100% rename from src/cascader/index.ts rename to packages/components/cascader/index.ts diff --git a/src/cascader/interface.ts b/packages/components/cascader/interface.ts similarity index 73% rename from src/cascader/interface.ts rename to packages/components/cascader/interface.ts index 7ef9058386..d9d20263a6 100644 --- a/src/cascader/interface.ts +++ b/packages/components/cascader/interface.ts @@ -1,8 +1,8 @@ import { TdCascaderProps, CascaderValue, CascaderChangeSource } from './type'; import { TdSelectInputProps } from '../select-input/type'; -import TreeStore from '../_common/js/tree-v1/tree-store'; -import TreeNode from '../_common/js/tree-v1/tree-node'; -import { TreeNodeModel, TreeNodeValue } from '../_common/js/tree-v1/types'; +import TreeStore from '../../common/js/tree-v1/tree-store'; +import TreeNode from '../../common/js/tree-v1/tree-node'; +import { TreeNodeModel, TreeNodeValue } from '../../common/js/tree-v1/types'; export * from './type'; export interface CascaderContextType @@ -34,9 +34,9 @@ export interface CascaderContextType setExpend: (val: TreeNodeValue[]) => void; } -export { TreeNode } from '../_common/js/tree-v1/tree-node'; -export type { TreeNodeValue } from '../_common/js/tree-v1/types'; -export type { TreeOptionData } from '../_common/js/common'; +export { TreeNode } from '../../common/js/tree-v1/tree-node'; +export type { TreeNodeValue } from '../../common/js/tree-v1/types'; +export type { TreeOptionData } from '../../common/js/common'; export type { TreeNodeModel } from '../tree'; export type { TdSelectInputProps } from '../select-input/type'; diff --git a/src/cascader/style/css.js b/packages/components/cascader/style/css.js similarity index 100% rename from src/cascader/style/css.js rename to packages/components/cascader/style/css.js diff --git a/packages/components/cascader/style/index.js b/packages/components/cascader/style/index.js new file mode 100644 index 0000000000..640fc50f1b --- /dev/null +++ b/packages/components/cascader/style/index.js @@ -0,0 +1 @@ +import '../../../common/style/web/components/cascader/_index.less'; diff --git a/src/cascader/type.ts b/packages/components/cascader/type.ts similarity index 100% rename from src/cascader/type.ts rename to packages/components/cascader/type.ts diff --git a/src/checkbox/Checkbox.tsx b/packages/components/checkbox/Checkbox.tsx similarity index 100% rename from src/checkbox/Checkbox.tsx rename to packages/components/checkbox/Checkbox.tsx diff --git a/src/checkbox/CheckboxGroup.tsx b/packages/components/checkbox/CheckboxGroup.tsx similarity index 96% rename from src/checkbox/CheckboxGroup.tsx rename to packages/components/checkbox/CheckboxGroup.tsx index eed7e1216f..fd6350aa91 100644 --- a/src/checkbox/CheckboxGroup.tsx +++ b/packages/components/checkbox/CheckboxGroup.tsx @@ -1,6 +1,6 @@ import React, { ReactElement, useCallback, useEffect, useMemo, useState } from 'react'; import classNames from 'classnames'; -import isNumber from 'lodash/isNumber'; +import { isNumber } from 'lodash-es'; import useConfig from '../hooks/useConfig'; import { CheckContext, CheckContextValue, CheckProps } from '../common/Check'; import { CheckboxGroupValue, CheckboxOption, CheckboxOptionObj, TdCheckboxGroupProps, TdCheckboxProps } from './type'; @@ -138,11 +138,14 @@ const CheckboxGroup = (props: checkedSet.delete(checkValue); } + const currentOptionChecked = optionsWithoutCheckAll.find((item) => item.value === checkValue); + // 此处 `as` 是因为 `Array.from` 会导致 `checkSet` 的 generic type 丢失 setInternalValue(Array.from(checkedSet) as T, { e, current: checkProps.checkAll ? undefined : (checkValue as TdCheckboxProps), type: checked ? 'check' : 'uncheck', + option: checkProps.checkAll ? undefined : currentOptionChecked, }); }, }; diff --git a/src/checkbox/__tests__/checkbox.test.tsx b/packages/components/checkbox/__tests__/checkbox.test.tsx similarity index 100% rename from src/checkbox/__tests__/checkbox.test.tsx rename to packages/components/checkbox/__tests__/checkbox.test.tsx diff --git a/src/checkbox/_example/base.tsx b/packages/components/checkbox/_example/base.tsx similarity index 100% rename from src/checkbox/_example/base.tsx rename to packages/components/checkbox/_example/base.tsx diff --git a/src/checkbox/_example/controlled.tsx b/packages/components/checkbox/_example/controlled.tsx similarity index 100% rename from src/checkbox/_example/controlled.tsx rename to packages/components/checkbox/_example/controlled.tsx diff --git a/src/checkbox/_example/group.tsx b/packages/components/checkbox/_example/group.tsx similarity index 100% rename from src/checkbox/_example/group.tsx rename to packages/components/checkbox/_example/group.tsx diff --git a/src/checkbox/_example/link.tsx b/packages/components/checkbox/_example/link.tsx similarity index 100% rename from src/checkbox/_example/link.tsx rename to packages/components/checkbox/_example/link.tsx diff --git a/src/checkbox/_example/max.tsx b/packages/components/checkbox/_example/max.tsx similarity index 100% rename from src/checkbox/_example/max.tsx rename to packages/components/checkbox/_example/max.tsx diff --git a/src/checkbox/_usage/index.jsx b/packages/components/checkbox/_usage/index.jsx similarity index 100% rename from src/checkbox/_usage/index.jsx rename to packages/components/checkbox/_usage/index.jsx diff --git a/src/checkbox/_usage/props.json b/packages/components/checkbox/_usage/props.json similarity index 100% rename from src/checkbox/_usage/props.json rename to packages/components/checkbox/_usage/props.json diff --git a/src/checkbox/checkbox.en-US.md b/packages/components/checkbox/checkbox.en-US.md similarity index 76% rename from src/checkbox/checkbox.en-US.md rename to packages/components/checkbox/checkbox.en-US.md index 9bec6f80fa..2fa387e003 100644 --- a/src/checkbox/checkbox.en-US.md +++ b/packages/components/checkbox/checkbox.en-US.md @@ -10,10 +10,10 @@ style | Object | - | 样式,Typescript:`React.CSSProperties` | N checkAll | Boolean | false | \- | N checked | Boolean | false | \- | N defaultChecked | Boolean | false | uncontrolled property | N -children | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +children | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N disabled | Boolean | undefined | \- | N indeterminate | Boolean | false | \- | N -label | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +label | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N name | String | - | \- | N readonly | Boolean | false | \- | N title | String | - | html attribute | N @@ -30,7 +30,7 @@ style | Object | - | 样式,Typescript:`React.CSSProperties` | N disabled | Boolean | - | \- | N max | Number | undefined | \- | N name | String | - | \- | N -options | Array | - | Typescript:`Array` `type CheckboxOption = string \| number \| CheckboxOptionObj` `interface CheckboxOptionObj { label?: string \| TNode; value?: string \| number; disabled?: boolean; name?: string; checkAll?: true }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/checkbox/type.ts) | N -value | Array | [] | Typescript:`T` `type CheckboxGroupValue = Array`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/checkbox/type.ts) | N -defaultValue | Array | [] | uncontrolled property。Typescript:`T` `type CheckboxGroupValue = Array`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/checkbox/type.ts) | N -onChange | Function | | Typescript:`(value: T, context: CheckboxGroupChangeContext) => void`[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/checkbox/type.ts)。`interface CheckboxGroupChangeContext { e: ChangeEvent; current: CheckboxOption \| TdCheckboxProps; type: 'check' \| 'uncheck' }` | N +options | Array | - | Typescript:`Array` `type CheckboxOption = string \| number \| CheckboxOptionObj` `interface CheckboxOptionObj { label?: string \| TNode; value?: string \| number; disabled?: boolean; name?: string; checkAll?: true }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/checkbox/type.ts) | N +value | Array | [] | Typescript:`T` `type CheckboxGroupValue = Array`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/checkbox/type.ts) | N +defaultValue | Array | [] | uncontrolled property。Typescript:`T` `type CheckboxGroupValue = Array`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/checkbox/type.ts) | N +onChange | Function | | Typescript:`(value: T, context: CheckboxGroupChangeContext) => void`[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/checkbox/type.ts)。`interface CheckboxGroupChangeContext { e: ChangeEvent; current: CheckboxOption \| TdCheckboxProps; type: 'check' \| 'uncheck' }` | N diff --git a/src/checkbox/checkbox.md b/packages/components/checkbox/checkbox.md similarity index 82% rename from src/checkbox/checkbox.md rename to packages/components/checkbox/checkbox.md index 32b974a349..8d70d02fb8 100644 --- a/src/checkbox/checkbox.md +++ b/packages/components/checkbox/checkbox.md @@ -15,10 +15,10 @@ style | Object | - | 样式,TS 类型:`React.CSSProperties` | N checkAll | Boolean | false | 用于标识是否为「全选选项」。单独使用无效,需在 CheckboxGroup 中使用 | N checked | Boolean | false | 是否选中 | N defaultChecked | Boolean | false | 是否选中。非受控属性 | N -children | TNode | - | 多选框内容,同 label。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +children | TNode | - | 多选框内容,同 label。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N disabled | Boolean | undefined | 是否禁用组件。如果父组件存在 CheckboxGroup,默认值由 CheckboxGroup.disabled 控制。Checkbox.disabled 优先级高于 CheckboxGroup.disabled | N indeterminate | Boolean | false | 是否为半选 | N -label | TNode | - | 主文案。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +label | TNode | - | 主文案。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N name | String | - | HTML 元素原生属性 | N readonly | Boolean | false | 只读状态 | N title | String | - | HTML 原生属性 | N @@ -35,7 +35,7 @@ style | Object | - | 样式,TS 类型:`React.CSSProperties` | N disabled | Boolean | - | 是否禁用组件,默认为 false。CheckboxGroup.disabled 优先级低于 Checkbox.disabled | N max | Number | undefined | 支持最多选中的数量 | N name | String | - | 统一设置内部复选框 HTML 属性 | N -options | Array | - | 以配置形式设置子元素。示例1:`['北京', '上海']` ,示例2: `[{ label: '全选', checkAll: true }, { label: '上海', value: 'shanghai' }]`。checkAll 值为 true 表示当前选项为「全选选项」。TS 类型:`Array` `type CheckboxOption = string \| number \| CheckboxOptionObj` `interface CheckboxOptionObj { label?: string \| TNode; value?: string \| number; disabled?: boolean; name?: string; checkAll?: true }`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/checkbox/type.ts) | N -value | Array | [] | 选中值。TS 类型:`T` `type CheckboxGroupValue = Array`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/checkbox/type.ts) | N -defaultValue | Array | [] | 选中值。非受控属性。TS 类型:`T` `type CheckboxGroupValue = Array`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/checkbox/type.ts) | N -onChange | Function | | TS 类型:`(value: T, context: CheckboxGroupChangeContext) => void`值变化时触发,`context.current` 表示当前变化的数据值,如果是全选则为空;`context.type` 表示引起选中数据变化的是选中或是取消选中;`context.option` 表示当前变化的数据项。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/checkbox/type.ts)。`interface CheckboxGroupChangeContext { e: ChangeEvent; current: CheckboxOption \| TdCheckboxProps; type: 'check' \| 'uncheck' }` | N +options | Array | - | 以配置形式设置子元素。示例1:`['北京', '上海']` ,示例2: `[{ label: '全选', checkAll: true }, { label: '上海', value: 'shanghai' }]`。checkAll 值为 true 表示当前选项为「全选选项」。TS 类型:`Array` `type CheckboxOption = string \| number \| CheckboxOptionObj` `interface CheckboxOptionObj { label?: string \| TNode; value?: string \| number; disabled?: boolean; name?: string; checkAll?: true }`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/checkbox/type.ts) | N +value | Array | [] | 选中值。TS 类型:`T` `type CheckboxGroupValue = Array`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/checkbox/type.ts) | N +defaultValue | Array | [] | 选中值。非受控属性。TS 类型:`T` `type CheckboxGroupValue = Array`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/checkbox/type.ts) | N +onChange | Function | | TS 类型:`(value: T, context: CheckboxGroupChangeContext) => void`值变化时触发,`context.current` 表示当前变化的数据值,如果是全选则为空;`context.type` 表示引起选中数据变化的是选中或是取消选中;`context.option` 表示当前变化的数据项。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/checkbox/type.ts)。`interface CheckboxGroupChangeContext { e: ChangeEvent; current: CheckboxOption \| TdCheckboxProps; type: 'check' \| 'uncheck' }` | N diff --git a/src/checkbox/defaultProps.ts b/packages/components/checkbox/defaultProps.ts similarity index 100% rename from src/checkbox/defaultProps.ts rename to packages/components/checkbox/defaultProps.ts diff --git a/src/checkbox/index.ts b/packages/components/checkbox/index.ts similarity index 100% rename from src/checkbox/index.ts rename to packages/components/checkbox/index.ts diff --git a/src/checkbox/style/css.js b/packages/components/checkbox/style/css.js similarity index 100% rename from src/checkbox/style/css.js rename to packages/components/checkbox/style/css.js diff --git a/packages/components/checkbox/style/index.js b/packages/components/checkbox/style/index.js new file mode 100644 index 0000000000..ebcf5e6e11 --- /dev/null +++ b/packages/components/checkbox/style/index.js @@ -0,0 +1 @@ +import '../../../common/style/web/components/checkbox/_index.less'; diff --git a/src/checkbox/type.ts b/packages/components/checkbox/type.ts similarity index 98% rename from src/checkbox/type.ts rename to packages/components/checkbox/type.ts index 46972166ec..2fc5c5e6b2 100644 --- a/src/checkbox/type.ts +++ b/packages/components/checkbox/type.ts @@ -118,5 +118,6 @@ export type CheckboxGroupValue = Array; export interface CheckboxGroupChangeContext { e: ChangeEvent; current: CheckboxOption | TdCheckboxProps; + option: CheckboxOption | TdCheckboxProps; type: 'check' | 'uncheck'; } diff --git a/src/collapse/Collapse.tsx b/packages/components/collapse/Collapse.tsx similarity index 100% rename from src/collapse/Collapse.tsx rename to packages/components/collapse/Collapse.tsx diff --git a/src/collapse/CollapseContext.ts b/packages/components/collapse/CollapseContext.ts similarity index 100% rename from src/collapse/CollapseContext.ts rename to packages/components/collapse/CollapseContext.ts diff --git a/src/collapse/CollapsePanel.tsx b/packages/components/collapse/CollapsePanel.tsx similarity index 100% rename from src/collapse/CollapsePanel.tsx rename to packages/components/collapse/CollapsePanel.tsx diff --git a/src/collapse/__tests__/collapse.test.tsx b/packages/components/collapse/__tests__/collapse.test.tsx similarity index 100% rename from src/collapse/__tests__/collapse.test.tsx rename to packages/components/collapse/__tests__/collapse.test.tsx diff --git a/src/collapse/_example/base.tsx b/packages/components/collapse/_example/base.tsx similarity index 100% rename from src/collapse/_example/base.tsx rename to packages/components/collapse/_example/base.tsx diff --git a/src/collapse/_example/icon.tsx b/packages/components/collapse/_example/icon.tsx similarity index 100% rename from src/collapse/_example/icon.tsx rename to packages/components/collapse/_example/icon.tsx diff --git a/src/collapse/_example/mutex.tsx b/packages/components/collapse/_example/mutex.tsx similarity index 100% rename from src/collapse/_example/mutex.tsx rename to packages/components/collapse/_example/mutex.tsx diff --git a/src/collapse/_example/other.tsx b/packages/components/collapse/_example/other.tsx similarity index 100% rename from src/collapse/_example/other.tsx rename to packages/components/collapse/_example/other.tsx diff --git a/src/collapse/_example/rightSlot.tsx b/packages/components/collapse/_example/rightSlot.tsx similarity index 100% rename from src/collapse/_example/rightSlot.tsx rename to packages/components/collapse/_example/rightSlot.tsx diff --git a/src/collapse/_usage/index.jsx b/packages/components/collapse/_usage/index.jsx similarity index 100% rename from src/collapse/_usage/index.jsx rename to packages/components/collapse/_usage/index.jsx diff --git a/src/collapse/_usage/props.json b/packages/components/collapse/_usage/props.json similarity index 100% rename from src/collapse/_usage/props.json rename to packages/components/collapse/_usage/props.json diff --git a/src/collapse/collapse.en-US.md b/packages/components/collapse/collapse.en-US.md similarity index 82% rename from src/collapse/collapse.en-US.md rename to packages/components/collapse/collapse.en-US.md index e31ca8ae3b..9a974c5fdf 100644 --- a/src/collapse/collapse.en-US.md +++ b/packages/components/collapse/collapse.en-US.md @@ -10,12 +10,12 @@ style | Object | - | 样式,Typescript:`React.CSSProperties` | N borderless | Boolean | false | \- | N defaultExpandAll | Boolean | false | \- | N disabled | Boolean | - | \- | N -expandIcon | TNode | true | Typescript:`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +expandIcon | TNode | true | Typescript:`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N expandIconPlacement | String | left | options:left/right | N expandMutex | Boolean | false | \- | N expandOnRowClick | Boolean | true | \- | N -value | Array | [] | Typescript:`CollapseValue` `type CollapseValue = Array`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/collapse/type.ts) | N -defaultValue | Array | [] | uncontrolled property。Typescript:`CollapseValue` `type CollapseValue = Array`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/collapse/type.ts) | N +value | Array | [] | Typescript:`CollapseValue` `type CollapseValue = Array`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/collapse/type.ts) | N +defaultValue | Array | [] | uncontrolled property。Typescript:`CollapseValue` `type CollapseValue = Array`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/collapse/type.ts) | N onChange | Function | | Typescript:`(value: CollapseValue, context: { e: MouseEvent }) => void` | N ### CollapsePanel Props @@ -24,11 +24,11 @@ name | type | default | description | required -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式,Typescript:`React.CSSProperties` | N -children | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -content | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +children | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +content | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N destroyOnCollapse | Boolean | false | \- | N disabled | Boolean | undefined | \- | N -expandIcon | TNode | undefined | Typescript:`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -header | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -headerRightContent | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +expandIcon | TNode | undefined | Typescript:`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +header | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +headerRightContent | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N value | String / Number | - | \- | N diff --git a/src/collapse/collapse.md b/packages/components/collapse/collapse.md similarity index 85% rename from src/collapse/collapse.md rename to packages/components/collapse/collapse.md index 4674561633..e86d4d173f 100644 --- a/src/collapse/collapse.md +++ b/packages/components/collapse/collapse.md @@ -10,12 +10,12 @@ style | Object | - | 样式,TS 类型:`React.CSSProperties` | N borderless | Boolean | false | 是否为无边框模式 | N defaultExpandAll | Boolean | false | 默认是否展开全部 | N disabled | Boolean | - | 是否禁用面板展开/收起操作 | N -expandIcon | TNode | true | 展开图标。值为 undefined 或 false 则不显示展开图标;值为 true 显示默认图标;值类型为函数,则表示完全自定义展开图标。TS 类型:`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +expandIcon | TNode | true | 展开图标。值为 undefined 或 false 则不显示展开图标;值为 true 显示默认图标;值类型为函数,则表示完全自定义展开图标。TS 类型:`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N expandIconPlacement | String | left | 展开图标的位置,左侧或右侧。可选项:left/right | N expandMutex | Boolean | false | 每个面板互斥展开,每次只展开一个面板 | N expandOnRowClick | Boolean | true | 是否允许点击整行标题展开面板 | N -value | Array | [] | 展开的面板集合。TS 类型:`CollapseValue` `type CollapseValue = Array`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/collapse/type.ts) | N -defaultValue | Array | [] | 展开的面板集合。非受控属性。TS 类型:`CollapseValue` `type CollapseValue = Array`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/collapse/type.ts) | N +value | Array | [] | 展开的面板集合。TS 类型:`CollapseValue` `type CollapseValue = Array`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/collapse/type.ts) | N +defaultValue | Array | [] | 展开的面板集合。非受控属性。TS 类型:`CollapseValue` `type CollapseValue = Array`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/collapse/type.ts) | N onChange | Function | | TS 类型:`(value: CollapseValue, context: { e: MouseEvent }) => void`切换面板时触发,返回变化的值 | N ### CollapsePanel Props @@ -24,11 +24,11 @@ onChange | Function | | TS 类型:`(value: CollapseValue, context: { e: Mouse -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式,TS 类型:`React.CSSProperties` | N -children | TNode | - | 折叠面板内容,同 content。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -content | TNode | - | 折叠面板内容。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +children | TNode | - | 折叠面板内容,同 content。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +content | TNode | - | 折叠面板内容。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N destroyOnCollapse | Boolean | false | 当前面板处理折叠状态时,是否销毁面板内容 | N disabled | Boolean | undefined | 禁止当前面板展开,优先级大于 Collapse 的同名属性 | N -expandIcon | TNode | undefined | 当前折叠面板展开图标,优先级大于 Collapse 的同名属性。TS 类型:`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -header | TNode | - | 面板头内容。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -headerRightContent | TNode | - | 面板头的右侧区域,一般用于呈现面板操作。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +expandIcon | TNode | undefined | 当前折叠面板展开图标,优先级大于 Collapse 的同名属性。TS 类型:`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +header | TNode | - | 面板头内容。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +headerRightContent | TNode | - | 面板头的右侧区域,一般用于呈现面板操作。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N value | String / Number | - | 当前面板唯一标识,如果值为空则取当前面下标兜底作为唯一标识 | N diff --git a/src/collapse/defaultProps.ts b/packages/components/collapse/defaultProps.ts similarity index 100% rename from src/collapse/defaultProps.ts rename to packages/components/collapse/defaultProps.ts diff --git a/src/collapse/index.ts b/packages/components/collapse/index.ts similarity index 100% rename from src/collapse/index.ts rename to packages/components/collapse/index.ts diff --git a/src/collapse/style/css.js b/packages/components/collapse/style/css.js similarity index 100% rename from src/collapse/style/css.js rename to packages/components/collapse/style/css.js diff --git a/packages/components/collapse/style/index.js b/packages/components/collapse/style/index.js new file mode 100644 index 0000000000..f565ffd2af --- /dev/null +++ b/packages/components/collapse/style/index.js @@ -0,0 +1 @@ +import '../../../common/style/web/components/collapse/_index.less'; diff --git a/src/collapse/type.ts b/packages/components/collapse/type.ts similarity index 100% rename from src/collapse/type.ts rename to packages/components/collapse/type.ts diff --git a/src/color-picker/ColorPicker.tsx b/packages/components/color-picker/ColorPicker.tsx similarity index 100% rename from src/color-picker/ColorPicker.tsx rename to packages/components/color-picker/ColorPicker.tsx diff --git a/src/color-picker/ColorPickerPanel.tsx b/packages/components/color-picker/ColorPickerPanel.tsx similarity index 100% rename from src/color-picker/ColorPickerPanel.tsx rename to packages/components/color-picker/ColorPickerPanel.tsx diff --git a/src/color-picker/__tests__/color-picker.test.tsx b/packages/components/color-picker/__tests__/color-picker.test.tsx similarity index 100% rename from src/color-picker/__tests__/color-picker.test.tsx rename to packages/components/color-picker/__tests__/color-picker.test.tsx diff --git a/src/color-picker/_example/color-mode.tsx b/packages/components/color-picker/_example/color-mode.tsx similarity index 100% rename from src/color-picker/_example/color-mode.tsx rename to packages/components/color-picker/_example/color-mode.tsx diff --git a/src/color-picker/_example/enable-alpha.tsx b/packages/components/color-picker/_example/enable-alpha.tsx similarity index 100% rename from src/color-picker/_example/enable-alpha.tsx rename to packages/components/color-picker/_example/enable-alpha.tsx diff --git a/src/color-picker/_example/panel.tsx b/packages/components/color-picker/_example/panel.tsx similarity index 100% rename from src/color-picker/_example/panel.tsx rename to packages/components/color-picker/_example/panel.tsx diff --git a/src/color-picker/_example/recent-color.tsx b/packages/components/color-picker/_example/recent-color.tsx similarity index 100% rename from src/color-picker/_example/recent-color.tsx rename to packages/components/color-picker/_example/recent-color.tsx diff --git a/src/color-picker/_example/status-disabled.tsx b/packages/components/color-picker/_example/status-disabled.tsx similarity index 100% rename from src/color-picker/_example/status-disabled.tsx rename to packages/components/color-picker/_example/status-disabled.tsx diff --git a/src/color-picker/_example/status-readonly.tsx b/packages/components/color-picker/_example/status-readonly.tsx similarity index 100% rename from src/color-picker/_example/status-readonly.tsx rename to packages/components/color-picker/_example/status-readonly.tsx diff --git a/src/color-picker/_example/swatch-color.tsx b/packages/components/color-picker/_example/swatch-color.tsx similarity index 100% rename from src/color-picker/_example/swatch-color.tsx rename to packages/components/color-picker/_example/swatch-color.tsx diff --git a/src/color-picker/_example/trigger.tsx b/packages/components/color-picker/_example/trigger.tsx similarity index 100% rename from src/color-picker/_example/trigger.tsx rename to packages/components/color-picker/_example/trigger.tsx diff --git a/src/color-picker/_usage/props.json b/packages/components/color-picker/_usage/props.json similarity index 100% rename from src/color-picker/_usage/props.json rename to packages/components/color-picker/_usage/props.json diff --git a/src/color-picker/color-picker.en-US.md b/packages/components/color-picker/color-picker.en-US.md similarity index 68% rename from src/color-picker/color-picker.en-US.md rename to packages/components/color-picker/color-picker.en-US.md index 320bf8d046..a08d48b5ff 100644 --- a/src/color-picker/color-picker.en-US.md +++ b/packages/components/color-picker/color-picker.en-US.md @@ -8,21 +8,21 @@ name | type | default | description | required className | String | - | 类名 | N style | Object | - | 样式,Typescript:`React.CSSProperties` | N borderless | Boolean | false | \- | N -closeBtn | TNode | true | Typescript:`string \| boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +closeBtn | TNode | true | Typescript:`string \| boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N colorModes | Array | ()=> ['monochrome', 'linear-gradient'] | Typescript:`Array<'monochrome' \| 'linear-gradient'>` | N disabled | Boolean | - | \- | N enableAlpha | Boolean | false | \- | N format | String | RGB | options:RGB/RGBA/HSL/HSLA/HSB/HSV/HSVA/HEX/CMYK/CSS | N -inputProps | Object | - | Typescript:`InputProps`,[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/color-picker/type.ts) | N +inputProps | Object | - | Typescript:`InputProps`,[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/color-picker/type.ts) | N multiple | Boolean | false | \- | N -popupProps | Object | - | Typescript:`PopupProps`,[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/color-picker/type.ts) | N +popupProps | Object | - | Typescript:`PopupProps`,[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/color-picker/type.ts) | N recentColors | Array | [] | used color recently。Typescript:`boolean \| Array` | N defaultRecentColors | Array | [] | used color recently。uncontrolled property。Typescript:`boolean \| Array` | N -selectInputProps | Object | - | Typescript:`SelectInputProps`,[SelectInput API Documents](./select-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/color-picker/type.ts) | N +selectInputProps | Object | - | Typescript:`SelectInputProps`,[SelectInput API Documents](./select-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/color-picker/type.ts) | N showPrimaryColorPreview | Boolean | true | \- | N swatchColors | Array | - | swatch colors。Typescript:`Array` | N value | String | - | color value | N defaultValue | String | - | color value。uncontrolled property | N -onChange | Function | | Typescript:`(value: string, context: { color: ColorObject; trigger: ColorPickerChangeTrigger }) => void`[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/color-picker/type.ts)。`type ColorPickerChangeTrigger = 'palette-saturation-brightness' \| 'palette-saturation' \| 'palette-brightness' \| 'palette-hue-bar' \| 'palette-alpha-bar' \| 'input' \| 'preset' \| 'recent' ` | N -onPaletteBarChange | Function | | Typescript:`(context: { color: ColorObject }) => void`[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/color-picker/type.ts)。`interface ColorObject { alpha: number; css: string; hex: string; hex8: string; hsl: string; hsla: string; hsv: string; hsva: string; rgb: string; rgba: string; saturation: number; value: number; isGradient: boolean; linearGradient?: string; }` | N +onChange | Function | | Typescript:`(value: string, context: { color: ColorObject; trigger: ColorPickerChangeTrigger }) => void`[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/color-picker/type.ts)。`type ColorPickerChangeTrigger = 'palette-saturation-brightness' \| 'palette-saturation' \| 'palette-brightness' \| 'palette-hue-bar' \| 'palette-alpha-bar' \| 'input' \| 'preset' \| 'recent' ` | N +onPaletteBarChange | Function | | Typescript:`(context: { color: ColorObject }) => void`[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/color-picker/type.ts)。`interface ColorObject { alpha: number; css: string; hex: string; hex8: string; hsl: string; hsla: string; hsv: string; hsva: string; rgb: string; rgba: string; saturation: number; value: number; isGradient: boolean; linearGradient?: string; }` | N onRecentColorsChange | Function | | Typescript:`(value: Array) => void` | N diff --git a/src/color-picker/color-picker.md b/packages/components/color-picker/color-picker.md similarity index 81% rename from src/color-picker/color-picker.md rename to packages/components/color-picker/color-picker.md index 365c000419..9b9e5c4ca5 100644 --- a/src/color-picker/color-picker.md +++ b/packages/components/color-picker/color-picker.md @@ -8,21 +8,21 @@ className | String | - | 类名 | N style | Object | - | 样式,TS 类型:`React.CSSProperties` | N borderless | Boolean | false | 无边框模式 | N -closeBtn | TNode | true | 关闭按钮,值为 `true` 显示默认关闭按钮;值为 `false` 或 `undefined` 则不显示关闭按钮;值类型为函数,则表示自定义关闭按钮。TS 类型:`string \| boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +closeBtn | TNode | true | 关闭按钮,值为 `true` 显示默认关闭按钮;值为 `false` 或 `undefined` 则不显示关闭按钮;值类型为函数,则表示自定义关闭按钮。TS 类型:`string \| boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N colorModes | Array | ()=> ['monochrome', 'linear-gradient'] | 颜色模式选择。同时支持单色和渐变两种模式,可仅使用单色或者渐变其中一种模式,也可以同时使用。`monochrome` 表示单色,`linear-gradient` 表示渐变色。TS 类型:`Array<'monochrome' \| 'linear-gradient'>` | N disabled | Boolean | - | 是否禁用组件 | N enableAlpha | Boolean | false | 是否开启透明通道 | N format | String | RGB | 格式化色值。`enableAlpha` 为真时,`RGBA/HSLA/HSVA` 等值有效。可选项:RGB/RGBA/HSL/HSLA/HSB/HSV/HSVA/HEX/CMYK/CSS | N -inputProps | Object | - | 透传 Input 输入框组件全部属性。TS 类型:`InputProps`,[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/color-picker/type.ts) | N +inputProps | Object | - | 透传 Input 输入框组件全部属性。TS 类型:`InputProps`,[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/color-picker/type.ts) | N multiple | Boolean | false | 【开发中】是否允许选中多个颜色 | N -popupProps | Object | - | 透传 Popup 组件全部属性,如 `placement` `overlayStyle` `overlayClassName` `trigger`等。TS 类型:`PopupProps`,[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/color-picker/type.ts) | N +popupProps | Object | - | 透传 Popup 组件全部属性,如 `placement` `overlayStyle` `overlayClassName` `trigger`等。TS 类型:`PopupProps`,[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/color-picker/type.ts) | N recentColors | Array | [] | 最近使用的颜色。值为 [] 表示以组件内部的“最近使用颜色”为准,值长度大于 0 则以该值为准显示“最近使用颜色”。值为 null 则完全不显示“最近使用颜色”。TS 类型:`boolean \| Array` | N defaultRecentColors | Array | [] | 最近使用的颜色。值为 [] 表示以组件内部的“最近使用颜色”为准,值长度大于 0 则以该值为准显示“最近使用颜色”。值为 null 则完全不显示“最近使用颜色”。非受控属性。TS 类型:`boolean \| Array` | N -selectInputProps | Object | - | 透传 SelectInputProps 筛选器输入框组件全部属性。TS 类型:`SelectInputProps`,[SelectInput API Documents](./select-input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/color-picker/type.ts) | N +selectInputProps | Object | - | 透传 SelectInputProps 筛选器输入框组件全部属性。TS 类型:`SelectInputProps`,[SelectInput API Documents](./select-input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/color-picker/type.ts) | N showPrimaryColorPreview | Boolean | true | 是否展示颜色选择条右侧的颜色预览区域 | N swatchColors | Array | - | 系统预设的颜色样例,值为 `null` 或 `[]` 则不显示系统色,值为 `undefined` 会显示组件内置的系统默认色。TS 类型:`Array` | N value | String | - | 色值 | N defaultValue | String | - | 色值。非受控属性 | N -onChange | Function | | TS 类型:`(value: string, context: { color: ColorObject; trigger: ColorPickerChangeTrigger }) => void`选中的色值发生变化时触发,第一个参数 `value` 表示新色值,`context.color` 表示当前调色板控制器的色值,`context.trigger` 表示触发颜色变化的来源。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/color-picker/type.ts)。`type ColorPickerChangeTrigger = 'palette-saturation-brightness' \| 'palette-saturation' \| 'palette-brightness' \| 'palette-hue-bar' \| 'palette-alpha-bar' \| 'input' \| 'preset' \| 'recent' ` | N -onPaletteBarChange | Function | | TS 类型:`(context: { color: ColorObject }) => void`调色板控制器的值变化时触发,`context.color` 指调色板控制器的值。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/color-picker/type.ts)。`interface ColorObject { alpha: number; css: string; hex: string; hex8: string; hsl: string; hsla: string; hsv: string; hsva: string; rgb: string; rgba: string; saturation: number; value: number; isGradient: boolean; linearGradient?: string; }` | N +onChange | Function | | TS 类型:`(value: string, context: { color: ColorObject; trigger: ColorPickerChangeTrigger }) => void`选中的色值发生变化时触发,第一个参数 `value` 表示新色值,`context.color` 表示当前调色板控制器的色值,`context.trigger` 表示触发颜色变化的来源。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/color-picker/type.ts)。`type ColorPickerChangeTrigger = 'palette-saturation-brightness' \| 'palette-saturation' \| 'palette-brightness' \| 'palette-hue-bar' \| 'palette-alpha-bar' \| 'input' \| 'preset' \| 'recent' ` | N +onPaletteBarChange | Function | | TS 类型:`(context: { color: ColorObject }) => void`调色板控制器的值变化时触发,`context.color` 指调色板控制器的值。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/color-picker/type.ts)。`interface ColorObject { alpha: number; css: string; hex: string; hex8: string; hsl: string; hsla: string; hsv: string; hsva: string; rgb: string; rgba: string; saturation: number; value: number; isGradient: boolean; linearGradient?: string; }` | N onRecentColorsChange | Function | | TS 类型:`(value: Array) => void`最近使用颜色发生变化时触发 | N diff --git a/src/color-picker/components/panel/alpha.tsx b/packages/components/color-picker/components/panel/alpha.tsx similarity index 100% rename from src/color-picker/components/panel/alpha.tsx rename to packages/components/color-picker/components/panel/alpha.tsx diff --git a/src/color-picker/components/panel/format/config.ts b/packages/components/color-picker/components/panel/format/config.ts similarity index 100% rename from src/color-picker/components/panel/format/config.ts rename to packages/components/color-picker/components/panel/format/config.ts diff --git a/src/color-picker/components/panel/format/index.tsx b/packages/components/color-picker/components/panel/format/index.tsx similarity index 89% rename from src/color-picker/components/panel/format/index.tsx rename to packages/components/color-picker/components/panel/format/index.tsx index bb4c3e1685..9426afdb3b 100644 --- a/src/color-picker/components/panel/format/index.tsx +++ b/packages/components/color-picker/components/panel/format/index.tsx @@ -1,9 +1,9 @@ import React, { useState } from 'react'; -import upperCase from 'lodash/upperCase'; +import { upperCase } from 'lodash-es'; import Select from '../../../../select'; import FormatInput from './inputs'; -import Color from '../../../../_common/js/color-picker/color'; -import { FORMATS } from '../../../../_common/js/color-picker/constants'; +import Color from '../../../../../common/js/color-picker/color'; +import { FORMATS } from '../../../../../common/js/color-picker/constants'; import { TdColorPickerProps } from '../../../type'; export interface TdColorFormatProps extends TdColorPickerProps { diff --git a/src/color-picker/components/panel/format/inputs.tsx b/packages/components/color-picker/components/panel/format/inputs.tsx similarity index 97% rename from src/color-picker/components/panel/format/inputs.tsx rename to packages/components/color-picker/components/panel/format/inputs.tsx index f85cdbaae8..d95e6ed265 100644 --- a/src/color-picker/components/panel/format/inputs.tsx +++ b/packages/components/color-picker/components/panel/format/inputs.tsx @@ -1,6 +1,6 @@ import React, { useRef, useEffect } from 'react'; -import throttle from 'lodash/throttle'; -import Color from '../../../../_common/js/color-picker/color'; +import { throttle } from 'lodash-es'; +import Color from '../../../../../common/js/color-picker/color'; import Input from '../../../../input'; import InputNumber from '../../../../input-number'; import { FORMAT_INPUT_CONFIG } from './config'; diff --git a/src/color-picker/components/panel/format/style/css.js b/packages/components/color-picker/components/panel/format/style/css.js similarity index 100% rename from src/color-picker/components/panel/format/style/css.js rename to packages/components/color-picker/components/panel/format/style/css.js diff --git a/src/color-picker/components/panel/format/style/index.js b/packages/components/color-picker/components/panel/format/style/index.js similarity index 100% rename from src/color-picker/components/panel/format/style/index.js rename to packages/components/color-picker/components/panel/format/style/index.js diff --git a/src/color-picker/components/panel/header.tsx b/packages/components/color-picker/components/panel/header.tsx similarity index 94% rename from src/color-picker/components/panel/header.tsx rename to packages/components/color-picker/components/panel/header.tsx index c1a54242aa..8309adfc6c 100644 --- a/src/color-picker/components/panel/header.tsx +++ b/packages/components/color-picker/components/panel/header.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { COLOR_MODES } from '../../../_common/js/color-picker/constants'; +import { COLOR_MODES } from '../../../../common/js/color-picker/constants'; import Radio, { RadioValue } from '../../../radio'; import { TdColorModes } from '../../interface'; import { TdColorPickerProps } from '../../type'; diff --git a/src/color-picker/components/panel/hue.tsx b/packages/components/color-picker/components/panel/hue.tsx similarity index 100% rename from src/color-picker/components/panel/hue.tsx rename to packages/components/color-picker/components/panel/hue.tsx diff --git a/src/color-picker/components/panel/index.tsx b/packages/components/color-picker/components/panel/index.tsx similarity index 97% rename from src/color-picker/components/panel/index.tsx rename to packages/components/color-picker/components/panel/index.tsx index 8c17bf47d7..0355ce2990 100644 --- a/src/color-picker/components/panel/index.tsx +++ b/packages/components/color-picker/components/panel/index.tsx @@ -6,14 +6,14 @@ import useControlled from '../../../hooks/useControlled'; import { useLocaleReceiver } from '../../../locale/LocalReceiver'; import useClassName from '../../hooks/useClassNames'; import PanelHeader from './header'; -import Color, { getColorObject } from '../../../_common/js/color-picker/color'; -import { GradientColorPoint } from '../../../_common/js/color-picker/gradient'; +import Color, { getColorObject } from '../../../../common/js/color-picker/color'; +import { GradientColorPoint } from '../../../../common/js/color-picker/gradient'; import { DEFAULT_COLOR, DEFAULT_LINEAR_GRADIENT, TD_COLOR_USED_COLORS_MAX_SIZE, DEFAULT_SYSTEM_SWATCH_COLORS, -} from '../../../_common/js/color-picker/constants'; +} from '../../../../common/js/color-picker/constants'; import { ColorPickerProps, TdColorModes, TdColorSaturationData } from '../../interface'; import { ColorPickerChangeTrigger, TdColorPickerProps } from '../../type'; import { colorPickerDefaultProps } from '../../defaultProps'; @@ -56,7 +56,6 @@ const Panel = forwardRef((props, ref) => { const [recentlyUsedColors, setRecentlyUsedColors] = useControlled(props, 'recentColors', onRecentColorsChange, { defaultRecentColors: colorPickerDefaultProps.recentColors, }); - const colorInstanceRef = useRef(new Color(innerValue || defaultEmptyColor)); const getModeByColor = colorInstanceRef.current.isGradient ? 'linear-gradient' : 'monochrome'; const formatRef = useRef(colorInstanceRef.current.isGradient ? 'CSS' : format ?? 'RGB'); @@ -80,12 +79,14 @@ const Panel = forwardRef((props, ref) => { const emitColorChange = useCallback( (trigger?: ColorPickerChangeTrigger) => { - setInnerValue(formatValue(), { + const value = formatValue(); + setInnerValue(value, { color: getColorObject(colorInstanceRef.current), trigger: trigger || 'palette-saturation-brightness', }); + update(value); }, - [formatValue, setInnerValue], + [formatValue, setInnerValue, update], ); useEffect(() => { diff --git a/src/color-picker/components/panel/linear-gradient.tsx b/packages/components/color-picker/components/panel/linear-gradient.tsx similarity index 97% rename from src/color-picker/components/panel/linear-gradient.tsx rename to packages/components/color-picker/components/panel/linear-gradient.tsx index b16b89ee72..6eb484f006 100644 --- a/src/color-picker/components/panel/linear-gradient.tsx +++ b/packages/components/color-picker/components/panel/linear-gradient.tsx @@ -1,11 +1,11 @@ import React, { KeyboardEvent, MouseEvent as ReactMouseEvent, useCallback, useEffect, useRef, useState } from 'react'; -import cloneDeep from 'lodash/cloneDeep'; +import { cloneDeep } from 'lodash-es'; import classNames from 'classnames'; import useClassName from '../../hooks/useClassNames'; -import { genGradientPoint, gradientColors2string } from '../../../_common/js/color-picker/color'; -import { GradientColorPoint } from '../../../_common/js/color-picker/gradient'; +import { genGradientPoint, gradientColors2string } from '../../../../common/js/color-picker/color'; +import { GradientColorPoint } from '../../../../common/js/color-picker/gradient'; import useCommonClassName from '../../../hooks/useCommonClassName'; -import { GRADIENT_SLIDER_DEFAULT_WIDTH } from '../../../_common/js/color-picker/constants'; +import { GRADIENT_SLIDER_DEFAULT_WIDTH } from '../../../../common/js/color-picker/constants'; import InputNumber from '../../../input-number'; const DELETE_KEYS: string[] = ['delete', 'backspace']; diff --git a/src/color-picker/components/panel/saturation.tsx b/packages/components/color-picker/components/panel/saturation.tsx similarity index 98% rename from src/color-picker/components/panel/saturation.tsx rename to packages/components/color-picker/components/panel/saturation.tsx index 72bc6b8b1e..542a9784e1 100644 --- a/src/color-picker/components/panel/saturation.tsx +++ b/packages/components/color-picker/components/panel/saturation.tsx @@ -2,7 +2,7 @@ import React, { useRef, useEffect, useCallback } from 'react'; import { SATURATION_PANEL_DEFAULT_HEIGHT, SATURATION_PANEL_DEFAULT_WIDTH, -} from '../../../_common/js/color-picker/constants'; +} from '../../../../common/js/color-picker/constants'; import { TdColorBaseProps } from '../../interface'; import useDrag, { Coordinate } from '../../../hooks/useDrag'; diff --git a/src/color-picker/components/panel/slider.tsx b/packages/components/color-picker/components/panel/slider.tsx similarity index 97% rename from src/color-picker/components/panel/slider.tsx rename to packages/components/color-picker/components/panel/slider.tsx index 38f90dce9c..7f36dd9e78 100644 --- a/src/color-picker/components/panel/slider.tsx +++ b/packages/components/color-picker/components/panel/slider.tsx @@ -1,6 +1,6 @@ import React, { useRef, useEffect } from 'react'; import classnames from 'classnames'; -import { SLIDER_DEFAULT_WIDTH } from '../../../_common/js/color-picker/constants'; +import { SLIDER_DEFAULT_WIDTH } from '../../../../common/js/color-picker/constants'; import useDrag, { Coordinate } from '../../../hooks/useDrag'; import { TdColorBaseProps } from '../../interface'; import useStyles from '../../hooks/useStyles'; diff --git a/src/color-picker/components/panel/style/css.js b/packages/components/color-picker/components/panel/style/css.js similarity index 100% rename from src/color-picker/components/panel/style/css.js rename to packages/components/color-picker/components/panel/style/css.js diff --git a/src/color-picker/components/panel/style/index.js b/packages/components/color-picker/components/panel/style/index.js similarity index 100% rename from src/color-picker/components/panel/style/index.js rename to packages/components/color-picker/components/panel/style/index.js diff --git a/src/color-picker/components/panel/swatches.tsx b/packages/components/color-picker/components/panel/swatches.tsx similarity index 97% rename from src/color-picker/components/panel/swatches.tsx rename to packages/components/color-picker/components/panel/swatches.tsx index 99418fe948..e19e65dce1 100644 --- a/src/color-picker/components/panel/swatches.tsx +++ b/packages/components/color-picker/components/panel/swatches.tsx @@ -2,7 +2,7 @@ import React from 'react'; import classnames from 'classnames'; import { DeleteIcon as TdDeleteIcon, AddIcon as TdAddIcon } from 'tdesign-icons-react'; import useGlobalIcon from '../../../hooks/useGlobalIcon'; -import Color from '../../../_common/js/color-picker/color'; +import Color from '../../../../common/js/color-picker/color'; import { TdColorBaseProps } from '../../interface'; import useCommonClassName from '../../../hooks/useCommonClassName'; diff --git a/src/color-picker/components/style/css.js b/packages/components/color-picker/components/style/css.js similarity index 100% rename from src/color-picker/components/style/css.js rename to packages/components/color-picker/components/style/css.js diff --git a/src/color-picker/components/style/index.js b/packages/components/color-picker/components/style/index.js similarity index 100% rename from src/color-picker/components/style/index.js rename to packages/components/color-picker/components/style/index.js diff --git a/src/color-picker/components/trigger.tsx b/packages/components/color-picker/components/trigger.tsx similarity index 95% rename from src/color-picker/components/trigger.tsx rename to packages/components/color-picker/components/trigger.tsx index 52c4cb55d3..85eac6a977 100644 --- a/src/color-picker/components/trigger.tsx +++ b/packages/components/color-picker/components/trigger.tsx @@ -1,7 +1,7 @@ import React from 'react'; import classNames from 'classnames'; import { Input } from '../../input'; -import ColorLib from '../../_common/js/color-picker/color'; +import ColorLib from '../../../common/js/color-picker/color'; import { TdColorPickerProps } from '..'; import useClassName from '../hooks/useClassNames'; import useControlled from '../../hooks/useControlled'; diff --git a/src/color-picker/defaultProps.ts b/packages/components/color-picker/defaultProps.ts similarity index 100% rename from src/color-picker/defaultProps.ts rename to packages/components/color-picker/defaultProps.ts diff --git a/src/color-picker/hooks/useClassNames.ts b/packages/components/color-picker/hooks/useClassNames.ts similarity index 100% rename from src/color-picker/hooks/useClassNames.ts rename to packages/components/color-picker/hooks/useClassNames.ts diff --git a/src/color-picker/hooks/useStyles.ts b/packages/components/color-picker/hooks/useStyles.ts similarity index 91% rename from src/color-picker/hooks/useStyles.ts rename to packages/components/color-picker/hooks/useStyles.ts index 71fbeacbef..a51b5896ca 100644 --- a/src/color-picker/hooks/useStyles.ts +++ b/packages/components/color-picker/hooks/useStyles.ts @@ -1,5 +1,5 @@ import { CSSProperties, useEffect, useState } from 'react'; -import type { Color } from '../../_common/js/color-picker/color'; +import type { Color } from '../../../common/js/color-picker/color'; export interface TdColorSliderStyleParams { color: Color; diff --git a/src/color-picker/index.ts b/packages/components/color-picker/index.ts similarity index 100% rename from src/color-picker/index.ts rename to packages/components/color-picker/index.ts diff --git a/src/color-picker/interface.ts b/packages/components/color-picker/interface.ts similarity index 91% rename from src/color-picker/interface.ts rename to packages/components/color-picker/interface.ts index ceb0782ff0..058089d6f2 100644 --- a/src/color-picker/interface.ts +++ b/packages/components/color-picker/interface.ts @@ -1,7 +1,7 @@ import React from 'react'; import { ColorObject, ColorPickerChangeTrigger, TdColorPickerProps } from '.'; import { StyledProps } from '../common'; -import type { Color } from '../_common/js/color-picker/color'; +import type { Color } from '../../common/js/color-picker/color'; export interface ColorPickerProps extends TdColorPickerProps, StyledProps { togglePopup?: Function; diff --git a/src/color-picker/style/css.js b/packages/components/color-picker/style/css.js similarity index 100% rename from src/color-picker/style/css.js rename to packages/components/color-picker/style/css.js diff --git a/packages/components/color-picker/style/index.js b/packages/components/color-picker/style/index.js new file mode 100644 index 0000000000..48a7f1fd72 --- /dev/null +++ b/packages/components/color-picker/style/index.js @@ -0,0 +1 @@ +import '../../../common/style/web/components/color-picker/_index.less'; diff --git a/src/color-picker/type.ts b/packages/components/color-picker/type.ts similarity index 100% rename from src/color-picker/type.ts rename to packages/components/color-picker/type.ts diff --git a/src/comment/Comment.tsx b/packages/components/comment/Comment.tsx similarity index 100% rename from src/comment/Comment.tsx rename to packages/components/comment/Comment.tsx diff --git a/src/comment/__tests__/comment.test.tsx b/packages/components/comment/__tests__/comment.test.tsx similarity index 100% rename from src/comment/__tests__/comment.test.tsx rename to packages/components/comment/__tests__/comment.test.tsx diff --git a/src/comment/_example/base.tsx b/packages/components/comment/_example/base.tsx similarity index 100% rename from src/comment/_example/base.tsx rename to packages/components/comment/_example/base.tsx diff --git a/src/comment/_example/list.tsx b/packages/components/comment/_example/list.tsx similarity index 100% rename from src/comment/_example/list.tsx rename to packages/components/comment/_example/list.tsx diff --git a/src/comment/_example/operation.tsx b/packages/components/comment/_example/operation.tsx similarity index 100% rename from src/comment/_example/operation.tsx rename to packages/components/comment/_example/operation.tsx diff --git a/src/comment/_example/quote.tsx b/packages/components/comment/_example/quote.tsx similarity index 100% rename from src/comment/_example/quote.tsx rename to packages/components/comment/_example/quote.tsx diff --git a/src/comment/_example/reply-form.tsx b/packages/components/comment/_example/reply-form.tsx similarity index 100% rename from src/comment/_example/reply-form.tsx rename to packages/components/comment/_example/reply-form.tsx diff --git a/src/comment/_example/reply.tsx b/packages/components/comment/_example/reply.tsx similarity index 100% rename from src/comment/_example/reply.tsx rename to packages/components/comment/_example/reply.tsx diff --git a/src/comment/_usage/props.json b/packages/components/comment/_usage/props.json similarity index 100% rename from src/comment/_usage/props.json rename to packages/components/comment/_usage/props.json diff --git a/src/comment/comment.en-US.md b/packages/components/comment/comment.en-US.md similarity index 71% rename from src/comment/comment.en-US.md rename to packages/components/comment/comment.en-US.md index 41007c7300..f4fc90fab7 100644 --- a/src/comment/comment.en-US.md +++ b/packages/components/comment/comment.en-US.md @@ -8,10 +8,10 @@ name | type | default | description | required -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式,Typescript:`React.CSSProperties` | N -actions | Array | - | Typescript:`Array`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -author | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -avatar | TNode | - | Typescript:`string \| AvatarProps \| TNode`,[Avatar API Documents](./avatar?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/comment/type.ts) | N -content | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -datetime | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -quote | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -reply | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +actions | Array | - | Typescript:`Array`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +author | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +avatar | TNode | - | Typescript:`string \| AvatarProps \| TNode`,[Avatar API Documents](./avatar?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/comment/type.ts) | N +content | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +datetime | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +quote | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +reply | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N diff --git a/src/comment/comment.md b/packages/components/comment/comment.md similarity index 73% rename from src/comment/comment.md rename to packages/components/comment/comment.md index f9bbf6f31e..63c651b353 100644 --- a/src/comment/comment.md +++ b/packages/components/comment/comment.md @@ -7,10 +7,10 @@ -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式,TS 类型:`React.CSSProperties` | N -actions | Array | - | 操作。TS 类型:`Array`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -author | TNode | - | 作者。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -avatar | TNode | - | 头像。TS 类型:`string \| AvatarProps \| TNode`,[Avatar API Documents](./avatar?tab=api)。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/comment/type.ts) | N -content | TNode | - | 内容。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -datetime | TNode | - | 时间。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -quote | TNode | - | 引用。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -reply | TNode | - | 回复。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +actions | Array | - | 操作。TS 类型:`Array`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +author | TNode | - | 作者。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +avatar | TNode | - | 头像。TS 类型:`string \| AvatarProps \| TNode`,[Avatar API Documents](./avatar?tab=api)。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/comment/type.ts) | N +content | TNode | - | 内容。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +datetime | TNode | - | 时间。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +quote | TNode | - | 引用。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +reply | TNode | - | 回复。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N diff --git a/src/comment/defaultProps.ts b/packages/components/comment/defaultProps.ts similarity index 100% rename from src/comment/defaultProps.ts rename to packages/components/comment/defaultProps.ts diff --git a/src/comment/index.ts b/packages/components/comment/index.ts similarity index 100% rename from src/comment/index.ts rename to packages/components/comment/index.ts diff --git a/src/comment/style/css.js b/packages/components/comment/style/css.js similarity index 100% rename from src/comment/style/css.js rename to packages/components/comment/style/css.js diff --git a/packages/components/comment/style/index.js b/packages/components/comment/style/index.js new file mode 100644 index 0000000000..63519529de --- /dev/null +++ b/packages/components/comment/style/index.js @@ -0,0 +1 @@ +import '../../../common/style/web/components/comment/_index.less'; diff --git a/src/comment/type.ts b/packages/components/comment/type.ts similarity index 100% rename from src/comment/type.ts rename to packages/components/comment/type.ts diff --git a/src/common.ts b/packages/components/common.ts similarity index 100% rename from src/common.ts rename to packages/components/common.ts diff --git a/src/common/Check.tsx b/packages/components/common/Check.tsx similarity index 98% rename from src/common/Check.tsx rename to packages/components/common/Check.tsx index f2a0f07cbc..ea6d36cbb4 100644 --- a/src/common/Check.tsx +++ b/packages/components/common/Check.tsx @@ -1,6 +1,6 @@ import React, { forwardRef, useContext, MouseEvent, ChangeEvent } from 'react'; import classNames from 'classnames'; -import isBoolean from 'lodash/isBoolean'; +import { isBoolean } from 'lodash-es'; import { omit } from '../_util/helper'; import { StyledProps } from '../common'; import useConfig from '../hooks/useConfig'; diff --git a/src/common/FakeArrow.tsx b/packages/components/common/FakeArrow.tsx similarity index 100% rename from src/common/FakeArrow.tsx rename to packages/components/common/FakeArrow.tsx diff --git a/src/common/Portal.tsx b/packages/components/common/Portal.tsx similarity index 100% rename from src/common/Portal.tsx rename to packages/components/common/Portal.tsx diff --git a/src/common/README.md b/packages/components/common/README.md similarity index 100% rename from src/common/README.md rename to packages/components/common/README.md diff --git a/src/common/__tests__/portal.test.tsx b/packages/components/common/__tests__/portal.test.tsx similarity index 100% rename from src/common/__tests__/portal.test.tsx rename to packages/components/common/__tests__/portal.test.tsx diff --git a/src/config-provider/ConfigContext.tsx b/packages/components/config-provider/ConfigContext.tsx similarity index 88% rename from src/config-provider/ConfigContext.tsx rename to packages/components/config-provider/ConfigContext.tsx index 92d8a1fb7e..fa568e8bb4 100644 --- a/src/config-provider/ConfigContext.tsx +++ b/packages/components/config-provider/ConfigContext.tsx @@ -1,7 +1,7 @@ import { createContext } from 'react'; -import merge from 'lodash/merge'; +import { merge } from 'lodash-es'; import defaultLocale from '../locale/zh_CN'; -import defaultConfig from '../_common/js/global-config/default-config'; +import defaultConfig from '../../common/js/global-config/default-config'; import { GlobalConfigProvider } from './type'; export enum EAnimationType { diff --git a/src/config-provider/ConfigProvider.tsx b/packages/components/config-provider/ConfigProvider.tsx similarity index 94% rename from src/config-provider/ConfigProvider.tsx rename to packages/components/config-provider/ConfigProvider.tsx index 27891d94c4..e512800f54 100644 --- a/src/config-provider/ConfigProvider.tsx +++ b/packages/components/config-provider/ConfigProvider.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import _mergeWith from 'lodash/mergeWith'; +import { mergeWith as _mergeWith } from 'lodash-es'; import ConfigContext, { defaultGlobalConfig, Config } from './ConfigContext'; import { GlobalConfigProvider } from './type'; diff --git a/src/config-provider/_example/calendar.tsx b/packages/components/config-provider/_example/calendar.tsx similarity index 98% rename from src/config-provider/_example/calendar.tsx rename to packages/components/config-provider/_example/calendar.tsx index 15c9d8c636..cb697bdb32 100644 --- a/src/config-provider/_example/calendar.tsx +++ b/packages/components/config-provider/_example/calendar.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import merge from 'lodash/merge'; +import { merge } from 'lodash-es'; import { ConfigProvider, Calendar } from 'tdesign-react'; import enConfig from 'tdesign-react/es/locale/en_US'; diff --git a/src/config-provider/_example/date-picker.tsx b/packages/components/config-provider/_example/date-picker.tsx similarity index 97% rename from src/config-provider/_example/date-picker.tsx rename to packages/components/config-provider/_example/date-picker.tsx index c7074f0c82..93b1de9552 100644 --- a/src/config-provider/_example/date-picker.tsx +++ b/packages/components/config-provider/_example/date-picker.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import merge from 'lodash/merge'; +import { merge } from 'lodash-es'; import { ConfigProvider, DatePicker, DateRangePicker, Space } from 'tdesign-react'; import enConfig from 'tdesign-react/es/locale/en_US'; diff --git a/src/config-provider/_example/dialog.tsx b/packages/components/config-provider/_example/dialog.tsx similarity index 97% rename from src/config-provider/_example/dialog.tsx rename to packages/components/config-provider/_example/dialog.tsx index f7d13377c7..1e8e3bb0ec 100644 --- a/src/config-provider/_example/dialog.tsx +++ b/packages/components/config-provider/_example/dialog.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import merge from 'lodash/merge'; +import { merge } from 'lodash-es'; import { ConfigProvider, DialogCard, Space } from 'tdesign-react'; import enConfig from 'tdesign-react/es/locale/en_US'; diff --git a/src/config-provider/_example/global.tsx b/packages/components/config-provider/_example/global.tsx similarity index 97% rename from src/config-provider/_example/global.tsx rename to packages/components/config-provider/_example/global.tsx index 1a18faf60a..90bb968544 100644 --- a/src/config-provider/_example/global.tsx +++ b/packages/components/config-provider/_example/global.tsx @@ -1,6 +1,6 @@ /* eslint-disable react/no-unescaped-entities */ import React from 'react'; -import merge from 'lodash/merge'; +import { merge } from 'lodash-es'; import { ConfigProvider, Space } from 'tdesign-react'; import enConfig from 'tdesign-react/es/locale/en_US'; diff --git a/src/config-provider/_example/others.tsx b/packages/components/config-provider/_example/others.tsx similarity index 99% rename from src/config-provider/_example/others.tsx rename to packages/components/config-provider/_example/others.tsx index 2835533a76..127bfc469a 100644 --- a/src/config-provider/_example/others.tsx +++ b/packages/components/config-provider/_example/others.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import merge from 'lodash/merge'; +import { merge } from 'lodash-es'; import { ConfigProvider, Form, diff --git a/src/config-provider/_example/pagination.tsx b/packages/components/config-provider/_example/pagination.tsx similarity index 94% rename from src/config-provider/_example/pagination.tsx rename to packages/components/config-provider/_example/pagination.tsx index aa14399f6d..3ffff40dcd 100644 --- a/src/config-provider/_example/pagination.tsx +++ b/packages/components/config-provider/_example/pagination.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import merge from 'lodash/merge'; +import { merge } from 'lodash-es'; import { ConfigProvider, Pagination } from 'tdesign-react'; import enConfig from 'tdesign-react/es/locale/en_US'; diff --git a/src/config-provider/_example/popconfirm.tsx b/packages/components/config-provider/_example/popconfirm.tsx similarity index 97% rename from src/config-provider/_example/popconfirm.tsx rename to packages/components/config-provider/_example/popconfirm.tsx index 46e82a1ac9..06a3c90f87 100644 --- a/src/config-provider/_example/popconfirm.tsx +++ b/packages/components/config-provider/_example/popconfirm.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import merge from 'lodash/merge'; +import { merge } from 'lodash-es'; import { ConfigProvider, Popconfirm, Button, Space } from 'tdesign-react'; import enConfig from 'tdesign-react/es/locale/en_US'; diff --git a/src/config-provider/_example/table.tsx b/packages/components/config-provider/_example/table.tsx similarity index 98% rename from src/config-provider/_example/table.tsx rename to packages/components/config-provider/_example/table.tsx index 7515a585b6..cee62c4874 100644 --- a/src/config-provider/_example/table.tsx +++ b/packages/components/config-provider/_example/table.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import merge from 'lodash/merge'; +import { merge } from 'lodash-es'; import { ConfigProvider, Table, Space } from 'tdesign-react'; import { ChevronRightIcon, CaretDownSmallIcon } from 'tdesign-icons-react'; import enConfig from 'tdesign-react/es/locale/en_US'; diff --git a/src/config-provider/config-provider.en-US.md b/packages/components/config-provider/config-provider.en-US.md similarity index 89% rename from src/config-provider/config-provider.en-US.md rename to packages/components/config-provider/config-provider.en-US.md index 31db4c7720..a4afa7ca24 100644 --- a/src/config-provider/config-provider.en-US.md +++ b/packages/components/config-provider/config-provider.en-US.md @@ -1,14 +1,22 @@ :: BASE_DOC :: ## API + +### ConfigProvider Props + +name | type | default | description | required +-- | -- | -- | -- | -- +globalConfig | Object | - | global config。Typescript:`GlobalConfigProvider` | N + ### GlobalConfigProvider name | type | default | description | required -- | -- | -- | -- | -- alert | Object | - | Alert global configs。Typescript:`AlertConfig` | N anchor | Object | - | Anchor global configs。Typescript:`AnchorConfig` | N -animation | Object | - | Typescript:`Partial>>` `type AnimationType = 'ripple' \| 'expand' \| 'fade'`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/config-provider/type.ts) | N -attach | String / Object / Function | - | Typescript:`AttachNode \| { imageViewer?: AttachNode; popup?: AttachNode; dialog?: AttachNode; drawer?: AttachNode; }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +animation | Object | - | Typescript:`Partial>>` `type AnimationType = 'ripple' \| 'expand' \| 'fade'`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/config-provider/type.ts) | N +attach | String / Object / Function | - | Typescript:`AttachNode \| { imageViewer?: AttachNode; popup?: AttachNode; dialog?: AttachNode; drawer?: AttachNode; }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +autoComplete | Object | - | AutoComplete global configs。Typescript:`AutoCompleteConfig` | N calendar | Object | - | Calendar global configs。Typescript:`CalendarConfig` | N cascader | Object | - | Cascader global configs。Typescript:`CascaderConfig` | N classPrefix | String | t | \- | N @@ -20,7 +28,7 @@ drawer | Object | - | Drawer global configs。Typescript:`DrawerConfig` | N empty | Object | - | Empty global configs。Typescript:`EmptyConfig` | N form | Object | - | Form global configs。Typescript:`FormConfig` | N guide | Object | - | Guide global configs。Typescript:`GuideConfig` | N -icon | Object | - | icon config。Typescript:`IconConfig` `type IconConfig = GlobalIconConfig` `import { GlobalIconConfig } from '@icon'`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/config-provider/type.ts) | N +icon | Object | - | icon config。Typescript:`IconConfig` `type IconConfig = GlobalIconConfig` `import { GlobalIconConfig } from '@icon'`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/config-provider/type.ts) | N image | Object | - | image global configs。Typescript:`ImageConfig` | N imageViewer | Object | - | imageViewer global configs。Typescript:`ImageViewerConfig` | N input | Object | - | Input global configs。Typescript:`InputConfig` | N @@ -61,7 +69,7 @@ total | String | - | \- | N name | type | default | description | required -- | -- | -- | -- | -- cellMonth | String | - | \- | N -controllerConfig | Object | - | Typescript:`CalendarController`,[Calendar API Documents](./calendar?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/config-provider/type.ts) | N +controllerConfig | Object | - | Typescript:`CalendarController`,[Calendar API Documents](./calendar?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/config-provider/type.ts) | N fillWithZero | Boolean | true | \- | N firstDayOfWeek | Number | 1 | options: 1/2/3/4/5/6/7 | N hideWeekend | String | - | \- | N @@ -128,7 +136,7 @@ placeholder | Object | - | Typescript:`{ date?: string; month?: string; year?: preDecade | String | - | pre decade text | N preMonth | String | - | pre month text | N preYear | String | - | pre year text | N -presets | Object | - | Typescript:`ConfigPresetDate` `interface ConfigPresetDate { [name: string]: DateConfigValue \| (() => DateConfigValue) }` `type DateConfigValue = string \| Date \| Array`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/config-provider/type.ts) | N +presets | Object | - | Typescript:`ConfigPresetDate` `interface ConfigPresetDate { [name: string]: DateConfigValue \| (() => DateConfigValue) }` `type DateConfigValue = string \| Date \| Array`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/config-provider/type.ts) | N quarters | Array | - | Typescript:`string[]` | N rangeSeparator | String | - | range separator text | N selectDate | String | - | select date text | N @@ -141,7 +149,7 @@ yearAriaLabel | String | - | year text | N name | type | default | description | required -- | -- | -- | -- | -- -cancel | Object | - | Typescript:`string \| ButtonProps`,[Button API Documents](./button?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/config-provider/type.ts) | N +cancel | Object | - | Typescript:`string \| ButtonProps`,[Button API Documents](./button?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/config-provider/type.ts) | N closeOnEscKeydown | Boolean | true | trigger dialog close on `ESC` keydown | N closeOnOverlayClick | Boolean | true | \- | N confirm | Object | - | Typescript:`string \| ButtonProps` | N @@ -161,7 +169,7 @@ size | String | 'small' | \- | N name | type | default | description | required -- | -- | -- | -- | -- -cancel | String / Object | - | Typescript:`string \| ButtonProps`,[Button API Documents](./button?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/config-provider/type.ts) | N +cancel | String / Object | - | Typescript:`string \| ButtonProps`,[Button API Documents](./button?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/config-provider/type.ts) | N confirm | String / Object | - | Typescript:`string \| ButtonProps` | N confirmBtnTheme | Object | - | Typescript:`{ default: string; warning: string; danger: string; }` | N @@ -175,27 +183,27 @@ columnConfigButtonText | String | - | \- | N columnConfigDescriptionText | String | - | \- | N columnConfigTitleText | String | - | \- | N confirmText | String | - | \- | N -empty | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -expandIcon | TElement | undefined | Typescript:`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -filterIcon | TElement | undefined | Typescript:`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +empty | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +expandIcon | TElement | undefined | Typescript:`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +filterIcon | TElement | undefined | Typescript:`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N hideSortTips | Boolean | false | hide sort tips | N loadingMoreText | String | - | \- | N loadingText | String | - | \- | N resetText | String | - | \- | N searchResultText | String | - | \- | N selectAllText | String | - | \- | N -size | String | medium | options: small/medium/large。Typescript:`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +size | String | medium | options: small/medium/large。Typescript:`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N sortAscendingOperationText | String | - | \- | N sortCancelOperationText | String | - | \- | N sortDescendingOperationText | String | - | \- | N -sortIcon | TElement | undefined | Typescript:`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -treeExpandAndFoldIcon | Function | undefined | Typescript:`TNode<{ type: 'expand' \| 'fold' }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +sortIcon | TElement | undefined | Typescript:`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +treeExpandAndFoldIcon | Function | undefined | Typescript:`TNode<{ type: 'expand' \| 'fold' }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N ### SelectConfig name | type | default | description | required -- | -- | -- | -- | -- -clearIcon | Function | - | Typescript:`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +clearIcon | Function | - | Typescript:`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N empty | String | - | \- | N filterable | Boolean | false | \- | N loadingText | String | - | \- | N @@ -206,7 +214,7 @@ placeholder | String | - | placeholder text | N name | type | default | description | required -- | -- | -- | -- | -- empty | String | - | \- | N -folderIcon | Function | - | Typescript:`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +folderIcon | Function | - | Typescript:`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N ### TreeSelectConfig @@ -232,7 +240,7 @@ dragger | Object | - | Typescript:`UploadConfigDragger` | N file | Object | - | Typescript:`UploadConfigFileList` | N progress | Object | - | Typescript:`UploadConfigProgress` | N sizeLimitMessage | String | - | \- | N -triggerUploadText | Object | - | Typescript:`UploadTriggerUploadText` `interface UploadTriggerUploadText { image?: string, normal?: string, fileInput?: string, reupload?: string, continueUpload?: string, delete?: string }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/config-provider/type.ts) | N +triggerUploadText | Object | - | Typescript:`UploadTriggerUploadText` `interface UploadTriggerUploadText { image?: string, normal?: string, fileInput?: string, reupload?: string, continueUpload?: string, delete?: string }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/config-provider/type.ts) | N ### UploadConfigProgress @@ -266,21 +274,21 @@ fileStatusText | String | - | \- | N name | type | default | description | required -- | -- | -- | -- | -- colonText | String | - | colon on the right of label ":" | N -errorMessage | Object | - | Typescript:`FormErrorMessage`,[Form API Documents](./form?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/config-provider/type.ts) | N +errorMessage | Object | - | Typescript:`FormErrorMessage`,[Form API Documents](./form?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/config-provider/type.ts) | N requiredMark | Boolean | true | \- | N ### TagConfig name | type | default | description | required -- | -- | -- | -- | -- -closeIcon | Function | - | Typescript:`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +closeIcon | Function | - | Typescript:`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N ### StepsConfig name | type | default | description | required -- | -- | -- | -- | -- -checkIcon | TElement | - | Typescript:`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -errorIcon | TElement | - | Typescript:`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +checkIcon | TElement | - | Typescript:`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +errorIcon | TElement | - | Typescript:`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N ### AlertConfig @@ -314,7 +322,7 @@ name | type | default | description | required -- | -- | -- | -- | -- errorText | String | - | loading text, default value is "Error" | N loadingText | String | - | loading text, default value is "loading" | N -replaceImageSrc | Function | - | replace all `src` attribute of images。Typescript:`(params: ImageProps) => string`,[Image API Documents](./image?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/config-provider/type.ts) | N +replaceImageSrc | Function | - | replace all `src` attribute of images。Typescript:`(params: ImageProps) => string`,[Image API Documents](./image?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/config-provider/type.ts) | N ### ImageViewerConfig @@ -344,7 +352,7 @@ rateText | Array | - | Typescript:`string[]` | N name | type | default | description | required -- | -- | -- | -- | -- -image | Object | - | Typescript:`{ maintenance: TNode; success: TNode; fail: TNode; empty: TNode; networkError: TNode; }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +image | Object | - | Typescript:`{ maintenance: TNode; success: TNode; fail: TNode; empty: TNode; networkError: TNode; }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N titleText | Object | - | Typescript:`{ maintenance: string; success: string; fail: string; empty: string; networkError: string; }` | N ### TypographyConfig @@ -354,3 +362,9 @@ name | type | default | description | required collapseText | String | - | collapse text | N copiedText | String | - | copied text | N expandText | String | - | expand text | N + +### AutoCompleteConfig + +name | type | default | description | required +-- | -- | -- | -- | -- +empty | String | - | \- | N diff --git a/src/config-provider/config-provider.md b/packages/components/config-provider/config-provider.md similarity index 91% rename from src/config-provider/config-provider.md rename to packages/components/config-provider/config-provider.md index c6906be094..479d8c77f3 100644 --- a/src/config-provider/config-provider.md +++ b/packages/components/config-provider/config-provider.md @@ -31,14 +31,22 @@ import 'tdesign-react/esm/style/index.js' ``` ## API + +### ConfigProvider Props + +名称 | 类型 | 默认值 | 描述 | 必传 +-- | -- | -- | -- | -- +globalConfig | Object | - | 全局配置。TS 类型:`GlobalConfigProvider` | N + ### GlobalConfigProvider 名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- alert | Object | - | 警告全局配置。TS 类型:`AlertConfig` | N anchor | Object | - | 锚点全局配置。TS 类型:`AnchorConfig` | N -animation | Object | - | 动画效果控制,`ripple` 指波纹动画, `expand` 指展开动画,`fade` 指渐变动画。默认为 `{ include: ['ripple','expand','fade'], exclude: [] }`。TS 类型:`Partial>>` `type AnimationType = 'ripple' \| 'expand' \| 'fade'`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/config-provider/type.ts) | N -attach | String / Object / Function | - | TS 类型:`AttachNode \| { imageViewer?: AttachNode; popup?: AttachNode; dialog?: AttachNode; drawer?: AttachNode; }`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +animation | Object | - | 动画效果控制,`ripple` 指波纹动画, `expand` 指展开动画,`fade` 指渐变动画。默认为 `{ include: ['ripple','expand','fade'], exclude: [] }`。TS 类型:`Partial>>` `type AnimationType = 'ripple' \| 'expand' \| 'fade'`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/config-provider/type.ts) | N +attach | String / Object / Function | - | TS 类型:`AttachNode \| { imageViewer?: AttachNode; popup?: AttachNode; dialog?: AttachNode; drawer?: AttachNode; }`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +autoComplete | Object | - | 自动填充组件全局配置。TS 类型:`AutoCompleteConfig` | N calendar | Object | - | 日历组件全局配置。TS 类型:`CalendarConfig` | N cascader | Object | - | 级联选择器全局配置。TS 类型:`CascaderConfig` | N classPrefix | String | t | CSS 类名前缀 | N @@ -50,7 +58,7 @@ drawer | Object | - | 抽屉全局配置。TS 类型:`DrawerConfig` | N empty | Object | - | 空状态全局配置。TS 类型:`EmptyConfig` | N form | Object | - | 表单组件全局配置。TS 类型:`FormConfig` | N guide | Object | - | 引导全局配置。TS 类型:`GuideConfig` | N -icon | Object | - | 图标全局配置。TS 类型:`IconConfig` `type IconConfig = GlobalIconConfig` `import { GlobalIconConfig } from '@icon'`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/config-provider/type.ts) | N +icon | Object | - | 图标全局配置。TS 类型:`IconConfig` `type IconConfig = GlobalIconConfig` `import { GlobalIconConfig } from '@icon'`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/config-provider/type.ts) | N image | Object | - | 图片全局配置。TS 类型:`ImageConfig` | N imageViewer | Object | - | 图片预览器全局配置。TS 类型:`ImageViewerConfig` | N input | Object | - | 输入框组件全局配置。TS 类型:`InputConfig` | N @@ -91,7 +99,7 @@ total | String | - | 语言配置,数据总条数文本,示例:`'共 {tota 名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- cellMonth | String | - | 语言配置,月份描述文本,示例:'一月,二月,三月,四月,五月,六月,七月,八月,九月,十月,十一月,十二月' | N -controllerConfig | Object | - | 日历右上角控制器按钮配置。TS 类型:`CalendarController`,[Calendar API Documents](./calendar?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/config-provider/type.ts) | N +controllerConfig | Object | - | 日历右上角控制器按钮配置。TS 类型:`CalendarController`,[Calendar API Documents](./calendar?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/config-provider/type.ts) | N fillWithZero | Boolean | true | 当日期数字小于 10 时,是否使用 '0' 填充 | N firstDayOfWeek | Number | 1 | 第一天从星期几开始。可选项:1/2/3/4/5/6/7 | N hideWeekend | String | - | 语言配置,“隐藏周末”描述文本 | N @@ -158,7 +166,7 @@ placeholder | Object | - | 占位符文本提示,默认值:`{ date: '请选 preDecade | String | - | 语言配置,“上个十年” 描述文本 | N preMonth | String | - | 语言配置,“上个月” 描述文本 | N preYear | String | - | 语言配置,“上一年” 描述文本 | N -presets | Object | - | 【暂不支持,讨论确认中】预设快捷日期选择,示例:`{ '元旦': '2021-01-01', '昨天': dayjs().subtract(1, 'day').format('YYYY-MM-DD'), '特定日期': () => ['2021-02-01'] }`。TS 类型:`ConfigPresetDate` `interface ConfigPresetDate { [name: string]: DateConfigValue \| (() => DateConfigValue) }` `type DateConfigValue = string \| Date \| Array`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/config-provider/type.ts) | N +presets | Object | - | 【暂不支持,讨论确认中】预设快捷日期选择,示例:`{ '元旦': '2021-01-01', '昨天': dayjs().subtract(1, 'day').format('YYYY-MM-DD'), '特定日期': () => ['2021-02-01'] }`。TS 类型:`ConfigPresetDate` `interface ConfigPresetDate { [name: string]: DateConfigValue \| (() => DateConfigValue) }` `type DateConfigValue = string \| Date \| Array`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/config-provider/type.ts) | N quarters | Array | - | 季度文本描述,默认值:['1 季度', '2 季度', '3 季度', '4 季度']。TS 类型:`string[]` | N rangeSeparator | String | - | 语言配置,“ 至 ” 范围分隔符描述文本,示例:' ~ ' | N selectDate | String | - | 语言配置,“选择日期” 描述文本 | N @@ -171,7 +179,7 @@ yearAriaLabel | String | - | 语言配置,“年” 描述文本 | N 名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- -cancel | Object | - | 取消按钮风格。TS 类型:`string \| ButtonProps`,[Button API Documents](./button?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/config-provider/type.ts) | N +cancel | Object | - | 取消按钮风格。TS 类型:`string \| ButtonProps`,[Button API Documents](./button?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/config-provider/type.ts) | N closeOnEscKeydown | Boolean | true | 按下 ESC 时是否触发对话框关闭事件 | N closeOnOverlayClick | Boolean | true | 点击蒙层时是否触发关闭事件 | N confirm | Object | - | 确认按钮风格。TS 类型:`string \| ButtonProps` | N @@ -191,7 +199,7 @@ size | String | 'small' | 尺寸配置,配置Drawer尺寸 | N 名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- -cancel | String / Object | - | 语言配置,“取消”描述文本。TS 类型:`string \| ButtonProps`,[Button API Documents](./button?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/config-provider/type.ts) | N +cancel | String / Object | - | 语言配置,“取消”描述文本。TS 类型:`string \| ButtonProps`,[Button API Documents](./button?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/config-provider/type.ts) | N confirm | String / Object | - | 语言配置,“确定”描述文本。TS 类型:`string \| ButtonProps` | N confirmBtnTheme | Object | - | 确认按钮主题色,即 Popconfirm 的 `theme` 和 确认按钮的 `theme` 映射关系。示例:{ danger: 'danger' }。TS 类型:`{ default: string; warning: string; danger: string; }` | N @@ -205,27 +213,27 @@ columnConfigButtonText | String | - | 语言配置,列配置功能中,“列 columnConfigDescriptionText | String | - | 语言配置,“请选择需要在表格中显示的数据列” 描述文本,列配置功能中弹框顶部描述 | N columnConfigTitleText | String | - | 语言配置,“表格列配置” 描述文本,列配置功能中弹框的标题 | N confirmText | String | - | 语言配置,“确认” 描述文本 | N -empty | TNode | - | 语言配置,“暂无数据” 描述文本。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -expandIcon | TElement | undefined | 展开和收起图标(配置传入收起图标即可),如果没有配置,会使用组件内置的默认图标。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -filterIcon | TElement | undefined | 过滤图标,如果没有配置,会使用组件内置的默认图标。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +empty | TNode | - | 语言配置,“暂无数据” 描述文本。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +expandIcon | TElement | undefined | 展开和收起图标(配置传入收起图标即可),如果没有配置,会使用组件内置的默认图标。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +filterIcon | TElement | undefined | 过滤图标,如果没有配置,会使用组件内置的默认图标。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N hideSortTips | Boolean | false | 隐藏排序文本提示 | N loadingMoreText | String | - | 语言配置,“点击加载更多” 描述文本 | N loadingText | String | - | 语言配置,“正在加载中,请稍后” 描述文本 | N resetText | String | - | 语言配置,“重置” 描述文本 | N searchResultText | String | - | 语言配置,过滤功能中,过滤条件和结果描述文本,示例:'搜索“{result}”,找到 {count} 条结果' | N selectAllText | String | - | 语言配置,'全选' 描述文本 | N -size | String | medium | 全局表格尺寸配置。可选项:small/medium/large。TS 类型:`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +size | String | medium | 全局表格尺寸配置。可选项:small/medium/large。TS 类型:`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N sortAscendingOperationText | String | - | 语言配置,'点击升序' 描述文本 | N sortCancelOperationText | String | - | 语言配置,'点击取消排序' 描述文本 | N sortDescendingOperationText | String | - | 语言配置,'点击降序' 描述文本 | N -sortIcon | TElement | undefined | 排序图标(配置传入降序图标即可),如果没有配置,会使用组件内置的默认图标。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -treeExpandAndFoldIcon | Function | undefined | 树形结构,展开和折叠图标。如果没有配置,会使用组件内置的默认图标。TS 类型:`TNode<{ type: 'expand' \| 'fold' }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +sortIcon | TElement | undefined | 排序图标(配置传入降序图标即可),如果没有配置,会使用组件内置的默认图标。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +treeExpandAndFoldIcon | Function | undefined | 树形结构,展开和折叠图标。如果没有配置,会使用组件内置的默认图标。TS 类型:`TNode<{ type: 'expand' \| 'fold' }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N ### SelectConfig 名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- -clearIcon | Function | - | 清除图标,【注意】使用渲染函数输出图标组件。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +clearIcon | Function | - | 清除图标,【注意】使用渲染函数输出图标组件。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N empty | String | - | 语言配置,“暂无数据”描述文本 | N filterable | Boolean | false | 全局配置是否可筛选 | N loadingText | String | - | 语言配置,“加载中”描述文本 | N @@ -236,7 +244,7 @@ placeholder | String | - | 语言配置,“请选择”占位符描述文本 | 名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- empty | String | - | 语言配置,“暂无数据”描述文本 | N -folderIcon | Function | - | 目录层级图标,传入收起状态图标即可。【注意】使用渲染函数输出图标组件。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +folderIcon | Function | - | 目录层级图标,传入收起状态图标即可。【注意】使用渲染函数输出图标组件。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N ### TreeSelectConfig @@ -262,7 +270,7 @@ dragger | Object | - | 语言配置,拖拽相关。示例:{ dragDropText: ' file | Object | - | 语言配置,文件信息相关。示例:{ fileNameText: '文件名', fileSizeText: '文件尺寸', fileStatusText: '状态', fileOperationText: '操作', fileOperationDateText: '上传日期' }。TS 类型:`UploadConfigFileList` | N progress | Object | - | 语言配置,上传进度相关。示例:{ uploadText: '上传中', waitingText: '待上传', 'failText': '上传失败', successText: '上传成功' }。TS 类型:`UploadConfigProgress` | N sizeLimitMessage | String | - | 语言配置,文件大小超出限制时提醒文本。示例:`'文件大小不能超过 {sizeLimit}'` | N -triggerUploadText | Object | - | 语言配置,上传功能触发文案。示例:{ image: '点击上传图片', normal: '点击上传', fileInput: '选择文件', reupload: '重新上传', delete: '删除', continueUpload?: '继续选择' }。TS 类型:`UploadTriggerUploadText` `interface UploadTriggerUploadText { image?: string, normal?: string, fileInput?: string, reupload?: string, continueUpload?: string, delete?: string }`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/config-provider/type.ts) | N +triggerUploadText | Object | - | 语言配置,上传功能触发文案。示例:{ image: '点击上传图片', normal: '点击上传', fileInput: '选择文件', reupload: '重新上传', delete: '删除', continueUpload?: '继续选择' }。TS 类型:`UploadTriggerUploadText` `interface UploadTriggerUploadText { image?: string, normal?: string, fileInput?: string, reupload?: string, continueUpload?: string, delete?: string }`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/config-provider/type.ts) | N ### UploadConfigProgress @@ -296,21 +304,21 @@ fileStatusText | String | - | 语言配置,“状态” 描述文本 | N 名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- colonText | String | - | 字段旁边的冒号,中文为“:” | N -errorMessage | Object | - | 表单错误信息配置,示例:`{ idcard: '请输入正确的身份证号码', max: '字符长度不能超过 ${max}' }`。TS 类型:`FormErrorMessage`,[Form API Documents](./form?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/config-provider/type.ts) | N +errorMessage | Object | - | 表单错误信息配置,示例:`{ idcard: '请输入正确的身份证号码', max: '字符长度不能超过 ${max}' }`。TS 类型:`FormErrorMessage`,[Form API Documents](./form?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/config-provider/type.ts) | N requiredMark | Boolean | true | 是否显示必填符号(*),默认显示 | N ### TagConfig 名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- -closeIcon | Function | - | 关闭图标,【注意】使用渲染函数输出图标组件。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +closeIcon | Function | - | 关闭图标,【注意】使用渲染函数输出图标组件。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N ### StepsConfig 名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- -checkIcon | TElement | - | 已完成步骤图标,【注意】使用渲染函数输出图标组件。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -errorIcon | TElement | - | 错误步骤图标,【注意】使用渲染函数输出图标组件。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +checkIcon | TElement | - | 已完成步骤图标,【注意】使用渲染函数输出图标组件。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +errorIcon | TElement | - | 错误步骤图标,【注意】使用渲染函数输出图标组件。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N ### AlertConfig @@ -344,7 +352,7 @@ copyText | String | - | 语言配置,“复制链接” 描述文本 | N -- | -- | -- | -- | -- errorText | String | - | 图片加载失败显示的文本,中文默认为“图片无法显示” | N loadingText | String | - | 图片加载中显示的文本,中文默认为“图片加载中” | N -replaceImageSrc | Function | - | 统一替换图片 `src` 地址,参数为组件的全部属性,返回值为新的图片地址。TS 类型:`(params: ImageProps) => string`,[Image API Documents](./image?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/config-provider/type.ts) | N +replaceImageSrc | Function | - | 统一替换图片 `src` 地址,参数为组件的全部属性,返回值为新的图片地址。TS 类型:`(params: ImageProps) => string`,[Image API Documents](./image?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/config-provider/type.ts) | N ### ImageViewerConfig @@ -374,7 +382,7 @@ rateText | Array | - | 评分描述,默认值:['极差', '失望', '一般', 名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- -image | Object | - | 空状态组件各类型的图片配置。TS 类型:`{ maintenance: TNode; success: TNode; fail: TNode; empty: TNode; networkError: TNode; }`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +image | Object | - | 空状态组件各类型的图片配置。TS 类型:`{ maintenance: TNode; success: TNode; fail: TNode; empty: TNode; networkError: TNode; }`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N titleText | Object | - | 空状态组件各类型的标题文本配置。TS 类型:`{ maintenance: string; success: string; fail: string; empty: string; networkError: string; }` | N ### TypographyConfig @@ -384,3 +392,9 @@ titleText | Object | - | 空状态组件各类型的标题文本配置。TS 类 collapseText | String | - | 语言配置,“收起”描述文本 | N copiedText | String | - | 语言配置,“复制成功”描述文本 | N expandText | String | - | 语言配置,“展开”描述文本 | N + +### AutoCompleteConfig + +名称 | 类型 | 默认值 | 描述 | 必传 +-- | -- | -- | -- | -- +empty | String | - | 语言配置,“暂无数据”描述文本 | N diff --git a/src/config-provider/index.ts b/packages/components/config-provider/index.ts similarity index 100% rename from src/config-provider/index.ts rename to packages/components/config-provider/index.ts diff --git a/src/config-provider/type.ts b/packages/components/config-provider/type.ts similarity index 98% rename from src/config-provider/type.ts rename to packages/components/config-provider/type.ts index 7bc3452f33..8a1cc595a1 100644 --- a/src/config-provider/type.ts +++ b/packages/components/config-provider/type.ts @@ -12,6 +12,13 @@ import { MessageOptions } from '../message'; import { ImageProps } from '../image'; import { TNode, TElement, SizeEnum, AttachNode } from '../common'; +export interface TdConfigProviderProps { + /** + * 全局配置 + */ + globalConfig?: GlobalConfigProvider; +} + export interface GlobalConfigProvider { /** * 警告全局配置 @@ -29,6 +36,10 @@ export interface GlobalConfigProvider { * null */ attach?: AttachNode | { imageViewer?: AttachNode; popup?: AttachNode; dialog?: AttachNode; drawer?: AttachNode }; + /** + * 自动填充组件全局配置 + */ + autoComplete?: AutoCompleteConfig; /** * 日历组件全局配置 */ @@ -960,6 +971,14 @@ export interface TypographyConfig { expandText?: string; } +export interface AutoCompleteConfig { + /** + * 语言配置,“暂无数据”描述文本 + * @default '' + */ + empty?: string; +} + export type AnimationType = 'ripple' | 'expand' | 'fade'; export type IconConfig = GlobalIconConfig; diff --git a/src/date-picker/DatePicker.tsx b/packages/components/date-picker/DatePicker.tsx similarity index 91% rename from src/date-picker/DatePicker.tsx rename to packages/components/date-picker/DatePicker.tsx index 5c2f35cdd3..4fecee7a74 100644 --- a/src/date-picker/DatePicker.tsx +++ b/packages/components/date-picker/DatePicker.tsx @@ -1,20 +1,21 @@ import React, { forwardRef, useEffect, useCallback } from 'react'; import classNames from 'classnames'; import dayjs from 'dayjs'; -import isDate from 'lodash/isDate'; +import { isDate } from 'lodash-es'; import useConfig from '../hooks/useConfig'; import { StyledProps } from '../common'; import { TdDatePickerProps, PresetDate, DateMultipleValue, DateValue } from './type'; import SelectInput from '../select-input'; import SinglePanel from './panel/SinglePanel'; import useSingle from './hooks/useSingle'; -import { parseToDayjs, getDefaultFormat, formatTime, formatDate } from '../_common/js/date-picker/format'; -import { subtractMonth, addMonth, extractTimeObj, covertToDate, isSame } from '../_common/js/date-picker/utils'; +import { parseToDayjs, getDefaultFormat, formatTime, formatDate } from '../../common/js/date-picker/format'; +import { subtractMonth, addMonth, extractTimeObj, covertToDate, isSame } from '../../common/js/date-picker/utils'; import { datePickerDefaultProps } from './defaultProps'; import useDefaultProps from '../hooks/useDefaultProps'; import useLatest from '../hooks/useLatest'; import useUpdateEffect from '../hooks/useUpdateEffect'; import type { TagInputRemoveContext } from '../tag-input'; +import { useLocaleReceiver } from '../locale/LocalReceiver'; export interface DatePickerProps extends TdDatePickerProps, StyledProps {} @@ -64,6 +65,7 @@ const DatePicker = forwardRef((originalProps, r setCacheValue, } = useSingle(props); + const [local] = useLocaleReceiver('datePicker'); const { format, timeFormat, valueType } = getDefaultFormat({ mode, format: props.format, @@ -241,20 +243,28 @@ const DatePicker = forwardRef((originalProps, r }, []); function processDate(date: Date) { - const isSameDate = (value as DateMultipleValue).some((val) => isSame(dayjs(val).toDate(), date)); + let isSameDate: boolean; + const currentValue = (value || []) as DateMultipleValue; + if (mode !== 'week') + isSameDate = currentValue.some((val) => + isSame(parseToDayjs(val, format).toDate(), date, mode, local.dayjsLocale), + ); + else { + isSameDate = currentValue.some((val) => val === dayjs(date).locale(local.dayjsLocale).format(format)); + } let currentDate: DateMultipleValue; if (!isSameDate) { - currentDate = (value as DateMultipleValue).concat(formatDate(date, { format, targetFormat: valueType })); + currentDate = currentValue.concat(formatDate(date, { format, targetFormat: valueType })); } else { - currentDate = (value as DateMultipleValue).filter( + currentDate = currentValue.filter( (val) => formatDate(val, { format, targetFormat: valueType }) !== formatDate(date, { format, targetFormat: valueType }), ); } - return currentDate.sort((a, b) => dayjs(a).valueOf() - dayjs(b).valueOf()); + return currentDate?.sort((a, b) => dayjs(a).valueOf() - dayjs(b).valueOf()); } const onTagRemoveClick = (ctx: TagInputRemoveContext) => { diff --git a/src/date-picker/DatePickerPanel.tsx b/packages/components/date-picker/DatePickerPanel.tsx similarity index 96% rename from src/date-picker/DatePickerPanel.tsx rename to packages/components/date-picker/DatePickerPanel.tsx index 3446b60c03..efb885ce05 100644 --- a/src/date-picker/DatePickerPanel.tsx +++ b/packages/components/date-picker/DatePickerPanel.tsx @@ -10,8 +10,8 @@ import { } from './type'; import SinglePanel from './panel/SinglePanel'; import useSingleValue from './hooks/useSingleValue'; -import { formatDate, getDefaultFormat, parseToDayjs } from '../_common/js/date-picker/format'; -import { subtractMonth, addMonth, extractTimeObj } from '../_common/js/date-picker/utils'; +import { formatDate, getDefaultFormat, parseToDayjs } from '../../common/js/date-picker/format'; +import { subtractMonth, addMonth, extractTimeObj } from '../../common/js/date-picker/utils'; import useDefaultProps from '../hooks/useDefaultProps'; export interface DatePickerPanelProps extends TdDatePickerPanelProps, StyledProps {} diff --git a/src/date-picker/DateRangePicker.tsx b/packages/components/date-picker/DateRangePicker.tsx similarity index 97% rename from src/date-picker/DateRangePicker.tsx rename to packages/components/date-picker/DateRangePicker.tsx index a8833465ba..377b585ff9 100644 --- a/src/date-picker/DateRangePicker.tsx +++ b/packages/components/date-picker/DateRangePicker.tsx @@ -14,10 +14,10 @@ import { isValidDate, getDefaultFormat, initYearMonthTime, -} from '../_common/js/date-picker/format'; -import { subtractMonth, addMonth, extractTimeObj } from '../_common/js/date-picker/utils'; +} from '../../common/js/date-picker/format'; +import { subtractMonth, addMonth, extractTimeObj } from '../../common/js/date-picker/utils'; import { dateRangePickerDefaultProps } from './defaultProps'; -import log from '../_common/js/log'; +import log from '../../common/js/log'; import useDefaultProps from '../hooks/useDefaultProps'; import { dateCorrection } from './utils'; @@ -168,11 +168,11 @@ const DateRangePicker = forwardRef((origin } // 首次点击不关闭、确保两端都有有效值并且无时间选择器时点击后自动关闭 - if (!isFirstValueSelected) { + if (!isFirstValueSelected || !activeIndex) { let nextIndex = notValidIndex; if (nextIndex === -1) nextIndex = activeIndex ? 0 : 1; setActiveIndex(nextIndex); - setIsFirstValueSelected(true); + setIsFirstValueSelected(!!nextValue[0]); } else { setPopupVisible(false); } @@ -258,11 +258,11 @@ const DateRangePicker = forwardRef((origin } // 首次点击不关闭、确保两端都有有效值并且无时间选择器时点击后自动关闭 - if (!isFirstValueSelected || nextValue.length === 1) { + if (!isFirstValueSelected || !activeIndex) { let nextIndex = notValidIndex; if (nextIndex === -1) nextIndex = activeIndex ? 0 : 1; setActiveIndex(nextIndex); - setIsFirstValueSelected(true); + setIsFirstValueSelected(!!nextValue[0]); } else if (nextValue.length === 2) { setPopupVisible(false); } diff --git a/src/date-picker/DateRangePickerPanel.tsx b/packages/components/date-picker/DateRangePickerPanel.tsx similarity index 97% rename from src/date-picker/DateRangePickerPanel.tsx rename to packages/components/date-picker/DateRangePickerPanel.tsx index 0ba5204d9d..e620c605b3 100644 --- a/src/date-picker/DateRangePickerPanel.tsx +++ b/packages/components/date-picker/DateRangePickerPanel.tsx @@ -10,9 +10,9 @@ import { } from './type'; import RangePanel from './panel/RangePanel'; import useRangeValue from './hooks/useRangeValue'; -import { formatDate, getDefaultFormat, parseToDayjs } from '../_common/js/date-picker/format'; -import { subtractMonth, addMonth, extractTimeObj } from '../_common/js/date-picker/utils'; -import log from '../_common/js/log'; +import { formatDate, getDefaultFormat, parseToDayjs } from '../../common/js/date-picker/format'; +import { subtractMonth, addMonth, extractTimeObj } from '../../common/js/date-picker/utils'; +import log from '../../common/js/log'; import useDefaultProps from '../hooks/useDefaultProps'; import { dateCorrection } from './utils'; diff --git a/src/date-picker/__tests__/date-picker-panel.test.tsx b/packages/components/date-picker/__tests__/date-picker-panel.test.tsx similarity index 100% rename from src/date-picker/__tests__/date-picker-panel.test.tsx rename to packages/components/date-picker/__tests__/date-picker-panel.test.tsx diff --git a/src/date-picker/__tests__/date-picker.test.tsx b/packages/components/date-picker/__tests__/date-picker.test.tsx similarity index 100% rename from src/date-picker/__tests__/date-picker.test.tsx rename to packages/components/date-picker/__tests__/date-picker.test.tsx diff --git a/src/date-picker/__tests__/date-range-picker-panel.test.tsx b/packages/components/date-picker/__tests__/date-range-picker-panel.test.tsx similarity index 100% rename from src/date-picker/__tests__/date-range-picker-panel.test.tsx rename to packages/components/date-picker/__tests__/date-range-picker-panel.test.tsx diff --git a/src/date-picker/__tests__/date-range-picker.test.tsx b/packages/components/date-picker/__tests__/date-range-picker.test.tsx similarity index 100% rename from src/date-picker/__tests__/date-range-picker.test.tsx rename to packages/components/date-picker/__tests__/date-range-picker.test.tsx diff --git a/src/date-picker/_example/base.tsx b/packages/components/date-picker/_example/base.tsx similarity index 100% rename from src/date-picker/_example/base.tsx rename to packages/components/date-picker/_example/base.tsx diff --git a/src/date-picker/_example/cancel-range-limit.tsx b/packages/components/date-picker/_example/cancel-range-limit.tsx similarity index 100% rename from src/date-picker/_example/cancel-range-limit.tsx rename to packages/components/date-picker/_example/cancel-range-limit.tsx diff --git a/src/date-picker/_example/custom-icon.tsx b/packages/components/date-picker/_example/custom-icon.tsx similarity index 100% rename from src/date-picker/_example/custom-icon.tsx rename to packages/components/date-picker/_example/custom-icon.tsx diff --git a/src/date-picker/_example/date-presets-alt.tsx b/packages/components/date-picker/_example/date-presets-alt.tsx similarity index 100% rename from src/date-picker/_example/date-presets-alt.tsx rename to packages/components/date-picker/_example/date-presets-alt.tsx diff --git a/src/date-picker/_example/date-range.tsx b/packages/components/date-picker/_example/date-range.tsx similarity index 100% rename from src/date-picker/_example/date-range.tsx rename to packages/components/date-picker/_example/date-range.tsx diff --git a/src/date-picker/_example/date-time.tsx b/packages/components/date-picker/_example/date-time.tsx similarity index 100% rename from src/date-picker/_example/date-time.tsx rename to packages/components/date-picker/_example/date-time.tsx diff --git a/src/date-picker/_example/disable-date.tsx b/packages/components/date-picker/_example/disable-date.tsx similarity index 100% rename from src/date-picker/_example/disable-date.tsx rename to packages/components/date-picker/_example/disable-date.tsx diff --git a/src/date-picker/_example/first-day-of-week.tsx b/packages/components/date-picker/_example/first-day-of-week.tsx similarity index 100% rename from src/date-picker/_example/first-day-of-week.tsx rename to packages/components/date-picker/_example/first-day-of-week.tsx diff --git a/src/date-picker/_example/month.tsx b/packages/components/date-picker/_example/month.tsx similarity index 100% rename from src/date-picker/_example/month.tsx rename to packages/components/date-picker/_example/month.tsx diff --git a/packages/components/date-picker/_example/multiple.tsx b/packages/components/date-picker/_example/multiple.tsx new file mode 100644 index 0000000000..39c76df6ee --- /dev/null +++ b/packages/components/date-picker/_example/multiple.tsx @@ -0,0 +1,52 @@ +import React, { useState } from 'react'; +import { DatePicker, Space } from 'tdesign-react'; +import type { DatePickerProps, DateMultipleValue } from 'tdesign-react'; + +export default function YearDatePicker() { + const [dateValue, setDateValue] = useState(['2024-10-01', '2024-10-24']); + const [weekValue, setWeekValue] = useState(['2024-50周', '2024-51周']); + const [yearValue, setYearValue] = useState(['2022', '2023', '2024']); + + const handleDateChange: DatePickerProps['onChange'] = (value: DateMultipleValue, context) => { + console.log('onChange:', value, context); + setDateValue(value); + }; + + const handleWeekChange: DatePickerProps['onChange'] = (value: DateMultipleValue, context) => { + console.log('onChange:', value, context); + setWeekValue(value); + }; + + const handleYearChange: DatePickerProps['onChange'] = (value: DateMultipleValue, context) => { + console.log('onChange:', value, context); + setYearValue(value); + }; + + return ( + + + + + + ); +} diff --git a/src/date-picker/_example/panel.tsx b/packages/components/date-picker/_example/panel.tsx similarity index 100% rename from src/date-picker/_example/panel.tsx rename to packages/components/date-picker/_example/panel.tsx diff --git a/src/date-picker/_example/quarter.tsx b/packages/components/date-picker/_example/quarter.tsx similarity index 100% rename from src/date-picker/_example/quarter.tsx rename to packages/components/date-picker/_example/quarter.tsx diff --git a/src/date-picker/_example/week.tsx b/packages/components/date-picker/_example/week.tsx similarity index 100% rename from src/date-picker/_example/week.tsx rename to packages/components/date-picker/_example/week.tsx diff --git a/src/date-picker/_example/year.tsx b/packages/components/date-picker/_example/year.tsx similarity index 100% rename from src/date-picker/_example/year.tsx rename to packages/components/date-picker/_example/year.tsx diff --git a/src/date-picker/_usage/date-picker-props.json b/packages/components/date-picker/_usage/date-picker-props.json similarity index 100% rename from src/date-picker/_usage/date-picker-props.json rename to packages/components/date-picker/_usage/date-picker-props.json diff --git a/src/date-picker/_usage/date-range-picker-props.json b/packages/components/date-picker/_usage/date-range-picker-props.json similarity index 100% rename from src/date-picker/_usage/date-range-picker-props.json rename to packages/components/date-picker/_usage/date-range-picker-props.json diff --git a/src/date-picker/_usage/index.jsx b/packages/components/date-picker/_usage/index.jsx similarity index 100% rename from src/date-picker/_usage/index.jsx rename to packages/components/date-picker/_usage/index.jsx diff --git a/src/date-picker/base/Cell.tsx b/packages/components/date-picker/base/Cell.tsx similarity index 97% rename from src/date-picker/base/Cell.tsx rename to packages/components/date-picker/base/Cell.tsx index 632bd9599a..4d563860c9 100644 --- a/src/date-picker/base/Cell.tsx +++ b/packages/components/date-picker/base/Cell.tsx @@ -1,7 +1,7 @@ import React from 'react'; import classNames from 'classnames'; import useConfig from '../../hooks/useConfig'; -import { extractTimeObj } from '../../_common/js/date-picker/utils'; +import { extractTimeObj } from '../../../common/js/date-picker/utils'; export interface DatePickerCellProps { time?: string; diff --git a/src/date-picker/base/Footer.tsx b/packages/components/date-picker/base/Footer.tsx similarity index 100% rename from src/date-picker/base/Footer.tsx rename to packages/components/date-picker/base/Footer.tsx diff --git a/src/date-picker/base/Header.tsx b/packages/components/date-picker/base/Header.tsx similarity index 100% rename from src/date-picker/base/Header.tsx rename to packages/components/date-picker/base/Header.tsx diff --git a/src/date-picker/base/Table.tsx b/packages/components/date-picker/base/Table.tsx similarity index 81% rename from src/date-picker/base/Table.tsx rename to packages/components/date-picker/base/Table.tsx index a65a9eefc4..a1ba586d5f 100644 --- a/src/date-picker/base/Table.tsx +++ b/packages/components/date-picker/base/Table.tsx @@ -2,18 +2,22 @@ import React, { useMemo } from 'react'; import classNames from 'classnames'; import dayjs from 'dayjs'; import isoWeek from 'dayjs/plugin/isoWeek'; + +import type { Dayjs } from 'dayjs'; import { useLocaleReceiver } from '../../locale/LocalReceiver'; import useConfig from '../../hooks/useConfig'; import DatePickerCell from './Cell'; -import { TdDatePickerProps } from '../type'; + import { SinglePanelProps } from '../panel/SinglePanel'; import { PanelContentProps } from '../panel/PanelContent'; -import { parseToDayjs } from '../../_common/js/date-picker/format'; +import { parseToDayjs } from '../../../common/js/date-picker/format'; + +import type { DateMultipleValue, DateRangeValue, DateValue, TdDatePickerProps } from '../type'; dayjs.extend(isoWeek); export interface DatePickerTableProps - extends Pick, + extends Pick, Pick, Pick { data?: Array; @@ -60,7 +64,7 @@ const DatePickerTable = (props: DatePickerTableProps) => { }, [mode, value, format]); // 高亮周区间 - const weekRowClass = (value, targetDayjs) => { + const weekRowClass = (value: DateValue | DateRangeValue, targetDayjs: Dayjs) => { if (mode !== 'week' || !value) return {}; if (Array.isArray(value)) { @@ -90,6 +94,20 @@ const DatePickerTable = (props: DatePickerTableProps) => { }; }; + // multiple + const multipleWeekRowClass = (value: DateMultipleValue, targetDayjs: Dayjs) => { + if (mode !== 'week' || (Array.isArray(value) && !value.length)) return {}; + const isSomeYearWeek = value + .map((v) => parseToDayjs(v, format)) + .some((item) => item.isoWeek() === targetDayjs.isoWeek() && item.isoWeekYear() === targetDayjs.isoWeekYear()); + + return { + [`${classPrefix}-date-picker__table-${mode}-row--active`]: isSomeYearWeek, + }; + }; + + const activeRowCss = props.multiple ? multipleWeekRowClass : weekRowClass; + return ( onCellMouseLeave?.({ e })}> @@ -107,7 +125,7 @@ const DatePickerTable = (props: DatePickerTableProps) => { {row.map((col: any, j: number) => ( diff --git a/src/date-picker/base/style/css.js b/packages/components/date-picker/base/style/css.js similarity index 100% rename from src/date-picker/base/style/css.js rename to packages/components/date-picker/base/style/css.js diff --git a/src/date-picker/base/style/index.js b/packages/components/date-picker/base/style/index.js similarity index 100% rename from src/date-picker/base/style/index.js rename to packages/components/date-picker/base/style/index.js diff --git a/src/date-picker/date-picker.en-US.md b/packages/components/date-picker/date-picker.en-US.md similarity index 83% rename from src/date-picker/date-picker.en-US.md rename to packages/components/date-picker/date-picker.en-US.md index 791c6c54fd..2c5bc39f1a 100644 --- a/src/date-picker/date-picker.en-US.md +++ b/packages/components/date-picker/date-picker.en-US.md @@ -12,34 +12,34 @@ allowInput | Boolean | false | \- | N borderless | Boolean | false | \- | N clearable | Boolean | false | \- | N defaultTime | String | '00:00:00' | Time selector default value | N -disableDate | Object / Array / Function | - | Typescript:`DisableDate` `type DisableDate = Array \| DisableDateObj \| ((date: DateValue) => boolean)` `interface DisableDateObj { from?: string; to?: string; before?: string; after?: string }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N +disableDate | Object / Array / Function | - | Typescript:`DisableDate` `type DisableDate = Array \| DisableDateObj \| ((date: DateValue) => boolean)` `interface DisableDateObj { from?: string; to?: string; before?: string; after?: string }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N disableTime | Function | - | disable time config function。Typescript:`(time: Date) => Partial<{ hour: Array, minute: Array, second: Array, millisecond: Array }>` | N disabled | Boolean | - | make DatePicker to be disabled | N enableTimePicker | Boolean | false | \- | N firstDayOfWeek | Number | 7 | options: 1/2/3/4/5/6/7 | N format | String | 'YYYY-MM-DD' | \- | N -inputProps | Object | - | Typescript:`InputProps`,[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N -label | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +inputProps | Object | - | Typescript:`InputProps`,[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N +label | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N mode | String | date | options: year/quarter/month/week/date | N multiple | Boolean | false | support multiple date,but not support being use together with range-picker、enableTimePicker and allowInput。Typescript:`boolean` | N needConfirm | Boolean | true | whether a confirmation button needs to be clicked to complete the action in the date-time picker scenario, default is true | N placeholder | String / Array | undefined | Typescript:`string` | N -popupProps | Object | - | Typescript:`PopupProps`,[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N -prefixIcon | TElement | - | Typescript:`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -presets | Object | - | Typescript:`PresetDate` `interface PresetDate { [name: string]: DateValue \| (() => DateValue) }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N +popupProps | Object | - | Typescript:`PopupProps`,[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N +prefixIcon | TElement | - | Typescript:`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +presets | Object | - | Typescript:`PresetDate` `interface PresetDate { [name: string]: DateValue \| (() => DateValue) }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N presetsPlacement | String | bottom | options: left/top/right/bottom | N -selectInputProps | Object | - | Typescript:`SelectInputProps`,[SelectInput API Documents](./select-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N -size | String | medium | options: small/medium/large。Typescript:`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +selectInputProps | Object | - | Typescript:`SelectInputProps`,[SelectInput API Documents](./select-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N +size | String | medium | options: small/medium/large。Typescript:`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N status | String | default | options: default/success/warning/error | N -suffixIcon | TElement | - | Typescript:`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -timePickerProps | Object | - | Typescript:`TimePickerProps`,[TimePicker API Documents](./time-picker?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N -tips | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -value | String / Number / Array / Date | '' | Typescript:`DateValue \| DateMultipleValue` ` type DateValue = string \| number \| Date ` ` type DateMultipleValue = Array `。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N -defaultValue | String / Number / Array / Date | '' | uncontrolled property。Typescript:`DateValue \| DateMultipleValue` ` type DateValue = string \| number \| Date ` ` type DateMultipleValue = Array `。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N -valueDisplay | TNode | - | `MouseEvent`。Typescript:`string \| TNode<{ value: DateValue; displayValue?: DateValue }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -valueType | String | - | Typescript:`DatePickerValueType` `type DatePickerValueType = 'time-stamp' \| 'Date' \| 'YYYY' \| 'YYYY-MM' \| 'YYYY-MM-DD' \| 'YYYY-MM-DD HH' \| 'YYYY-MM-DD HH:mm' \| 'YYYY-MM-DD HH:mm:ss' \| 'YYYY-MM-DD HH:mm:ss:SSS'` `type ValueTypeEnum = DatePickerValueType`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N +suffixIcon | TElement | - | Typescript:`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +timePickerProps | Object | - | Typescript:`TimePickerProps`,[TimePicker API Documents](./time-picker?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N +tips | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +value | String / Number / Array / Date | '' | Typescript:`DateValue \| DateMultipleValue` ` type DateValue = string \| number \| Date ` ` type DateMultipleValue = Array `。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N +defaultValue | String / Number / Array / Date | '' | uncontrolled property。Typescript:`DateValue \| DateMultipleValue` ` type DateValue = string \| number \| Date ` ` type DateMultipleValue = Array `。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N +valueDisplay | TNode | - | `MouseEvent`。Typescript:`string \| TNode<{ value: DateValue; displayValue?: DateValue }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +valueType | String | - | Typescript:`DatePickerValueType` `type DatePickerValueType = 'time-stamp' \| 'Date' \| 'YYYY' \| 'YYYY-MM' \| 'YYYY-MM-DD' \| 'YYYY-MM-DD HH' \| 'YYYY-MM-DD HH:mm' \| 'YYYY-MM-DD HH:mm:ss' \| 'YYYY-MM-DD HH:mm:ss:SSS'` `type ValueTypeEnum = DatePickerValueType`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N onBlur | Function | | Typescript:`(context: { value: DateValue; e: FocusEvent }) => void` | N -onChange | Function | | Typescript:`(value: DateValue, context: { dayjsValue?: Dayjs, trigger?: DatePickerTriggerSource }) => void`[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts)。`import { Dayjs } from 'dayjs'``type DatePickerTriggerSource = 'confirm' \| 'pick' \| 'enter' \| 'preset' \| 'clear'` | N +onChange | Function | | Typescript:`(value: DateValue, context: { dayjsValue?: Dayjs, trigger?: DatePickerTriggerSource }) => void`[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts)。`import { Dayjs } from 'dayjs'``type DatePickerTriggerSource = 'confirm' \| 'pick' \| 'enter' \| 'preset' \| 'clear'` | N onConfirm | Function | | Typescript:`(context: { date: Date, e: MouseEvent }) => void` | N onFocus | Function | | Typescript:`(context: { value: DateValue; e: FocusEvent }) => void` | N onPick | Function | | Typescript:`(value: DateValue) => void` | N @@ -57,37 +57,37 @@ borderless | Boolean | false | \- | N cancelRangeSelectLimit | Boolean | false | The default date selection interaction is determined based on the order of dates clicked and will be restricted. For example, if a user first clicks on the start date input box and chooses a date, for instance, 2020-05-15, the interaction will automatically shift focus to the end date input box, waiting for the user to select the end time. At this point, the user can only select a date later than 2020-05-15 (previous dates will be grayed out and disabled, restricting the user's selection). When this value is set to `true`, this restriction is lifted | N clearable | Boolean | false | \- | N defaultTime | Array | ["00:00:00", "23:59:59"] | Time selector default value。Typescript:`string[]` | N -disableDate | Object / Array / Function | - | Typescript:`DisableRangeDate` `type DisableRangeDate = Array \| DisableDateObj \| ((context: { date: DateRangeValue; partial: DateRangePickerPartial }) => boolean)` `interface DisableDateObj { from?: string; to?: string; before?: string; after?: string }` `type DateRangePickerPartial = 'start' \| 'end'`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N +disableDate | Object / Array / Function | - | Typescript:`DisableRangeDate` `type DisableRangeDate = Array \| DisableDateObj \| ((context: { date: DateRangeValue; partial: DateRangePickerPartial }) => boolean)` `interface DisableDateObj { from?: string; to?: string; before?: string; after?: string }` `type DateRangePickerPartial = 'start' \| 'end'`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N disableTime | Function | - | disable time config function。Typescript:`(times: Array, context: { partial: DateRangePickerPartial }) => Partial<{ hour: Array, minute: Array, second: Array }>` | N disabled | Boolean | - | \- | N enableTimePicker | Boolean | false | \- | N firstDayOfWeek | Number | - | options: 1/2/3/4/5/6/7 | N format | String | - | \- | N -label | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +label | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N mode | String | date | options: year/quarter/month/week/date | N needConfirm | Boolean | true | whether a confirmation button needs to be clicked to complete the action in the date-time range picker scenario, default is true | N panelPreselection | Boolean | true | \- | N placeholder | String / Array | - | Typescript:`string \| Array` | N -popupProps | Object | - | Typescript:`PopupProps`,[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N -prefixIcon | TElement | - | Typescript:`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -presets | Object | - | Typescript:`PresetRange` `interface PresetRange { [range: string]: DateRange \| (() => DateRange)}` `type DateRange = [DateValue, DateValue]`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N +popupProps | Object | - | Typescript:`PopupProps`,[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N +prefixIcon | TElement | - | Typescript:`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +presets | Object | - | Typescript:`PresetRange` `interface PresetRange { [range: string]: DateRange \| (() => DateRange)}` `type DateRange = [DateValue, DateValue]`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N presetsPlacement | String | bottom | options: left/top/right/bottom | N -rangeInputProps | Object | - | Typescript:`RangeInputProps`,[RangeInput API Documents](./range-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N +rangeInputProps | Object | - | Typescript:`RangeInputProps`,[RangeInput API Documents](./range-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N separator | String | - | \- | N -size | String | medium | options: small/medium/large。Typescript:`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +size | String | medium | options: small/medium/large。Typescript:`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N status | String | default | options: default/success/warning/error | N -suffixIcon | TElement | - | Typescript:`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -timePickerProps | Object | - | Typescript:`TimePickerProps`,[TimePicker API Documents](./time-picker?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N -tips | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -value | Array | [] | Typescript:`DateRangeValue` `type DateRangeValue = Array`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N -defaultValue | Array | [] | uncontrolled property。Typescript:`DateRangeValue` `type DateRangeValue = Array`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N +suffixIcon | TElement | - | Typescript:`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +timePickerProps | Object | - | Typescript:`TimePickerProps`,[TimePicker API Documents](./time-picker?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N +tips | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +value | Array | [] | Typescript:`DateRangeValue` `type DateRangeValue = Array`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N +defaultValue | Array | [] | uncontrolled property。Typescript:`DateRangeValue` `type DateRangeValue = Array`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N valueType | String | - | options: time-stamp/Date/YYYY/YYYY-MM/YYYY-MM-DD/YYYY-MM-DD HH/YYYY-MM-DD HH:mm/YYYY-MM-DD HH:mm:ss/YYYY-MM-DD HH:mm:ss:SSS | N onBlur | Function | | Typescript:`(context: { value: DateRangeValue; partial: DateRangePickerPartial; e: FocusEvent }) => void` | N -onChange | Function | | Typescript:`(value: DateRangeValue, context: { dayjsValue?: Dayjs[], trigger?: DatePickerTriggerSource }) => void`[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts)。`import { Dayjs } from 'dayjs'` | N +onChange | Function | | Typescript:`(value: DateRangeValue, context: { dayjsValue?: Dayjs[], trigger?: DatePickerTriggerSource }) => void`[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts)。`import { Dayjs } from 'dayjs'` | N onConfirm | Function | | Typescript:`(context: { date: Date[], e: MouseEvent, partial: DateRangePickerPartial }) => void` | N onFocus | Function | | Typescript:`(context: { value: DateRangeValue; partial: DateRangePickerPartial; e: FocusEvent }) => void` | N onInput | Function | | Typescript:`(context: { input: string; value: DateRangeValue; partial: DateRangePickerPartial; e: InputEvent }) => void` | N -onPick | Function | | Typescript:`(value: DateValue, context: PickContext) => void`[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts)。`interface PickContext { e: MouseEvent; partial: DateRangePickerPartial }` | N +onPick | Function | | Typescript:`(value: DateValue, context: PickContext) => void`[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts)。`interface PickContext { e: MouseEvent; partial: DateRangePickerPartial }` | N onPresetClick | Function | | Typescript:`(context: { preset: PresetDate, e: MouseEvent }) => void` | N @@ -102,11 +102,11 @@ defaultTime | String | '00:00:00' | Time selector default value | N onCellClick | Function | | Typescript:`(context: { date: Date, e: MouseEvent }) => void` | N onChange | Function | | Typescript:`(value: DateValue, context: { dayjsValue?: Dayjs, e?: MouseEvent, trigger?: DatePickerTriggerSource }) => void` | N onConfirm | Function | | Typescript:`(context: { date: Date, e: MouseEvent }) => void` | N -onMonthChange | Function | | Typescript:`(context: { month: number, date: Date, e?: MouseEvent, trigger: DatePickerMonthChangeTrigger }) => void`[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts)。`type DatePickerMonthChangeTrigger = 'month-select' \| 'month-arrow-next' \| 'month-arrow-previous' \| 'today'` | N +onMonthChange | Function | | Typescript:`(context: { month: number, date: Date, e?: MouseEvent, trigger: DatePickerMonthChangeTrigger }) => void`[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts)。`type DatePickerMonthChangeTrigger = 'month-select' \| 'month-arrow-next' \| 'month-arrow-previous' \| 'today'` | N onPanelClick | Function | | Typescript:`(context: { e: MouseEvent }) => void` | N onPresetClick | Function | | Typescript:`(context: { preset: PresetDate, e: MouseEvent }) => void` | N -onTimeChange | Function | | Typescript:`(context: { time: string, date: Date, trigger: DatePickerTimeChangeTrigger, e?: MouseEvent }) => void`[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts)。`type DatePickerTimeChangeTrigger = 'time-hour' \| 'time-minute' \| 'time-second'` | N -onYearChange | Function | | Typescript:`(context: { year: number, date: Date, trigger: DatePickerYearChangeTrigger, e?: MouseEvent }) => void`[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts)。`type DatePickerYearChangeTrigger = 'year-select' \| 'year-arrow-next' \| 'year-arrow-previous' \| 'today'` | N +onTimeChange | Function | | Typescript:`(context: { time: string, date: Date, trigger: DatePickerTimeChangeTrigger, e?: MouseEvent }) => void`[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts)。`type DatePickerTimeChangeTrigger = 'time-hour' \| 'time-minute' \| 'time-second'` | N +onYearChange | Function | | Typescript:`(context: { year: number, date: Date, trigger: DatePickerYearChangeTrigger, e?: MouseEvent }) => void`[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts)。`type DatePickerYearChangeTrigger = 'year-select' \| 'year-arrow-next' \| 'year-arrow-previous' \| 'today'` | N ### DateRangePickerPanel Props diff --git a/src/date-picker/date-picker.md b/packages/components/date-picker/date-picker.md similarity index 81% rename from src/date-picker/date-picker.md rename to packages/components/date-picker/date-picker.md index 3ed50bf1e3..ab9b41e688 100644 --- a/src/date-picker/date-picker.md +++ b/packages/components/date-picker/date-picker.md @@ -12,33 +12,33 @@ allowInput | Boolean | false | 是否允许输入日期 | N borderless | Boolean | false | 无边框模式 | N clearable | Boolean | false | 是否显示清除按钮 | N defaultTime | String | '00:00:00' | 时间选择器默认值,当 value/defaultValue 未设置值时有效 | N -disableDate | Object / Array / Function | - | 禁用日期,示例:['A', 'B'] 表示日期 A 和日期 B 会被禁用。`{ from: 'A', to: 'B' }` 表示在 A 到 B 之间的日期会被禁用。`{ before: 'A', after: 'B' }` 表示在 A 之前和在 B 之后的日期都会被禁用。其中 A = '2021-01-01',B = '2021-02-01'。值类型为 Function 则表示返回值为 true 的日期会被禁用。TS 类型:`DisableDate` `type DisableDate = Array \| DisableDateObj \| ((date: DateValue) => boolean)` `interface DisableDateObj { from?: string; to?: string; before?: string; after?: string }`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N +disableDate | Object / Array / Function | - | 禁用日期,示例:['A', 'B'] 表示日期 A 和日期 B 会被禁用。`{ from: 'A', to: 'B' }` 表示在 A 到 B 之间的日期会被禁用(包含A和B)。`{ before: 'A', after: 'B' }` 表示在 A 之前和在 B 之后的日期都会被禁用。其中 A = '2021-01-01',B = '2021-02-01'。值类型为 Function 则表示返回值为 true 的日期会被禁用。TS 类型:`DisableDate` `type DisableDate = Array \| DisableDateObj \| ((date: DateValue) => boolean)` `interface DisableDateObj { from?: string; to?: string; before?: string; after?: string }`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N disableTime | Function | - | 禁用时间项的配置函数,仅在日期时间选择器中可用。TS 类型:`(time: Date) => Partial<{ hour: Array, minute: Array, second: Array, millisecond: Array }>` | N disabled | Boolean | - | 是否禁用组件 | N enableTimePicker | Boolean | false | 是否显示时间选择 | N firstDayOfWeek | Number | 7 | 第一天从星期几开始。可选项:1/2/3/4/5/6/7 | N format | String | 'YYYY-MM-DD' | 仅用于格式化日期显示的格式,不影响日期值。注意和 `valueType` 的区别,`valueType`会直接决定日期值 `value` 的格式。全局配置默认为:'YYYY-MM-DD',[详细文档](https://day.js.org/docs/en/display/format) | N -inputProps | Object | - | 透传给输入框(Input)组件的参数。TS 类型:`InputProps`,[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N -label | TNode | - | 左侧文本。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +inputProps | Object | - | 透传给输入框(Input)组件的参数。TS 类型:`InputProps`,[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N +label | TNode | - | 左侧文本。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N mode | String | date | 选择器模式。可选项:year/quarter/month/week/date | N multiple | Boolean | false | 支持多选日期,但不支持在range-picker中,或与enableTimePicker、allowInput 一起使用。TS 类型:`boolean` | N needConfirm | Boolean | true | 决定在日期时间选择器的场景下是否需要点击确认按钮才完成选择动作,默认为`true` | N placeholder | String / Array | undefined | 占位符。TS 类型:`string` | N -popupProps | Object | - | 透传给 popup 组件的参数。TS 类型:`PopupProps`,[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N -prefixIcon | TElement | - | 用于自定义组件前置图标。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -presets | Object | - | 预设快捷日期选择,示例:`{ '元旦': '2021-01-01', '昨天': dayjs().subtract(1, 'day').format('YYYY-MM-DD'), '特定日期': () => ['2021-02-01'] }`。TS 类型:`PresetDate` `interface PresetDate { [name: string]: DateValue \| (() => DateValue) }`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N +popupProps | Object | - | 透传给 popup 组件的参数。TS 类型:`PopupProps`,[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N +prefixIcon | TElement | - | 用于自定义组件前置图标。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +presets | Object | - | 预设快捷日期选择,示例:`{ '元旦': '2021-01-01', '昨天': dayjs().subtract(1, 'day').format('YYYY-MM-DD'), '特定日期': () => ['2021-02-01'] }`。TS 类型:`PresetDate` `interface PresetDate { [name: string]: DateValue \| (() => DateValue) }`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N presetsPlacement | String | bottom | 预设面板展示区域(包含确定按钮)。可选项:left/top/right/bottom | N -selectInputProps | Object | - | 透传 SelectInput 筛选器输入框组件的全部属性。TS 类型:`SelectInputProps`,[SelectInput API Documents](./select-input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N -size | String | medium | 输入框尺寸。可选项:small/medium/large。TS 类型:`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +selectInputProps | Object | - | 透传 SelectInput 筛选器输入框组件的全部属性。TS 类型:`SelectInputProps`,[SelectInput API Documents](./select-input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N +size | String | medium | 输入框尺寸。可选项:small/medium/large。TS 类型:`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N status | String | default | 输入框状态。可选项:default/success/warning/error | N -suffixIcon | TElement | - | 用于自定义组件后置图标。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -timePickerProps | Object | - | 透传 TimePicker 组件属性。TS 类型:`TimePickerProps`,[TimePicker API Documents](./time-picker?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N -tips | TNode | - | 输入框下方提示文本,会根据不同的 `status` 呈现不同的样式。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -value | String / Number / Array / Date | '' | 选中值。TS 类型:`DateValue \| DateMultipleValue` ` type DateValue = string \| number \| Date ` ` type DateMultipleValue = Array `。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N -defaultValue | String / Number / Array / Date | '' | 选中值。非受控属性。TS 类型:`DateValue \| DateMultipleValue` ` type DateValue = string \| number \| Date ` ` type DateMultipleValue = Array `。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N -valueType | String | - | 用于格式化日期的值,仅支持部分格式,时间戳、日期等。⚠️ `YYYYMMDD` 这种格式不支持,请勿使用,如果希望支持可以给 `dayjs` 提个 PR。注意和 `format` 的区别,`format` 仅用于处理日期在页面中呈现的格式。`ValueTypeEnum` 即将废弃,请更为使用 `DatePickerValueType`。TS 类型:`DatePickerValueType` `type DatePickerValueType = 'time-stamp' \| 'Date' \| 'YYYY' \| 'YYYY-MM' \| 'YYYY-MM-DD' \| 'YYYY-MM-DD HH' \| 'YYYY-MM-DD HH:mm' \| 'YYYY-MM-DD HH:mm:ss' \| 'YYYY-MM-DD HH:mm:ss:SSS'` `type ValueTypeEnum = DatePickerValueType`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N +suffixIcon | TElement | - | 用于自定义组件后置图标。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +timePickerProps | Object | - | 透传 TimePicker 组件属性。TS 类型:`TimePickerProps`,[TimePicker API Documents](./time-picker?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N +tips | TNode | - | 输入框下方提示文本,会根据不同的 `status` 呈现不同的样式。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +value | String / Number / Array / Date | '' | 选中值。TS 类型:`DateValue \| DateMultipleValue` ` type DateValue = string \| number \| Date ` ` type DateMultipleValue = Array `。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N +defaultValue | String / Number / Array / Date | '' | 选中值。非受控属性。TS 类型:`DateValue \| DateMultipleValue` ` type DateValue = string \| number \| Date ` ` type DateMultipleValue = Array `。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N +valueType | String | - | 用于格式化日期的值,仅支持部分格式,时间戳、日期等。⚠️ `YYYYMMDD` 这种格式不支持,请勿使用,如果希望支持可以给 `dayjs` 提个 PR。注意和 `format` 的区别,`format` 仅用于处理日期在页面中呈现的格式。`ValueTypeEnum` 即将废弃,请更为使用 `DatePickerValueType`。TS 类型:`DatePickerValueType` `type DatePickerValueType = 'time-stamp' \| 'Date' \| 'YYYY' \| 'YYYY-MM' \| 'YYYY-MM-DD' \| 'YYYY-MM-DD HH' \| 'YYYY-MM-DD HH:mm' \| 'YYYY-MM-DD HH:mm:ss' \| 'YYYY-MM-DD HH:mm:ss:SSS'` `type ValueTypeEnum = DatePickerValueType`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N onBlur | Function | | TS 类型:`(context: { value: DateValue; e: FocusEvent }) => void`当输入框失去焦点时触发 | N -onChange | Function | | TS 类型:`(value: DateValue, context: { dayjsValue?: Dayjs, trigger?: DatePickerTriggerSource }) => void`选中值发生变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts)。`import { Dayjs } from 'dayjs'``type DatePickerTriggerSource = 'confirm' \| 'pick' \| 'enter' \| 'preset' \| 'clear'` | N +onChange | Function | | TS 类型:`(value: DateValue, context: { dayjsValue?: Dayjs, trigger?: DatePickerTriggerSource }) => void`选中值发生变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts)。`import { Dayjs } from 'dayjs'``type DatePickerTriggerSource = 'confirm' \| 'pick' \| 'enter' \| 'preset' \| 'clear'` | N onConfirm | Function | | TS 类型:`(context: { date: Date, e: MouseEvent }) => void`如果存在“确定”按钮,则点击“确定”按钮时触发 | N onFocus | Function | | TS 类型:`(context: { value: DateValue; e: FocusEvent }) => void`输入框获得焦点时触发 | N onPick | Function | | TS 类型:`(value: DateValue) => void`面板选中值后触发 | N @@ -56,37 +56,37 @@ borderless | Boolean | false | 无边框模式 | N cancelRangeSelectLimit | Boolean | false | 默认的日期选择交互是根据点击前后日期的顺序来决定并且会加以限制。比如:用户先点击开始时间输入框,选择了一个日期例如2020-05-15,紧接着交互会自动将焦点跳到结束日期输入框,等待用户选择结束时间。此时用户只能选择大于2020-05-15的日期(之前的日期会被灰态禁止点击,限制用户的点击)。当该值传递`true`时,则取消该限制 | N clearable | Boolean | false | 是否显示清除按钮 | N defaultTime | Array | ["00:00:00", "23:59:59"] | 时间选择器默认值,当 value/defaultValue 未设置值时有效。TS 类型:`string[]` | N -disableDate | Object / Array / Function | - | 禁用日期,示例:['A', 'B'] 表示日期 A 和日期 B 会被禁用。{ from: 'A', to: 'B' } 表示在 A 到 B 之间的日期会被禁用。{ before: 'A', after: 'B' } 表示在 A 之前和在 B 之后的日期都会被禁用。其中 A = '2021-01-01',B = '2021-02-01'。值类型为 Function 则表示返回值为 true 的日期会被禁用。TS 类型:`DisableRangeDate` `type DisableRangeDate = Array \| DisableDateObj \| ((context: { date: DateRangeValue; partial: DateRangePickerPartial }) => boolean)` `interface DisableDateObj { from?: string; to?: string; before?: string; after?: string }` `type DateRangePickerPartial = 'start' \| 'end'`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N +disableDate | Object / Array / Function | - | 禁用日期,示例:['A', 'B'] 表示日期 A 和日期 B 会被禁用。{ from: 'A', to: 'B' } 表示在 A 到 B 之间的日期会被禁用(包含A和B)。{ before: 'A', after: 'B' } 表示在 A 之前和在 B 之后的日期都会被禁用。其中 A = '2021-01-01',B = '2021-02-01'。值类型为 Function 则表示返回值为 true 的日期会被禁用。TS 类型:`DisableRangeDate` `type DisableRangeDate = Array \| DisableDateObj \| ((context: { date: DateRangeValue; partial: DateRangePickerPartial }) => boolean)` `interface DisableDateObj { from?: string; to?: string; before?: string; after?: string }` `type DateRangePickerPartial = 'start' \| 'end'`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N disableTime | Function | - | 禁用时间项的配置函数,仅在日期区间选择器中开启时间展示时可用。TS 类型:`(times: Array, context: { partial: DateRangePickerPartial }) => Partial<{ hour: Array, minute: Array, second: Array }>` | N disabled | Boolean | - | 是否禁用组件 | N enableTimePicker | Boolean | false | 是否显示时间选择 | N firstDayOfWeek | Number | - | 第一天从星期几开始。可选项:1/2/3/4/5/6/7 | N format | String | - | 用于格式化日期,[详细文档](https://day.js.org/docs/en/display/format) | N -label | TNode | - | 左侧文本。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +label | TNode | - | 左侧文本。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N mode | String | date | 选择器模式。可选项:year/quarter/month/week/date | N needConfirm | Boolean | true | 决定在日期时间区间选择器的场景下是否需要点击确认按钮才完成选择动作,默认为 `true` | N panelPreselection | Boolean | true | 在开始日期选中之前,面板是否显示预选状态,即是否高亮预选日期 | N placeholder | String / Array | - | 占位符,值为数组表示可分别为开始日期和结束日期设置占位符。TS 类型:`string \| Array` | N -popupProps | Object | - | 透传给 popup 组件的参数。TS 类型:`PopupProps`,[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N -prefixIcon | TElement | - | 组件前置图标。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -presets | Object | - | 预设快捷日期选择,示例:{ '特定日期范围': ['2021-01-01', '2022-01-01'], '本月': [dayjs().startOf('month'), dayjs().endOf('month')] }。TS 类型:`PresetRange` `interface PresetRange { [range: string]: DateRange \| (() => DateRange)}` `type DateRange = [DateValue, DateValue]`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N +popupProps | Object | - | 透传给 popup 组件的参数。TS 类型:`PopupProps`,[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N +prefixIcon | TElement | - | 组件前置图标。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +presets | Object | - | 预设快捷日期选择,示例:{ '特定日期范围': ['2021-01-01', '2022-01-01'], '本月': [dayjs().startOf('month'), dayjs().endOf('month')] }。TS 类型:`PresetRange` `interface PresetRange { [range: string]: DateRange \| (() => DateRange)}` `type DateRange = [DateValue, DateValue]`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N presetsPlacement | String | bottom | 预设面板展示区域(包含确定按钮)。可选项:left/top/right/bottom | N -rangeInputProps | Object | - | 透传给范围输入框 RangeInput 组件的参数。TS 类型:`RangeInputProps`,[RangeInput API Documents](./range-input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N +rangeInputProps | Object | - | 透传给范围输入框 RangeInput 组件的参数。TS 类型:`RangeInputProps`,[RangeInput API Documents](./range-input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N separator | String | - | 日期分隔符,支持全局配置,默认为 '-' | N -size | String | medium | 输入框尺寸。可选项:small/medium/large。TS 类型:`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +size | String | medium | 输入框尺寸。可选项:small/medium/large。TS 类型:`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N status | String | default | 输入框状态。可选项:default/success/warning/error | N -suffixIcon | TElement | - | 组件后置图标。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -timePickerProps | Object | - | 透传 TimePicker 组件属性。TS 类型:`TimePickerProps`,[TimePicker API Documents](./time-picker?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N -tips | TNode | - | 输入框下方提示文本,会根据不同的 `status` 呈现不同的样式。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -value | Array | [] | 选中值。TS 类型:`DateRangeValue` `type DateRangeValue = Array`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N -defaultValue | Array | [] | 选中值。非受控属性。TS 类型:`DateRangeValue` `type DateRangeValue = Array`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N +suffixIcon | TElement | - | 组件后置图标。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +timePickerProps | Object | - | 透传 TimePicker 组件属性。TS 类型:`TimePickerProps`,[TimePicker API Documents](./time-picker?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N +tips | TNode | - | 输入框下方提示文本,会根据不同的 `status` 呈现不同的样式。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +value | Array | [] | 选中值。TS 类型:`DateRangeValue` `type DateRangeValue = Array`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N +defaultValue | Array | [] | 选中值。非受控属性。TS 类型:`DateRangeValue` `type DateRangeValue = Array`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts) | N valueType | String | - | 用于格式化日期的值,仅支持部分格式,时间戳、日期等。⚠️ `YYYYMMDD` 这种格式不支持,请勿使用,如果希望支持可以给 `dayjs` 提个 PR。注意和 `format` 的区别,`format` 仅用于处理日期在页面中呈现的格式。可选项:time-stamp/Date/YYYY/YYYY-MM/YYYY-MM-DD/YYYY-MM-DD HH/YYYY-MM-DD HH:mm/YYYY-MM-DD HH:mm:ss/YYYY-MM-DD HH:mm:ss:SSS | N onBlur | Function | | TS 类型:`(context: { value: DateRangeValue; partial: DateRangePickerPartial; e: FocusEvent }) => void`当输入框失去焦点时触发 | N -onChange | Function | | TS 类型:`(value: DateRangeValue, context: { dayjsValue?: Dayjs[], trigger?: DatePickerTriggerSource }) => void`选中值发生变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts)。`import { Dayjs } from 'dayjs'` | N +onChange | Function | | TS 类型:`(value: DateRangeValue, context: { dayjsValue?: Dayjs[], trigger?: DatePickerTriggerSource }) => void`选中值发生变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts)。`import { Dayjs } from 'dayjs'` | N onConfirm | Function | | TS 类型:`(context: { date: Date[], e: MouseEvent, partial: DateRangePickerPartial }) => void`如果存在“确定”按钮,则点击“确定”按钮时触发 | N onFocus | Function | | TS 类型:`(context: { value: DateRangeValue; partial: DateRangePickerPartial; e: FocusEvent }) => void`输入框获得焦点时触发 | N onInput | Function | | TS 类型:`(context: { input: string; value: DateRangeValue; partial: DateRangePickerPartial; e: InputEvent }) => void`输入框数据发生变化时触发,参数 input 表示输入内容,value 表示组件当前有效值 | N -onPick | Function | | TS 类型:`(value: DateValue, context: PickContext) => void`选中日期时触发,可能是开始日期,也可能是结束日期,第二个参数可以区分是开始日期或是结束日期。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts)。`interface PickContext { e: MouseEvent; partial: DateRangePickerPartial }` | N +onPick | Function | | TS 类型:`(value: DateValue, context: PickContext) => void`选中日期时触发,可能是开始日期,也可能是结束日期,第二个参数可以区分是开始日期或是结束日期。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts)。`interface PickContext { e: MouseEvent; partial: DateRangePickerPartial }` | N onPresetClick | Function | | TS 类型:`(context: { preset: PresetDate, e: MouseEvent }) => void`点击预设按钮后触发 | N @@ -101,11 +101,11 @@ defaultTime | String | '00:00:00' | 时间选择器默认值,当 value/default onCellClick | Function | | TS 类型:`(context: { date: Date, e: MouseEvent }) => void`点击日期单元格时触发 | N onChange | Function | | TS 类型:`(value: DateValue, context: { dayjsValue?: Dayjs, e?: MouseEvent, trigger?: DatePickerTriggerSource }) => void`选中值发生变化时触发。参数 `context.trigger` 表示触发当前事件的来源,不同的模式触发来源也会不同 | N onConfirm | Function | | TS 类型:`(context: { date: Date, e: MouseEvent }) => void`如果存在“确定”按钮,则点击“确定”按钮时触发 | N -onMonthChange | Function | | TS 类型:`(context: { month: number, date: Date, e?: MouseEvent, trigger: DatePickerMonthChangeTrigger }) => void`月份切换发生变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts)。`type DatePickerMonthChangeTrigger = 'month-select' \| 'month-arrow-next' \| 'month-arrow-previous' \| 'today'` | N +onMonthChange | Function | | TS 类型:`(context: { month: number, date: Date, e?: MouseEvent, trigger: DatePickerMonthChangeTrigger }) => void`月份切换发生变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts)。`type DatePickerMonthChangeTrigger = 'month-select' \| 'month-arrow-next' \| 'month-arrow-previous' \| 'today'` | N onPanelClick | Function | | TS 类型:`(context: { e: MouseEvent }) => void`点击面板时触发 | N onPresetClick | Function | | TS 类型:`(context: { preset: PresetDate, e: MouseEvent }) => void`点击预设按钮后触发 | N -onTimeChange | Function | | TS 类型:`(context: { time: string, date: Date, trigger: DatePickerTimeChangeTrigger, e?: MouseEvent }) => void`时间切换发生变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts)。`type DatePickerTimeChangeTrigger = 'time-hour' \| 'time-minute' \| 'time-second'` | N -onYearChange | Function | | TS 类型:`(context: { year: number, date: Date, trigger: DatePickerYearChangeTrigger, e?: MouseEvent }) => void`年份切换发生变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts)。`type DatePickerYearChangeTrigger = 'year-select' \| 'year-arrow-next' \| 'year-arrow-previous' \| 'today'` | N +onTimeChange | Function | | TS 类型:`(context: { time: string, date: Date, trigger: DatePickerTimeChangeTrigger, e?: MouseEvent }) => void`时间切换发生变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts)。`type DatePickerTimeChangeTrigger = 'time-hour' \| 'time-minute' \| 'time-second'` | N +onYearChange | Function | | TS 类型:`(context: { year: number, date: Date, trigger: DatePickerYearChangeTrigger, e?: MouseEvent }) => void`年份切换发生变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/date-picker/type.ts)。`type DatePickerYearChangeTrigger = 'year-select' \| 'year-arrow-next' \| 'year-arrow-previous' \| 'today'` | N ### DateRangePickerPanel Props diff --git a/src/date-picker/defaultProps.ts b/packages/components/date-picker/defaultProps.ts similarity index 100% rename from src/date-picker/defaultProps.ts rename to packages/components/date-picker/defaultProps.ts diff --git a/src/date-picker/hooks/useDisableDate.ts b/packages/components/date-picker/hooks/useDisableDate.ts similarity index 71% rename from src/date-picker/hooks/useDisableDate.ts rename to packages/components/date-picker/hooks/useDisableDate.ts index 8670dda675..c297c44351 100644 --- a/src/date-picker/hooks/useDisableDate.ts +++ b/packages/components/date-picker/hooks/useDisableDate.ts @@ -1,6 +1,7 @@ -import isObject from 'lodash/isObject'; +import { isObject } from 'lodash-es'; +import dayjs from 'dayjs'; import type { TdDatePickerProps, TdDateRangePickerProps } from '../type'; -import { isEnabledDate } from '../../_common/js/date-picker/utils'; +import { isEnabledDate } from '../../../common/js/date-picker/utils'; export interface disableDateProps { disableDate?: TdDatePickerProps['disableDate'] | TdDateRangePickerProps['disableDate']; @@ -15,7 +16,7 @@ export default function useDisableDate(props: disableDateProps) { return { disableDate: (value: Date) => !isEnabledDate({ disableDate, format, mode, value }), - minDate: isObject(disableDate) && 'before' in disableDate ? new Date(disableDate.before) : start, - maxDate: isObject(disableDate) && 'after' in disableDate ? new Date(disableDate.after) : end, + minDate: isObject(disableDate) && 'before' in disableDate ? new Date(dayjs(disableDate.before).startOf('day').format()) : start, + maxDate: isObject(disableDate) && 'after' in disableDate ? new Date(dayjs(disableDate.after).endOf('day').format()) : end, }; } diff --git a/src/date-picker/hooks/useRange.tsx b/packages/components/date-picker/hooks/useRange.tsx similarity index 99% rename from src/date-picker/hooks/useRange.tsx rename to packages/components/date-picker/hooks/useRange.tsx index a24669cdc8..5942d93177 100644 --- a/src/date-picker/hooks/useRange.tsx +++ b/packages/components/date-picker/hooks/useRange.tsx @@ -5,7 +5,7 @@ import useConfig from '../../hooks/useConfig'; import useGlobalIcon from '../../hooks/useGlobalIcon'; import { RangeInputRefInterface } from '../../range-input'; import { TdDateRangePickerProps, DateValue } from '../type'; -import { isValidDate, formatDate, getDefaultFormat, parseToDayjs } from '../../_common/js/date-picker/format'; +import { isValidDate, formatDate, getDefaultFormat, parseToDayjs } from '../../../common/js/date-picker/format'; import useRangeValue from './useRangeValue'; import type { TdPopupProps } from '../../popup/type'; diff --git a/src/date-picker/hooks/useRangeValue.ts b/packages/components/date-picker/hooks/useRangeValue.ts similarity index 93% rename from src/date-picker/hooks/useRangeValue.ts rename to packages/components/date-picker/hooks/useRangeValue.ts index abfcfc6989..382b7e5b3f 100644 --- a/src/date-picker/hooks/useRangeValue.ts +++ b/packages/components/date-picker/hooks/useRangeValue.ts @@ -7,9 +7,9 @@ import { formatTime, getDefaultFormat, initYearMonthTime, -} from '../../_common/js/date-picker/format'; -import { extractTimeFormat } from '../../_common/js/date-picker/utils'; -import log from '../../_common/js/log'; + extractTimeFormat, +} from '../../../common/js/date-picker/format'; +import log from '../../../common/js/log'; export const PARTIAL_MAP = { first: 'start', second: 'end' }; diff --git a/src/date-picker/hooks/useSingle.tsx b/packages/components/date-picker/hooks/useSingle.tsx similarity index 98% rename from src/date-picker/hooks/useSingle.tsx rename to packages/components/date-picker/hooks/useSingle.tsx index 85d31d169b..95e1708295 100644 --- a/src/date-picker/hooks/useSingle.tsx +++ b/packages/components/date-picker/hooks/useSingle.tsx @@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef } from 'react'; import { CalendarIcon as TdCalendarIcon } from 'tdesign-icons-react'; import dayjs from 'dayjs'; import classNames from 'classnames'; -import omit from 'lodash/omit'; +import { omit } from 'lodash-es'; import useConfig from '../../hooks/useConfig'; import useGlobalIcon from '../../hooks/useGlobalIcon'; import { TdDatePickerProps } from '../type'; @@ -12,7 +12,7 @@ import { formatTime, getDefaultFormat, parseToDayjs, -} from '../../_common/js/date-picker/format'; +} from '../../../common/js/date-picker/format'; import useSingleValue from './useSingleValue'; import type { TdPopupProps } from '../../popup/type'; diff --git a/src/date-picker/hooks/useSingleValue.tsx b/packages/components/date-picker/hooks/useSingleValue.tsx similarity index 76% rename from src/date-picker/hooks/useSingleValue.tsx rename to packages/components/date-picker/hooks/useSingleValue.tsx index e1bdcecdb9..31828b5d27 100644 --- a/src/date-picker/hooks/useSingleValue.tsx +++ b/packages/components/date-picker/hooks/useSingleValue.tsx @@ -5,11 +5,11 @@ import { isValidDate, getDefaultFormat, parseToDayjs, -} from '../../_common/js/date-picker/format'; + extractTimeFormat, +} from '../../../common/js/date-picker/format'; import useControlled from '../../hooks/useControlled'; import { TdDatePickerProps } from '../type'; -import { extractTimeFormat } from '../../_common/js/date-picker/utils'; -import log from '../../_common/js/log'; +import log from '../../../common/js/log'; export default function useSingleValue(props: TdDatePickerProps) { const [value, onChange] = useControlled(props, 'value', props.onChange); @@ -26,11 +26,11 @@ export default function useSingleValue(props: TdDatePickerProps) { } const [time, setTime] = useState(() => - formatTime(props.multiple ? value[0] : value, format, timeFormat, props.defaultTime), + formatTime(props.multiple ? value?.[0] : value, format, timeFormat, props.defaultTime), ); - const [month, setMonth] = useState(() => parseToDayjs(props.multiple ? value[0] : value, format).month()); - const [year, setYear] = useState(() => parseToDayjs(props.multiple ? value[0] : value, format).year()); - const [cacheValue, setCacheValue] = useState(() => formatDate(props.multiple ? value[0] : value, { format })); // 缓存选中值,panel 点击时更改 + const [month, setMonth] = useState(() => parseToDayjs(props.multiple ? value?.[0] : value, format).month()); + const [year, setYear] = useState(() => parseToDayjs(props.multiple ? value?.[0] : value, format).year()); + const [cacheValue, setCacheValue] = useState(() => formatDate(props.multiple ? value?.[0] : value, { format })); // 缓存选中值,panel 点击时更改 // 输入框响应 value 变化 useEffect(() => { diff --git a/src/date-picker/hooks/useTableData.tsx b/packages/components/date-picker/hooks/useTableData.tsx similarity index 97% rename from src/date-picker/hooks/useTableData.tsx rename to packages/components/date-picker/hooks/useTableData.tsx index 8c14453431..b99946a912 100644 --- a/src/date-picker/hooks/useTableData.tsx +++ b/packages/components/date-picker/hooks/useTableData.tsx @@ -1,5 +1,5 @@ import { useLocaleReceiver } from '../../locale/LocalReceiver'; -import { getWeeks, getQuarters, getYears, getMonths, flagActive } from '../../_common/js/date-picker/utils'; +import { getWeeks, getQuarters, getYears, getMonths, flagActive } from '../../../common/js/date-picker/utils'; import type { SinglePanelProps } from '../panel/SinglePanel'; export interface TableDataProps extends SinglePanelProps { diff --git a/src/date-picker/index.ts b/packages/components/date-picker/index.ts similarity index 100% rename from src/date-picker/index.ts rename to packages/components/date-picker/index.ts diff --git a/src/date-picker/panel/ExtraContent.tsx b/packages/components/date-picker/panel/ExtraContent.tsx similarity index 100% rename from src/date-picker/panel/ExtraContent.tsx rename to packages/components/date-picker/panel/ExtraContent.tsx diff --git a/src/date-picker/panel/PanelContent.tsx b/packages/components/date-picker/panel/PanelContent.tsx similarity index 96% rename from src/date-picker/panel/PanelContent.tsx rename to packages/components/date-picker/panel/PanelContent.tsx index a9c19cfbe5..4428a3609b 100644 --- a/src/date-picker/panel/PanelContent.tsx +++ b/packages/components/date-picker/panel/PanelContent.tsx @@ -6,7 +6,7 @@ import type { SinglePanelProps } from './SinglePanel'; import type { RangePanelProps } from './RangePanel'; import useConfig from '../../hooks/useConfig'; import useEventCallback from '../../hooks/useEventCallback'; -import { getDefaultFormat } from '../../_common/js/date-picker/format'; +import { getDefaultFormat } from '../../../common/js/date-picker/format'; export interface PanelContentProps { partial?: 'start' | 'end'; @@ -19,7 +19,7 @@ export interface PanelContentProps { timePickerProps: SinglePanelProps['timePickerProps']; firstDayOfWeek: SinglePanelProps['firstDayOfWeek']; time: SinglePanelProps['time']; - + multiple?: SinglePanelProps['multiple']; popupVisible?: boolean; tableData: any[]; onMonthChange: SinglePanelProps['onMonthChange'] | RangePanelProps['onMonthChange']; @@ -104,6 +104,7 @@ export default function PanelContent(props: PanelContentProps) { time={time} format={format} firstDayOfWeek={firstDayOfWeek} + multiple={props.multiple} onCellClick={(date: Date, { e }) => onCellClick?.(date, { e, partial })} onCellMouseEnter={(date: Date) => onCellMouseEnter?.(date, { partial })} onCellMouseLeave={onCellMouseLeave} diff --git a/src/date-picker/panel/RangePanel.tsx b/packages/components/date-picker/panel/RangePanel.tsx similarity index 98% rename from src/date-picker/panel/RangePanel.tsx rename to packages/components/date-picker/panel/RangePanel.tsx index 85d42a60d3..88ed981dd5 100644 --- a/src/date-picker/panel/RangePanel.tsx +++ b/packages/components/date-picker/panel/RangePanel.tsx @@ -1,11 +1,11 @@ import React, { forwardRef } from 'react'; import classNames from 'classnames'; -import isFunction from 'lodash/isFunction'; +import { isFunction } from 'lodash-es'; import useConfig from '../../hooks/useConfig'; import { StyledProps } from '../../common'; import PanelContent from './PanelContent'; import ExtraContent from './ExtraContent'; -import { getDefaultFormat, parseToDayjs } from '../../_common/js/date-picker/format'; +import { getDefaultFormat, parseToDayjs } from '../../../common/js/date-picker/format'; import useTableData from '../hooks/useTableData'; import useDisableDate from '../hooks/useDisableDate'; import useDefaultProps from '../../hooks/useDefaultProps'; diff --git a/src/date-picker/panel/SinglePanel.tsx b/packages/components/date-picker/panel/SinglePanel.tsx similarity index 97% rename from src/date-picker/panel/SinglePanel.tsx rename to packages/components/date-picker/panel/SinglePanel.tsx index 96fc61a625..d7e2ac49c6 100644 --- a/src/date-picker/panel/SinglePanel.tsx +++ b/packages/components/date-picker/panel/SinglePanel.tsx @@ -1,13 +1,13 @@ import React, { forwardRef } from 'react'; import classNames from 'classnames'; -import isFunction from 'lodash/isFunction'; +import { isFunction } from 'lodash-es'; import useConfig from '../../hooks/useConfig'; import { StyledProps } from '../../common'; import PanelContent from './PanelContent'; import ExtraContent from './ExtraContent'; import type { DateValue, TdDatePickerProps } from '../type'; import type { TdTimePickerProps } from '../../time-picker'; -import { getDefaultFormat, parseToDayjs } from '../../_common/js/date-picker/format'; +import { getDefaultFormat, parseToDayjs } from '../../../common/js/date-picker/format'; import useTableData from '../hooks/useTableData'; import useDisableDate from '../hooks/useDisableDate'; import useDefaultProps from '../../hooks/useDefaultProps'; diff --git a/src/date-picker/panel/style/css.js b/packages/components/date-picker/panel/style/css.js similarity index 100% rename from src/date-picker/panel/style/css.js rename to packages/components/date-picker/panel/style/css.js diff --git a/src/date-picker/panel/style/index.js b/packages/components/date-picker/panel/style/index.js similarity index 100% rename from src/date-picker/panel/style/index.js rename to packages/components/date-picker/panel/style/index.js diff --git a/src/date-picker/style/css.js b/packages/components/date-picker/style/css.js similarity index 100% rename from src/date-picker/style/css.js rename to packages/components/date-picker/style/css.js diff --git a/packages/components/date-picker/style/index.js b/packages/components/date-picker/style/index.js new file mode 100644 index 0000000000..883e152d4b --- /dev/null +++ b/packages/components/date-picker/style/index.js @@ -0,0 +1 @@ +import '../../../common/style/web/components/date-picker/_index.less'; diff --git a/src/date-picker/type.ts b/packages/components/date-picker/type.ts similarity index 100% rename from src/date-picker/type.ts rename to packages/components/date-picker/type.ts diff --git a/src/date-picker/utils.ts b/packages/components/date-picker/utils.ts similarity index 94% rename from src/date-picker/utils.ts rename to packages/components/date-picker/utils.ts index 90df439244..c30d57d360 100644 --- a/src/date-picker/utils.ts +++ b/packages/components/date-picker/utils.ts @@ -1,5 +1,5 @@ -import isNil from 'lodash/isNil'; -import { parseToDayjs } from '../_common/js/date-picker/format'; +import { isNil } from 'lodash-es'; +import { parseToDayjs } from '../../common/js/date-picker/format'; // 用于头部日期切换修正 export function dateCorrection(partialIndex: number, preYear: Array, preMonth: Array, onlyYearSelect) { diff --git a/src/descriptions/Descriptions.tsx b/packages/components/descriptions/Descriptions.tsx similarity index 98% rename from src/descriptions/Descriptions.tsx rename to packages/components/descriptions/Descriptions.tsx index e0a72636ae..0af1b2f237 100644 --- a/src/descriptions/Descriptions.tsx +++ b/packages/components/descriptions/Descriptions.tsx @@ -1,7 +1,6 @@ import React from 'react'; import classNames from 'classnames'; -import isArray from 'lodash/isArray'; -import assign from 'lodash/assign'; +import { isArray , assign } from 'lodash-es'; import { TdDescriptionItemProps, TdDescriptionsProps } from './type'; import { descriptionItemDefaultProps, descriptionsDefaultProps } from './defaultProps'; import useDefaultProps from '../hooks/useDefaultProps'; diff --git a/src/descriptions/DescriptionsContext.tsx b/packages/components/descriptions/DescriptionsContext.tsx similarity index 100% rename from src/descriptions/DescriptionsContext.tsx rename to packages/components/descriptions/DescriptionsContext.tsx diff --git a/src/descriptions/DescriptionsItem.tsx b/packages/components/descriptions/DescriptionsItem.tsx similarity index 100% rename from src/descriptions/DescriptionsItem.tsx rename to packages/components/descriptions/DescriptionsItem.tsx diff --git a/src/descriptions/Row.tsx b/packages/components/descriptions/Row.tsx similarity index 100% rename from src/descriptions/Row.tsx rename to packages/components/descriptions/Row.tsx diff --git a/src/descriptions/__tests__/descriptions.test.tsx b/packages/components/descriptions/__tests__/descriptions.test.tsx similarity index 100% rename from src/descriptions/__tests__/descriptions.test.tsx rename to packages/components/descriptions/__tests__/descriptions.test.tsx diff --git a/src/descriptions/_example/base.tsx b/packages/components/descriptions/_example/base.tsx similarity index 100% rename from src/descriptions/_example/base.tsx rename to packages/components/descriptions/_example/base.tsx diff --git a/src/descriptions/_example/bordered.tsx b/packages/components/descriptions/_example/bordered.tsx similarity index 100% rename from src/descriptions/_example/bordered.tsx rename to packages/components/descriptions/_example/bordered.tsx diff --git a/src/descriptions/_example/colon.tsx b/packages/components/descriptions/_example/colon.tsx similarity index 100% rename from src/descriptions/_example/colon.tsx rename to packages/components/descriptions/_example/colon.tsx diff --git a/src/descriptions/_example/column.tsx b/packages/components/descriptions/_example/column.tsx similarity index 100% rename from src/descriptions/_example/column.tsx rename to packages/components/descriptions/_example/column.tsx diff --git a/src/descriptions/_example/custom-style.tsx b/packages/components/descriptions/_example/custom-style.tsx similarity index 100% rename from src/descriptions/_example/custom-style.tsx rename to packages/components/descriptions/_example/custom-style.tsx diff --git a/src/descriptions/_example/items.tsx b/packages/components/descriptions/_example/items.tsx similarity index 100% rename from src/descriptions/_example/items.tsx rename to packages/components/descriptions/_example/items.tsx diff --git a/src/descriptions/_example/layout.tsx b/packages/components/descriptions/_example/layout.tsx similarity index 100% rename from src/descriptions/_example/layout.tsx rename to packages/components/descriptions/_example/layout.tsx diff --git a/src/descriptions/_example/nest.tsx b/packages/components/descriptions/_example/nest.tsx similarity index 100% rename from src/descriptions/_example/nest.tsx rename to packages/components/descriptions/_example/nest.tsx diff --git a/src/descriptions/_example/size.tsx b/packages/components/descriptions/_example/size.tsx similarity index 100% rename from src/descriptions/_example/size.tsx rename to packages/components/descriptions/_example/size.tsx diff --git a/src/descriptions/_usage/index.jsx b/packages/components/descriptions/_usage/index.jsx similarity index 100% rename from src/descriptions/_usage/index.jsx rename to packages/components/descriptions/_usage/index.jsx diff --git a/src/descriptions/_usage/props.json b/packages/components/descriptions/_usage/props.json similarity index 100% rename from src/descriptions/_usage/props.json rename to packages/components/descriptions/_usage/props.json diff --git a/src/descriptions/defaultProps.ts b/packages/components/descriptions/defaultProps.ts similarity index 100% rename from src/descriptions/defaultProps.ts rename to packages/components/descriptions/defaultProps.ts diff --git a/src/descriptions/descriptions.en-US.md b/packages/components/descriptions/descriptions.en-US.md similarity index 64% rename from src/descriptions/descriptions.en-US.md rename to packages/components/descriptions/descriptions.en-US.md index a52229952e..b268d7fd13 100644 --- a/src/descriptions/descriptions.en-US.md +++ b/packages/components/descriptions/descriptions.en-US.md @@ -1,29 +1,31 @@ :: BASE_DOC :: ## API + ### Descriptions Props name | type | default | description | required -- | -- | -- | -- | -- -className | String | - | 类名 | N -style | Object | - | 样式,Typescript:`React.CSSProperties` | N +className | String | - | className of component | N +style | Object | - | CSS(Cascading Style Sheets),Typescript:`React.CSSProperties` | N bordered | Boolean | false | set description list with grey border | N colon | Boolean | - | set label with ":" on the right | N column | Number | 2 | count of DescriptionItem in one row | N -contentStyle | Object | - | style of description cotent。Typescript:`Styles`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +contentStyle | Object | - | style of description content。Typescript:`Styles`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N itemLayout | String | horizontal | layout direction of description item。options: horizontal/vertical | N items | Array | - | list of descriptions items。Typescript:`Array` | N -labelStyle | Object | - | style of description item。Typescript:`Styles`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +labelStyle | Object | - | style of description item。Typescript:`Styles`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N layout | String | horizontal | layout direction。options: horizontal/vertical | N -size | String | medium | a descriptions has three size。options: small/medium/large。Typescript:`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -title | TNode | - | title of descriptions。Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +size | String | medium | a descriptions has three size。options: small/medium/large。Typescript:`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +title | TNode | - | title of descriptions。Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N + ### DescriptionItem Props name | type | default | description | required -- | -- | -- | -- | -- -className | String | - | 类名 | N -style | Object | - | 样式,Typescript:`React.CSSProperties` | N -content | TNode | - | content of description item。Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -label | TNode | - | label of description item。Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +className | String | - | className of component | N +style | Object | - | CSS(Cascading Style Sheets),Typescript:`React.CSSProperties` | N +content | TNode | - | content of description item。Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +label | TNode | - | label of description item。Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N span | Number | 1 | width count | N diff --git a/src/descriptions/descriptions.md b/packages/components/descriptions/descriptions.md similarity index 77% rename from src/descriptions/descriptions.md rename to packages/components/descriptions/descriptions.md index 923b538be4..50191b30e6 100644 --- a/src/descriptions/descriptions.md +++ b/packages/components/descriptions/descriptions.md @@ -1,29 +1,31 @@ :: BASE_DOC :: ## API + ### Descriptions Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式,TS 类型:`React.CSSProperties` | N bordered | Boolean | false | 是否带边框 | N colon | Boolean | - | 字段名右侧是否携带冒号“:” | N column | Number | 2 | 一行 `DescriptionItem` 的数量 | N -contentStyle | Object | - | 自定义描述项内容的样式。TS 类型:`Styles`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +contentStyle | Object | - | 自定义描述项内容的样式。TS 类型:`Styles`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N itemLayout | String | horizontal | 描述项的排列方向。可选项:horizontal/vertical | N items | Array | - | 描述项的列表。TS 类型:`Array` | N -labelStyle | Object | - | 自定义描述项标签的样式。TS 类型:`Styles`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +labelStyle | Object | - | 自定义描述项标签的样式。TS 类型:`Styles`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N layout | String | horizontal | 排列方向。可选项:horizontal/vertical | N -size | String | medium | 组件尺寸。可选项:small/medium/large。TS 类型:`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -title | TNode | - | 描述列表的标题。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +size | String | medium | 组件尺寸。可选项:small/medium/large。TS 类型:`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +title | TNode | - | 描述列表的标题。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N + ### DescriptionItem Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式,TS 类型:`React.CSSProperties` | N -content | TNode | - | 描述项内容。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -label | TNode | - | 描述项标签。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +content | TNode | - | 描述项内容。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +label | TNode | - | 描述项标签。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N span | Number | 1 | 占用的宽度数量 | N diff --git a/src/descriptions/index.ts b/packages/components/descriptions/index.ts similarity index 100% rename from src/descriptions/index.ts rename to packages/components/descriptions/index.ts diff --git a/src/descriptions/style/css.js b/packages/components/descriptions/style/css.js similarity index 100% rename from src/descriptions/style/css.js rename to packages/components/descriptions/style/css.js diff --git a/packages/components/descriptions/style/index.js b/packages/components/descriptions/style/index.js new file mode 100644 index 0000000000..2146a7beee --- /dev/null +++ b/packages/components/descriptions/style/index.js @@ -0,0 +1 @@ +import '../../../common/style/web/components/descriptions/_index.less'; diff --git a/src/descriptions/type.ts b/packages/components/descriptions/type.ts similarity index 100% rename from src/descriptions/type.ts rename to packages/components/descriptions/type.ts diff --git a/src/dialog/Dialog.tsx b/packages/components/dialog/Dialog.tsx similarity index 99% rename from src/dialog/Dialog.tsx rename to packages/components/dialog/Dialog.tsx index 0a10d28bcb..8b0e752fd4 100644 --- a/src/dialog/Dialog.tsx +++ b/packages/components/dialog/Dialog.tsx @@ -14,7 +14,7 @@ import useLockStyle from './hooks/useLockStyle'; import useDialogPosition from './hooks/useDialogPosition'; import useDialogDrag from './hooks/useDialogDrag'; import { parseValueToPx } from './utils'; -import log from '../_common/js/log'; +import log from '../../common/js/log'; import useDefaultProps from '../hooks/useDefaultProps'; import useAttach from '../hooks/useAttach'; @@ -157,7 +157,7 @@ const Dialog = forwardRef((originalProps, ref) => { const onAnimateStart = () => { if (!wrapRef.current) return; - onBeforeOpen?.() + onBeforeOpen?.(); wrapRef.current.style.display = 'block'; }; diff --git a/src/dialog/DialogCard.tsx b/packages/components/dialog/DialogCard.tsx similarity index 97% rename from src/dialog/DialogCard.tsx rename to packages/components/dialog/DialogCard.tsx index 42de883326..198eff6d8f 100644 --- a/src/dialog/DialogCard.tsx +++ b/packages/components/dialog/DialogCard.tsx @@ -1,8 +1,6 @@ import React, { forwardRef, isValidElement } from 'react'; import classNames from 'classnames'; -import isString from 'lodash/isString'; -import isObject from 'lodash/isObject'; -import isFunction from 'lodash/isFunction'; +import { isString , isObject , isFunction } from 'lodash-es'; import { CloseIcon as TdCloseIcon, InfoCircleFilledIcon as TdInfoCircleFilledIcon, diff --git a/src/dialog/__tests__/dialog.test.tsx b/packages/components/dialog/__tests__/dialog.test.tsx similarity index 100% rename from src/dialog/__tests__/dialog.test.tsx rename to packages/components/dialog/__tests__/dialog.test.tsx diff --git a/src/dialog/_example/async.tsx b/packages/components/dialog/_example/async.tsx similarity index 100% rename from src/dialog/_example/async.tsx rename to packages/components/dialog/_example/async.tsx diff --git a/src/dialog/_example/attach.tsx b/packages/components/dialog/_example/attach.tsx similarity index 100% rename from src/dialog/_example/attach.tsx rename to packages/components/dialog/_example/attach.tsx diff --git a/src/dialog/_example/base.tsx b/packages/components/dialog/_example/base.tsx similarity index 100% rename from src/dialog/_example/base.tsx rename to packages/components/dialog/_example/base.tsx diff --git a/src/dialog/_example/custom.tsx b/packages/components/dialog/_example/custom.tsx similarity index 100% rename from src/dialog/_example/custom.tsx rename to packages/components/dialog/_example/custom.tsx diff --git a/src/dialog/_example/icon.tsx b/packages/components/dialog/_example/icon.tsx similarity index 100% rename from src/dialog/_example/icon.tsx rename to packages/components/dialog/_example/icon.tsx diff --git a/src/dialog/_example/modal.tsx b/packages/components/dialog/_example/modal.tsx similarity index 100% rename from src/dialog/_example/modal.tsx rename to packages/components/dialog/_example/modal.tsx diff --git a/src/dialog/_example/plugin.tsx b/packages/components/dialog/_example/plugin.tsx similarity index 100% rename from src/dialog/_example/plugin.tsx rename to packages/components/dialog/_example/plugin.tsx diff --git a/src/dialog/_example/position.tsx b/packages/components/dialog/_example/position.tsx similarity index 100% rename from src/dialog/_example/position.tsx rename to packages/components/dialog/_example/position.tsx diff --git a/src/dialog/_example/warning.tsx b/packages/components/dialog/_example/warning.tsx similarity index 100% rename from src/dialog/_example/warning.tsx rename to packages/components/dialog/_example/warning.tsx diff --git a/src/dialog/_usage/index.jsx b/packages/components/dialog/_usage/index.jsx similarity index 100% rename from src/dialog/_usage/index.jsx rename to packages/components/dialog/_usage/index.jsx diff --git a/src/dialog/_usage/props.json b/packages/components/dialog/_usage/props.json similarity index 100% rename from src/dialog/_usage/props.json rename to packages/components/dialog/_usage/props.json diff --git a/src/dialog/defaultProps.ts b/packages/components/dialog/defaultProps.ts similarity index 100% rename from src/dialog/defaultProps.ts rename to packages/components/dialog/defaultProps.ts diff --git a/src/dialog/dialog.en-US.md b/packages/components/dialog/dialog.en-US.md similarity index 83% rename from src/dialog/dialog.en-US.md rename to packages/components/dialog/dialog.en-US.md index 965a062cfa..362b739ce9 100644 --- a/src/dialog/dialog.en-US.md +++ b/packages/components/dialog/dialog.en-US.md @@ -7,7 +7,7 @@ name | type | default | description | required -- | -- | -- | -- | -- className | String | - | className of component | N style | Object | - | CSS(Cascading Style Sheets),Typescript:`React.CSSProperties` | N -`Pick` | TNode | - | extends `Pick