├── .editorconfig ├── .eslintignore ├── .eslintrc.js ├── .github ├── CODEOWNERS ├── ISSUE_TEMPLATE │ ├── bug-report.zh-CN.yml │ ├── config.yml │ └── feature-report.zh-CN.yml ├── PULL_REQUEST_TEMPLATE.md ├── dependabot.yml ├── issue-shoot.md └── workflows │ ├── auto-release.yml │ ├── issue-assignees.temp.yml │ ├── issue-help-wanted.temp.yml │ ├── issue-label.yml │ ├── issue-mark-duplicate.temp.yml │ ├── issue-reply.temp.yml │ ├── issue-synchronize.temp.yml │ ├── pkg-pr-new.yml │ ├── pr-comment-ci.yml │ ├── pr-compressed-size.yml │ ├── pr-spelling.template.yml │ ├── preview-publish.yml │ ├── pull-request.yml │ ├── tag-push.yml │ └── typos-config.toml ├── .gitignore ├── .gitmodules ├── .husky ├── commit-msg ├── pre-commit └── prepare-commit-msg ├── .node-version ├── .npmrc ├── .nvmrc ├── .prettierignore ├── .prettierrc.js ├── .vscode ├── extensions.json └── settings.json ├── CONTRIBUTING.md ├── DEVELOP_GUIDE.md ├── LICENSE ├── PUBLISH.md ├── README-zh_CN.md ├── README.md ├── babel.config.demo.js ├── babel.config.js ├── commitlint.config.js ├── package.json ├── packages ├── components │ ├── _util │ │ ├── composeRefs.ts │ │ ├── copyText.ts │ │ ├── createHookContext.tsx │ │ ├── dom.ts │ │ ├── easing.ts │ │ ├── forwardRefWithStatics.ts │ │ ├── helper.ts │ │ ├── insertCSS.ts │ │ ├── isFragment.ts │ │ ├── linearGradient.ts │ │ ├── listener.ts │ │ ├── noop.ts │ │ ├── number.ts │ │ ├── parseTNode.ts │ │ ├── react-render.ts │ │ ├── ref.ts │ │ ├── scroll.ts │ │ └── style.ts │ ├── affix │ │ ├── Affix.tsx │ │ ├── __tests__ │ │ │ └── affix.test.tsx │ │ ├── _example │ │ │ ├── base.tsx │ │ │ └── container.tsx │ │ ├── _usage │ │ │ └── props.json │ │ ├── affix.en-US.md │ │ ├── affix.md │ │ ├── defaultProps.ts │ │ ├── index.ts │ │ ├── style │ │ │ ├── css.js │ │ │ └── index.js │ │ └── type.ts │ ├── alert │ │ ├── Alert.tsx │ │ ├── __tests__ │ │ │ └── alert.test.tsx │ │ ├── _example │ │ │ ├── base.tsx │ │ │ ├── close.tsx │ │ │ ├── collapse.tsx │ │ │ ├── icon.tsx │ │ │ ├── operation.tsx │ │ │ ├── swiper.tsx │ │ │ └── title.tsx │ │ ├── _usage │ │ │ ├── index.jsx │ │ │ └── props.json │ │ ├── alert.en-US.md │ │ ├── alert.md │ │ ├── defaultProps.ts │ │ ├── index.ts │ │ ├── style │ │ │ ├── css.js │ │ │ └── index.js │ │ └── type.ts │ ├── anchor │ │ ├── Anchor.tsx │ │ ├── AnchorContext.tsx │ │ ├── AnchorItem.tsx │ │ ├── AnchorTarget.tsx │ │ ├── __tests__ │ │ │ └── anchor.test.tsx │ │ ├── _example │ │ │ ├── base.tsx │ │ │ ├── container.tsx │ │ │ ├── cursor.tsx │ │ │ ├── customize-highlight.tsx │ │ │ ├── large.tsx │ │ │ ├── multiple.tsx │ │ │ ├── small.tsx │ │ │ └── target.tsx │ │ ├── _usage │ │ │ ├── index.jsx │ │ │ └── props.json │ │ ├── anchor.en-US.md │ │ ├── anchor.md │ │ ├── defaultProps.ts │ │ ├── index.ts │ │ ├── style │ │ │ ├── css.js │ │ │ └── index.js │ │ └── type.ts │ ├── auto-complete │ │ ├── AutoComplete.tsx │ │ ├── HighlightOption.tsx │ │ ├── OptionList.tsx │ │ ├── __tests__ │ │ │ ├── mount.jsx │ │ │ └── vitest-auto-complete.test.jsx │ │ ├── _example │ │ │ ├── base.tsx │ │ │ ├── filter.tsx │ │ │ ├── option.tsx │ │ │ ├── size.tsx │ │ │ ├── status.tsx │ │ │ └── trigger-element.tsx │ │ ├── auto-complete.en-US.md │ │ ├── auto-complete.md │ │ ├── defaultProps.ts │ │ ├── index.ts │ │ ├── style │ │ │ ├── css.js │ │ │ └── index.js │ │ └── type.ts │ ├── avatar │ │ ├── Avatar.tsx │ │ ├── AvatarContext.tsx │ │ ├── AvatarGroup.tsx │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── vitest-avatar.test.jsx.snap │ │ │ ├── avatar.test.tsx │ │ │ ├── mount.jsx │ │ │ └── vitest-avatar.test.jsx │ │ ├── _example │ │ │ ├── adjust.tsx │ │ │ ├── base.tsx │ │ │ ├── group-cascading.tsx │ │ │ ├── group-max.tsx │ │ │ ├── group.tsx │ │ │ ├── shape.tsx │ │ │ └── size.tsx │ │ ├── _usage │ │ │ ├── index.jsx │ │ │ └── props.json │ │ ├── avatar.en-US.md │ │ ├── avatar.md │ │ ├── defaultProps.ts │ │ ├── index.ts │ │ ├── style │ │ │ ├── css.js │ │ │ └── index.js │ │ └── type.ts │ ├── back-top │ │ ├── BackTop.tsx │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── vitest-back-top.test.jsx.snap │ │ │ └── vitest-back-top.test.jsx │ │ ├── _example │ │ │ ├── baseList.tsx │ │ │ ├── baseListSmall.tsx │ │ │ ├── custom.tsx │ │ │ ├── shape.tsx │ │ │ ├── size.tsx │ │ │ └── theme.tsx │ │ ├── back-top.en-US.md │ │ ├── back-top.md │ │ ├── defaultProps.ts │ │ ├── index.ts │ │ ├── style │ │ │ ├── css.js │ │ │ └── index.js │ │ ├── type.ts │ │ └── useScroll.ts │ ├── badge │ │ ├── Badge.tsx │ │ ├── __tests__ │ │ │ └── badge.test.tsx │ │ ├── _example │ │ │ ├── base.tsx │ │ │ ├── color.tsx │ │ │ ├── custom.tsx │ │ │ ├── number.tsx │ │ │ ├── offset.tsx │ │ │ ├── shape.tsx │ │ │ └── size.tsx │ │ ├── _usage │ │ │ ├── index.jsx │ │ │ └── props.json │ │ ├── badge.en-US.md │ │ ├── badge.md │ │ ├── defaultProps.ts │ │ ├── index.ts │ │ ├── style │ │ │ ├── css.js │ │ │ └── index.js │ │ └── type.ts │ ├── breadcrumb │ │ ├── Breadcrumb.tsx │ │ ├── BreadcrumbContext.tsx │ │ ├── BreadcrumbItem.tsx │ │ ├── BreadcrumbProps.ts │ │ ├── __tests__ │ │ │ └── breadcrumb.test.tsx │ │ ├── _example │ │ │ ├── base.tsx │ │ │ ├── custom-ellipsis.tsx │ │ │ ├── custom.tsx │ │ │ ├── ellipsis.tsx │ │ │ ├── href.tsx │ │ │ ├── icon.tsx │ │ │ ├── options.tsx │ │ │ ├── to.tsx │ │ │ └── width.tsx │ │ ├── _usage │ │ │ └── props.json │ │ ├── breadcrumb.en-US.md │ │ ├── breadcrumb.md │ │ ├── defaultProps.ts │ │ ├── index.ts │ │ ├── style │ │ │ ├── css.js │ │ │ └── index.js │ │ └── type.ts │ ├── button │ │ ├── Button.tsx │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── vitest-button.test.jsx.snap │ │ │ └── vitest-button.test.jsx │ │ ├── _example │ │ │ ├── base.tsx │ │ │ ├── block.tsx │ │ │ ├── custom-element.tsx │ │ │ ├── ghost.tsx │ │ │ ├── icon.tsx │ │ │ ├── shape.tsx │ │ │ ├── size.tsx │ │ │ ├── status.tsx │ │ │ └── theme.tsx │ │ ├── _usage │ │ │ ├── index.jsx │ │ │ └── props.json │ │ ├── button.en-US.md │ │ ├── button.md │ │ ├── defaultProps.ts │ │ ├── index.ts │ │ ├── style │ │ │ ├── css.js │ │ │ └── index.js │ │ └── type.ts │ ├── calendar │ │ ├── Calendar.tsx │ │ ├── CalendarCellComp.tsx │ │ ├── __tests__ │ │ │ └── calendar.test.tsx │ │ ├── _example │ │ │ ├── base.tsx │ │ │ ├── card.tsx │ │ │ ├── cell-append.tsx │ │ │ ├── cell.tsx │ │ │ ├── controller-config.tsx │ │ │ ├── events.tsx │ │ │ ├── filter.tsx │ │ │ ├── first-day-of-week.tsx │ │ │ ├── head.tsx │ │ │ ├── mode.tsx │ │ │ ├── range.tsx │ │ │ ├── slot-props-api.tsx │ │ │ ├── value.tsx │ │ │ └── week.tsx │ │ ├── _usage │ │ │ ├── index.jsx │ │ │ └── props.json │ │ ├── _util.ts │ │ ├── calendar.en-US.md │ │ ├── calendar.md │ │ ├── defaultProps.ts │ │ ├── hooks │ │ │ └── usePrefixClass.ts │ │ ├── index.ts │ │ ├── style │ │ │ ├── css.js │ │ │ └── index.js │ │ └── type.ts │ ├── card │ │ ├── Card.tsx │ │ ├── __tests__ │ │ │ └── card.test.tsx │ │ ├── _example │ │ │ ├── base.tsx │ │ │ ├── bordered-none.tsx │ │ │ ├── bordered.tsx │ │ │ ├── custom-loading-props.tsx │ │ │ ├── footer-actions.tsx │ │ │ ├── footer-content-actions.tsx │ │ │ ├── footer-content.tsx │ │ │ ├── footer.tsx │ │ │ ├── header-all-props.tsx │ │ │ ├── header-bordered.tsx │ │ │ ├── header-description.tsx │ │ │ ├── header-footer-actions.tsx │ │ │ ├── header-subtitle-footer-actions.tsx │ │ │ ├── header-subtitle.tsx │ │ │ └── header.tsx │ │ ├── _usage │ │ │ ├── index.jsx │ │ │ └── props.json │ │ ├── card.en-US.md │ │ ├── card.md │ │ ├── defaultProps.ts │ │ ├── index.ts │ │ ├── style │ │ │ ├── css.js │ │ │ └── index.js │ │ └── type.ts │ ├── cascader │ │ ├── Cascader.tsx │ │ ├── CascaderPanel.tsx │ │ ├── __tests__ │ │ │ └── cascader.test.tsx │ │ ├── _example │ │ │ ├── base.tsx │ │ │ ├── check-strictly.tsx │ │ │ ├── collapsed.tsx │ │ │ ├── custom-options.tsx │ │ │ ├── disabled.tsx │ │ │ ├── ellipsis.tsx │ │ │ ├── filterable.tsx │ │ │ ├── keys.tsx │ │ │ ├── load.tsx │ │ │ ├── max.tsx │ │ │ ├── multiple.tsx │ │ │ ├── panel.tsx │ │ │ ├── show-all-levels.tsx │ │ │ ├── size.tsx │ │ │ ├── trigger.tsx │ │ │ ├── value-display.tsx │ │ │ ├── value-mode.tsx │ │ │ └── value-type.tsx │ │ ├── _usage │ │ │ ├── index.jsx │ │ │ └── props.json │ │ ├── cascader.en-US.md │ │ ├── cascader.md │ │ ├── components │ │ │ ├── Item.tsx │ │ │ ├── Panel.tsx │ │ │ └── style │ │ │ │ ├── css.js │ │ │ │ └── index.js │ │ ├── core │ │ │ ├── className.ts │ │ │ ├── effect.ts │ │ │ └── helper.ts │ │ ├── defaultProps.ts │ │ ├── hooks.tsx │ │ ├── index.ts │ │ ├── interface.ts │ │ ├── style │ │ │ ├── css.js │ │ │ └── index.js │ │ └── type.ts │ ├── checkbox │ │ ├── Checkbox.tsx │ │ ├── CheckboxGroup.tsx │ │ ├── __tests__ │ │ │ └── checkbox.test.tsx │ │ ├── _example │ │ │ ├── base.tsx │ │ │ ├── controlled.tsx │ │ │ ├── group.tsx │ │ │ ├── link.tsx │ │ │ └── max.tsx │ │ ├── _usage │ │ │ ├── index.jsx │ │ │ └── props.json │ │ ├── checkbox.en-US.md │ │ ├── checkbox.md │ │ ├── defaultProps.ts │ │ ├── index.ts │ │ ├── style │ │ │ ├── css.js │ │ │ └── index.js │ │ └── type.ts │ ├── collapse │ │ ├── Collapse.tsx │ │ ├── CollapseContext.ts │ │ ├── CollapsePanel.tsx │ │ ├── __tests__ │ │ │ └── collapse.test.tsx │ │ ├── _example │ │ │ ├── base.tsx │ │ │ ├── icon.tsx │ │ │ ├── mutex.tsx │ │ │ ├── other.tsx │ │ │ └── rightSlot.tsx │ │ ├── _usage │ │ │ ├── index.jsx │ │ │ └── props.json │ │ ├── collapse.en-US.md │ │ ├── collapse.md │ │ ├── defaultProps.ts │ │ ├── index.ts │ │ ├── style │ │ │ ├── css.js │ │ │ └── index.js │ │ └── type.ts │ ├── color-picker │ │ ├── ColorPicker.tsx │ │ ├── ColorPickerPanel.tsx │ │ ├── __tests__ │ │ │ └── color-picker.test.tsx │ │ ├── _example │ │ │ ├── color-mode.tsx │ │ │ ├── enable-alpha.tsx │ │ │ ├── panel.tsx │ │ │ ├── recent-color.tsx │ │ │ ├── status-disabled.tsx │ │ │ ├── status-readonly.tsx │ │ │ ├── swatch-color.tsx │ │ │ └── trigger.tsx │ │ ├── _usage │ │ │ └── props.json │ │ ├── color-picker.en-US.md │ │ ├── color-picker.md │ │ ├── components │ │ │ ├── panel │ │ │ │ ├── alpha.tsx │ │ │ │ ├── format │ │ │ │ │ ├── index.tsx │ │ │ │ │ ├── inputs.tsx │ │ │ │ │ └── style │ │ │ │ │ │ ├── css.js │ │ │ │ │ │ └── index.js │ │ │ │ ├── header.tsx │ │ │ │ ├── hue.tsx │ │ │ │ ├── index.tsx │ │ │ │ ├── linear-gradient.tsx │ │ │ │ ├── saturation.tsx │ │ │ │ ├── slider.tsx │ │ │ │ ├── style │ │ │ │ │ ├── css.js │ │ │ │ │ └── index.js │ │ │ │ └── swatches.tsx │ │ │ ├── style │ │ │ │ ├── css.js │ │ │ │ └── index.js │ │ │ └── trigger.tsx │ │ ├── defaultProps.ts │ │ ├── hooks │ │ │ ├── useClassNames.ts │ │ │ └── useStyles.ts │ │ ├── index.ts │ │ ├── interface.ts │ │ ├── style │ │ │ ├── css.js │ │ │ └── index.js │ │ └── type.ts │ ├── comment │ │ ├── Comment.tsx │ │ ├── __tests__ │ │ │ └── comment.test.tsx │ │ ├── _example │ │ │ ├── base.tsx │ │ │ ├── list.tsx │ │ │ ├── operation.tsx │ │ │ ├── quote.tsx │ │ │ ├── reply-form.tsx │ │ │ └── reply.tsx │ │ ├── _usage │ │ │ └── props.json │ │ ├── comment.en-US.md │ │ ├── comment.md │ │ ├── defaultProps.ts │ │ ├── index.ts │ │ ├── style │ │ │ ├── css.js │ │ │ └── index.js │ │ └── type.ts │ ├── common.ts │ ├── common │ │ ├── Check.tsx │ │ ├── FakeArrow.tsx │ │ ├── PluginContainer.tsx │ │ ├── Portal.tsx │ │ ├── README.md │ │ └── __tests__ │ │ │ └── portal.test.tsx │ ├── config-provider │ │ ├── ConfigContext.tsx │ │ ├── ConfigProvider.tsx │ │ ├── _example │ │ │ ├── calendar.tsx │ │ │ ├── date-picker.tsx │ │ │ ├── dialog.tsx │ │ │ ├── global.tsx │ │ │ ├── input.tsx │ │ │ ├── others.tsx │ │ │ ├── pagination.tsx │ │ │ ├── popconfirm.tsx │ │ │ └── table.tsx │ │ ├── config-provider.en-US.md │ │ ├── config-provider.md │ │ ├── index.ts │ │ └── type.ts │ ├── date-picker │ │ ├── DatePicker.tsx │ │ ├── DatePickerPanel.tsx │ │ ├── DateRangePicker.tsx │ │ ├── DateRangePickerPanel.tsx │ │ ├── __tests__ │ │ │ ├── date-picker-panel.test.tsx │ │ │ ├── date-picker.test.tsx │ │ │ ├── date-range-picker-panel.test.tsx │ │ │ └── date-range-picker.test.tsx │ │ ├── _example │ │ │ ├── base.tsx │ │ │ ├── cancel-range-limit.tsx │ │ │ ├── custom-icon.tsx │ │ │ ├── date-presets-alt.tsx │ │ │ ├── date-range.tsx │ │ │ ├── date-time.tsx │ │ │ ├── disable-date.tsx │ │ │ ├── first-day-of-week.tsx │ │ │ ├── month.tsx │ │ │ ├── multiple.tsx │ │ │ ├── panel.tsx │ │ │ ├── quarter.tsx │ │ │ ├── week.tsx │ │ │ └── year.tsx │ │ ├── _usage │ │ │ ├── date-picker-props.json │ │ │ ├── date-range-picker-props.json │ │ │ └── index.jsx │ │ ├── base │ │ │ ├── Cell.tsx │ │ │ ├── Footer.tsx │ │ │ ├── Header.tsx │ │ │ ├── Table.tsx │ │ │ └── style │ │ │ │ ├── css.js │ │ │ │ └── index.js │ │ ├── date-picker.en-US.md │ │ ├── date-picker.md │ │ ├── defaultProps.ts │ │ ├── hooks │ │ │ ├── useDisableDate.ts │ │ │ ├── useRange.tsx │ │ │ ├── useRangeValue.ts │ │ │ ├── useSingle.tsx │ │ │ ├── useSingleValue.tsx │ │ │ └── useTableData.tsx │ │ ├── index.ts │ │ ├── panel │ │ │ ├── ExtraContent.tsx │ │ │ ├── PanelContent.tsx │ │ │ ├── RangePanel.tsx │ │ │ ├── SinglePanel.tsx │ │ │ └── style │ │ │ │ ├── css.js │ │ │ │ └── index.js │ │ ├── style │ │ │ ├── css.js │ │ │ └── index.js │ │ ├── type.ts │ │ └── utils.ts │ ├── descriptions │ │ ├── Descriptions.tsx │ │ ├── DescriptionsContext.tsx │ │ ├── DescriptionsItem.tsx │ │ ├── Row.tsx │ │ ├── __tests__ │ │ │ └── descriptions.test.tsx │ │ ├── _example │ │ │ ├── base.tsx │ │ │ ├── bordered.tsx │ │ │ ├── colon.tsx │ │ │ ├── column.tsx │ │ │ ├── custom-style.tsx │ │ │ ├── items.tsx │ │ │ ├── layout.tsx │ │ │ ├── nest.tsx │ │ │ ├── size.tsx │ │ │ └── table-layout.tsx │ │ ├── _usage │ │ │ ├── index.jsx │ │ │ └── props.json │ │ ├── defaultProps.ts │ │ ├── descriptions.en-US.md │ │ ├── descriptions.md │ │ ├── index.ts │ │ ├── style │ │ │ ├── css.js │ │ │ └── index.js │ │ └── type.ts │ ├── dialog │ │ ├── Dialog.tsx │ │ ├── DialogCard.tsx │ │ ├── __tests__ │ │ │ └── dialog.test.tsx │ │ ├── _example │ │ │ ├── async.tsx │ │ │ ├── attach.tsx │ │ │ ├── base.tsx │ │ │ ├── custom.tsx │ │ │ ├── icon.tsx │ │ │ ├── modal.tsx │ │ │ ├── plugin.tsx │ │ │ ├── position.tsx │ │ │ └── warning.tsx │ │ ├── _usage │ │ │ ├── index.jsx │ │ │ └── props.json │ │ ├── defaultProps.ts │ │ ├── dialog.en-US.md │ │ ├── dialog.md │ │ ├── hooks │ │ │ ├── useDialogDrag.ts │ │ │ ├── useDialogEsc.ts │ │ │ ├── useDialogPosition.ts │ │ │ └── useLockStyle.ts │ │ ├── index.tsx │ │ ├── plugin.tsx │ │ ├── style │ │ │ ├── css.js │ │ │ └── index.js │ │ ├── type.ts │ │ └── utils.ts │ ├── divider │ │ ├── Divider.tsx │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── vitest-divider.test.jsx.snap │ │ │ ├── divider.test.tsx │ │ │ └── vitest-divider.test.jsx │ │ ├── _example │ │ │ ├── base.tsx │ │ │ ├── text.tsx │ │ │ └── vertical.tsx │ │ ├── _usage │ │ │ ├── index.jsx │ │ │ └── props.json │ │ ├── defaultProps.ts │ │ ├── divider.en-US.md │ │ ├── divider.md │ │ ├── index.ts │ │ ├── style │ │ │ ├── css.js │ │ │ └── index.js │ │ └── type.ts │ ├── drawer │ │ ├── Drawer.tsx │ │ ├── __tests__ │ │ │ └── drawer.test.tsx │ │ ├── _example │ │ │ ├── attach-parent.tsx │ │ │ ├── base.tsx │ │ │ ├── custom.tsx │ │ │ ├── destroy.tsx │ │ │ ├── no-mask.tsx │ │ │ ├── operation.tsx │ │ │ ├── placement.tsx │ │ │ ├── plugin.tsx │ │ │ ├── popup.tsx │ │ │ ├── size-draggable.tsx │ │ │ └── size.tsx │ │ ├── _usage │ │ │ ├── index.jsx │ │ │ └── props.json │ │ ├── defaultProps.ts │ │ ├── drawer.en-US.md │ │ ├── drawer.md │ │ ├── hooks │ │ │ ├── useDrag.ts │ │ │ └── useLockStyle.ts │ │ ├── index.tsx │ │ ├── plugin.tsx │ │ ├── style │ │ │ ├── css.js │ │ │ └── index.js │ │ └── type.ts │ ├── dropdown │ │ ├── Dropdown.tsx │ │ ├── DropdownItem.tsx │ │ ├── DropdownMenu.tsx │ │ ├── __tests__ │ │ │ └── dropdown.test.tsx │ │ ├── _example │ │ │ ├── base.tsx │ │ │ ├── button.tsx │ │ │ ├── child.tsx │ │ │ ├── click.tsx │ │ │ ├── custom.tsx │ │ │ ├── disabled.tsx │ │ │ ├── icon.tsx │ │ │ ├── left.tsx │ │ │ ├── long.tsx │ │ │ ├── multiple.tsx │ │ │ ├── split.tsx │ │ │ └── theme.tsx │ │ ├── _usage │ │ │ ├── index.jsx │ │ │ └── props.json │ │ ├── defaultProps.ts │ │ ├── dropdown.en-US.md │ │ ├── dropdown.md │ │ ├── hooks │ │ │ └── useDropdownOptions.ts │ │ ├── index.ts │ │ ├── style │ │ │ ├── css.js │ │ │ └── index.js │ │ └── type.ts │ ├── empty │ │ ├── Empty.tsx │ │ ├── __tests__ │ │ │ └── empty.test.tsx │ │ ├── _example │ │ │ ├── base.tsx │ │ │ ├── descriptions.tsx │ │ │ ├── operation.tsx │ │ │ ├── self-defined.tsx │ │ │ ├── size.tsx │ │ │ └── status.tsx │ │ ├── assets │ │ │ ├── EmptySvg.tsx │ │ │ ├── FailSvg.tsx │ │ │ ├── MaintenanceSvg.tsx │ │ │ ├── NetworkErrorSvg.tsx │ │ │ └── SuccessSvg.tsx │ │ ├── defaultProps.ts │ │ ├── empty.en-US.md │ │ ├── empty.md │ │ ├── index.ts │ │ ├── style │ │ │ ├── css.js │ │ │ └── index.js │ │ └── type.ts │ ├── form │ │ ├── Form.tsx │ │ ├── FormContext.tsx │ │ ├── FormItem.tsx │ │ ├── FormList.tsx │ │ ├── __tests__ │ │ │ ├── form-list.test.tsx │ │ │ └── form.test.tsx │ │ ├── _example │ │ │ ├── align.tsx │ │ │ ├── base.tsx │ │ │ ├── clear-validate.tsx │ │ │ ├── custom-validator.tsx │ │ │ ├── customized-form-controls.tsx │ │ │ ├── disabled.tsx │ │ │ ├── error-message.tsx │ │ │ ├── form-field-linkage.tsx │ │ │ ├── form-list.tsx │ │ │ ├── layout.tsx │ │ │ ├── login.tsx │ │ │ ├── nested-data.tsx │ │ │ ├── reset.tsx │ │ │ ├── validate-complicated-data.tsx │ │ │ ├── validate-message.tsx │ │ │ ├── validator-status.tsx │ │ │ └── validator.tsx │ │ ├── _usage │ │ │ ├── index.jsx │ │ │ └── props.json │ │ ├── const.ts │ │ ├── defaultProps.ts │ │ ├── form.en-US.md │ │ ├── form.md │ │ ├── formModel.ts │ │ ├── hooks │ │ │ ├── interface.ts │ │ │ ├── useForm.ts │ │ │ ├── useFormItemInitialData.ts │ │ │ ├── useFormItemStyle.tsx │ │ │ ├── useInstance.tsx │ │ │ └── useWatch.ts │ │ ├── index.ts │ │ ├── style │ │ │ ├── css.js │ │ │ └── index.js │ │ ├── type.ts │ │ └── utils │ │ │ └── index.ts │ ├── grid │ │ ├── Col.tsx │ │ ├── Row.tsx │ │ ├── __tests__ │ │ │ └── grid.test.tsx │ │ ├── _example │ │ │ ├── base.tsx │ │ │ ├── flex.tsx │ │ │ ├── gutter.tsx │ │ │ ├── halign.tsx │ │ │ ├── offset.tsx │ │ │ ├── order.tsx │ │ │ ├── responsive.tsx │ │ │ ├── sort.tsx │ │ │ └── valign.tsx │ │ ├── defaultProps.ts │ │ ├── grid.en-US.md │ │ ├── grid.md │ │ ├── index.ts │ │ ├── style │ │ │ ├── css.js │ │ │ └── index.js │ │ └── type.ts │ ├── guide │ │ ├── Guide.tsx │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── vitest-guide.test.jsx.snap │ │ │ ├── mount.jsx │ │ │ └── vitest-guide.test.jsx │ │ ├── _example │ │ │ ├── base.tsx │ │ │ ├── custom-popup.tsx │ │ │ ├── dialog.tsx │ │ │ ├── no-mask.tsx │ │ │ └── popup-dialog.tsx │ │ ├── defaultProps.ts │ │ ├── guide.en-US.md │ │ ├── guide.md │ │ ├── index.ts │ │ ├── style │ │ │ ├── css.js │ │ │ └── index.js │ │ ├── type.ts │ │ └── utils │ │ │ ├── getRelativePosition.ts │ │ │ ├── getScrollParent.ts │ │ │ ├── getTargetElm.ts │ │ │ ├── index.ts │ │ │ └── scrollToElm.ts │ ├── hooks │ │ ├── useAnimation.ts │ │ ├── useAttach.ts │ │ ├── useClickOutside.ts │ │ ├── useCommonClassName.ts │ │ ├── useConfig.ts │ │ ├── useControlled.ts │ │ ├── useDebounce.ts │ │ ├── useDefaultProps.ts │ │ ├── useDialogEsc.ts │ │ ├── useDomRefCallback.ts │ │ ├── useDrag.ts │ │ ├── useDragSorter.tsx │ │ ├── useElementLazyRender.ts │ │ ├── useEventCallback.ts │ │ ├── useGlobalIcon.ts │ │ ├── useImagePreviewUrl.ts │ │ ├── useIsFirstRender.ts │ │ ├── useLatest.ts │ │ ├── useLayoutEffect.ts │ │ ├── useMutationObserver.ts │ │ ├── usePersistFn.ts │ │ ├── usePluginConfig.ts │ │ ├── usePopper.ts │ │ ├── usePrevious.ts │ │ ├── usePropsRef.ts │ │ ├── useResizeObserver.ts │ │ ├── useRipple.ts │ │ ├── useSetState.ts │ │ ├── useSwitch.ts │ │ ├── useUpdateEffect.ts │ │ ├── useUpdateLayoutEffect.ts │ │ ├── useVirtualScroll.ts │ │ └── useWindowSize.ts │ ├── icon │ │ ├── _example │ │ │ ├── Enhanced.tsx │ │ │ ├── IconExample.tsx │ │ │ ├── IconFontEnhanced.tsx │ │ │ ├── IconFontExample.tsx │ │ │ ├── IconSelect.tsx │ │ │ └── SvgSpriteExample.tsx │ │ ├── icon.en-US.md │ │ └── icon.md │ ├── image-viewer │ │ ├── ImageViewer.tsx │ │ ├── ImageViewerMini.tsx │ │ ├── ImageViewerModal.tsx │ │ ├── __tests__ │ │ │ └── image-viewer.test.tsx │ │ ├── _example │ │ │ ├── album.tsx │ │ │ ├── albumIcons.tsx │ │ │ ├── base.tsx │ │ │ ├── block.tsx │ │ │ ├── button.tsx │ │ │ ├── error.tsx │ │ │ ├── modeless.tsx │ │ │ ├── multiple.tsx │ │ │ └── svg.tsx │ │ ├── defaultProps.ts │ │ ├── hooks │ │ │ ├── useIconMap.ts │ │ │ ├── useImageScale.ts │ │ │ ├── useIndex.ts │ │ │ ├── useList.ts │ │ │ ├── useMirror.ts │ │ │ ├── usePosition.ts │ │ │ ├── useRotate.ts │ │ │ ├── useScale.ts │ │ │ └── useViewerScale.ts │ │ ├── image-viewer.en-US.md │ │ ├── image-viewer.md │ │ ├── index.ts │ │ ├── style │ │ │ ├── css.js │ │ │ └── index.js │ │ ├── type.ts │ │ └── utils.ts │ ├── image │ │ ├── Image.tsx │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── vitest-image.test.jsx.snap │ │ │ ├── lazy.test.jsx │ │ │ ├── mount.jsx │ │ │ └── vitest-image.test.jsx │ │ ├── _example │ │ │ ├── avif.tsx │ │ │ ├── extra-always.tsx │ │ │ ├── extra-hover.tsx │ │ │ ├── fill-mode.tsx │ │ │ ├── fill-position.tsx │ │ │ ├── gallery-cover.tsx │ │ │ ├── lazy-list.tsx │ │ │ ├── lazy-single.tsx │ │ │ ├── placeholder.tsx │ │ │ └── shape.tsx │ │ ├── defaultProps.ts │ │ ├── image.en-US.md │ │ ├── image.md │ │ ├── index.ts │ │ ├── style │ │ │ ├── css.js │ │ │ └── index.js │ │ └── type.ts │ ├── index-lib.ts │ ├── index.ts │ ├── input-adornment │ │ ├── InputAdornment.tsx │ │ ├── __tests__ │ │ │ └── input-adornment.test.tsx │ │ ├── _example │ │ │ ├── select.tsx │ │ │ └── text.tsx │ │ ├── index.ts │ │ ├── input-adornment.en-US.md │ │ ├── input-adornment.md │ │ ├── style │ │ │ ├── css.js │ │ │ └── index.js │ │ └── type.ts │ ├── input-number │ │ ├── InputNumber.tsx │ │ ├── __tests__ │ │ │ └── input-number.test.tsx │ │ ├── _example │ │ │ ├── align.tsx │ │ │ ├── auto-width.tsx │ │ │ ├── center.tsx │ │ │ ├── default.tsx │ │ │ ├── format.tsx │ │ │ ├── large-number.tsx │ │ │ ├── left.tsx │ │ │ ├── normal.tsx │ │ │ ├── size.tsx │ │ │ ├── status.tsx │ │ │ └── step.tsx │ │ ├── _usage │ │ │ ├── index.jsx │ │ │ └── props.json │ │ ├── defaultProps.ts │ │ ├── index.ts │ │ ├── input-number.en-US.md │ │ ├── input-number.md │ │ ├── style │ │ │ ├── css.js │ │ │ └── index.js │ │ ├── type.ts │ │ └── useInputNumber.tsx │ ├── input │ │ ├── Input.tsx │ │ ├── InputGroup.tsx │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── vitest-input.test.jsx.snap │ │ │ ├── input.test.tsx │ │ │ ├── mount.jsx │ │ │ └── vitest-input.test.jsx │ │ ├── _example │ │ │ ├── addon.tsx │ │ │ ├── align.tsx │ │ │ ├── auto-width.tsx │ │ │ ├── base.tsx │ │ │ ├── borderless.tsx │ │ │ ├── clearable.tsx │ │ │ ├── disabled.tsx │ │ │ ├── format.tsx │ │ │ ├── group.tsx │ │ │ ├── max-length-count.tsx │ │ │ ├── password.tsx │ │ │ ├── size.tsx │ │ │ ├── status.tsx │ │ │ └── textarea.tsx │ │ ├── _usage │ │ │ ├── index.jsx │ │ │ └── props.json │ │ ├── defaultProps.ts │ │ ├── index.ts │ │ ├── input.en-US.md │ │ ├── input.md │ │ ├── style │ │ │ ├── css.js │ │ │ └── index.js │ │ ├── type.ts │ │ └── useLengthLimit.ts │ ├── layout │ │ ├── Aside.tsx │ │ ├── Layout.tsx │ │ ├── __tests__ │ │ │ └── layout.test.tsx │ │ ├── _example │ │ │ ├── aside.tsx │ │ │ ├── base.tsx │ │ │ ├── combine.tsx │ │ │ └── top.tsx │ │ ├── _usage │ │ │ └── props.json │ │ ├── defaultProps.ts │ │ ├── index.ts │ │ ├── layout.en-US.md │ │ ├── layout.md │ │ ├── style │ │ │ ├── css.js │ │ │ └── index.js │ │ └── type.ts │ ├── link │ │ ├── Link.tsx │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── vitest-link.test.jsx.snap │ │ │ ├── link.test.tsx │ │ │ └── vitest-link.test.jsx │ │ ├── _example │ │ │ ├── base.tsx │ │ │ ├── disabled.tsx │ │ │ ├── hover.tsx │ │ │ ├── icon.tsx │ │ │ ├── size.tsx │ │ │ ├── theme.tsx │ │ │ └── underline.tsx │ │ ├── defaultProps.ts │ │ ├── index.ts │ │ ├── link.en-US.md │ │ ├── link.md │ │ ├── style │ │ │ ├── css.js │ │ │ └── index.js │ │ └── type.ts │ ├── list │ │ ├── List.tsx │ │ ├── ListItem.tsx │ │ ├── ListItemMeta.tsx │ │ ├── __tests__ │ │ │ └── list.test.tsx │ │ ├── _example │ │ │ ├── asyncLoading.tsx │ │ │ ├── base.tsx │ │ │ ├── header-footer.tsx │ │ │ ├── image-text.tsx │ │ │ ├── multiline.tsx │ │ │ ├── operation.tsx │ │ │ ├── scroll.tsx │ │ │ ├── size.tsx │ │ │ ├── stripe.tsx │ │ │ └── virtual-scroll.tsx │ │ ├── _usage │ │ │ ├── index.jsx │ │ │ └── props.json │ │ ├── defaultProps.ts │ │ ├── hooks │ │ │ └── useListVirtualScroll.ts │ │ ├── index.ts │ │ ├── list.en-US.md │ │ ├── list.md │ │ ├── style │ │ │ ├── css.js │ │ │ └── index.js │ │ └── type.ts │ ├── loading │ │ ├── Loading.tsx │ │ ├── __tests__ │ │ │ └── loading.test.tsx │ │ ├── _example │ │ │ ├── base.tsx │ │ │ ├── delay.tsx │ │ │ ├── fullscreen.tsx │ │ │ ├── icon-text.tsx │ │ │ ├── service.tsx │ │ │ ├── size.tsx │ │ │ ├── text.tsx │ │ │ └── wrap.tsx │ │ ├── _usage │ │ │ ├── index.jsx │ │ │ └── props.json │ │ ├── defaultProps.ts │ │ ├── gradient.tsx │ │ ├── index.ts │ │ ├── loading.en-US.md │ │ ├── loading.md │ │ ├── plugin.tsx │ │ ├── style │ │ │ ├── css.js │ │ │ └── index.js │ │ └── type.ts │ ├── locale │ │ ├── LocalReceiver.ts │ │ ├── ar_KW.ts │ │ ├── en_US.ts │ │ ├── it_IT.ts │ │ ├── ja_JP.ts │ │ ├── ko_KR.ts │ │ ├── ru_RU.ts │ │ ├── zh_CN.ts │ │ └── zh_TW.ts │ ├── menu │ │ ├── HeadMenu.tsx │ │ ├── Menu.tsx │ │ ├── MenuContext.ts │ │ ├── MenuGroup.tsx │ │ ├── MenuItem.tsx │ │ ├── SubMenu.tsx │ │ ├── __tests__ │ │ │ └── menu.test.tsx │ │ ├── _example │ │ │ ├── closable-side.tsx │ │ │ ├── custom-header.tsx │ │ │ ├── custom-side.tsx │ │ │ ├── double.tsx │ │ │ ├── group-side.tsx │ │ │ ├── multi-side.tsx │ │ │ ├── multiple.tsx │ │ │ ├── popup-side.tsx │ │ │ ├── single-side.tsx │ │ │ └── single.tsx │ │ ├── _usage │ │ │ ├── index.jsx │ │ │ └── props.json │ │ ├── _util │ │ │ ├── cacularPaddingLeft.ts │ │ │ ├── checkMenuType.ts │ │ │ ├── checkSubMenuActive.ts │ │ │ ├── checkSubMenuChildExpanded.ts │ │ │ ├── checkSubMenuChildrenActive.ts │ │ │ ├── constant.ts │ │ │ ├── getSubMenuChildStyle.ts │ │ │ └── type.ts │ │ ├── defaultProps.ts │ │ ├── hooks │ │ │ └── useMenuContext.ts │ │ ├── index.ts │ │ ├── menu.en-US.md │ │ ├── menu.md │ │ ├── style │ │ │ ├── css.js │ │ │ └── index.js │ │ └── type.ts │ ├── message │ │ ├── Message.tsx │ │ ├── MessageClose.tsx │ │ ├── MessageComponent.tsx │ │ ├── MessageIcon.tsx │ │ ├── __tests__ │ │ │ └── message.test.jsx │ │ ├── _example │ │ │ ├── base.tsx │ │ │ ├── close-all.tsx │ │ │ ├── close-function.tsx │ │ │ ├── close.tsx │ │ │ ├── config.tsx │ │ │ ├── duration.tsx │ │ │ ├── loading.tsx │ │ │ ├── methods.tsx │ │ │ └── offset.tsx │ │ ├── _usage │ │ │ ├── index.jsx │ │ │ └── props.json │ │ ├── config.ts │ │ ├── const.ts │ │ ├── defaultProps.ts │ │ ├── index.ts │ │ ├── message.en-US.md │ │ ├── message.md │ │ ├── style │ │ │ ├── css.js │ │ │ └── index.js │ │ ├── type.ts │ │ └── useMessageClass.ts │ ├── notification │ │ ├── Notification.tsx │ │ ├── NotificationList.tsx │ │ ├── NotificationPlugin.ts │ │ ├── __tests__ │ │ │ └── notification.test.tsx │ │ ├── _example │ │ │ ├── attach.tsx │ │ │ ├── base.tsx │ │ │ ├── close-all.tsx │ │ │ ├── content.tsx │ │ │ ├── footer.tsx │ │ │ ├── icon.tsx │ │ │ ├── operation.tsx │ │ │ ├── placement.tsx │ │ │ ├── plugin.tsx │ │ │ └── toggle.tsx │ │ ├── _usage │ │ │ ├── index.jsx │ │ │ └── props.json │ │ ├── config.ts │ │ ├── defaultProps.ts │ │ ├── index.ts │ │ ├── notification.en-US.md │ │ ├── notification.md │ │ ├── style │ │ │ ├── css.js │ │ │ └── index.js │ │ └── type.ts │ ├── package.json │ ├── pagination │ │ ├── Pagination.tsx │ │ ├── PaginationMini.tsx │ │ ├── __tests__ │ │ │ ├── pagination.test.tsx │ │ │ └── paginationMini.test.tsx │ │ ├── _example │ │ │ ├── base.tsx │ │ │ ├── jump.tsx │ │ │ ├── mini.tsx │ │ │ ├── more.tsx │ │ │ ├── page-num.tsx │ │ │ ├── pagination-mini.tsx │ │ │ ├── simple-mini.tsx │ │ │ ├── simple.tsx │ │ │ └── total.tsx │ │ ├── _usage │ │ │ ├── index.jsx │ │ │ └── props.json │ │ ├── defaultProps.ts │ │ ├── hooks │ │ │ ├── useBoundaryJumper.tsx │ │ │ ├── usePageNumber.tsx │ │ │ ├── usePrevNextJumper.tsx │ │ │ └── useTotal.tsx │ │ ├── index.ts │ │ ├── pagination.en-US.md │ │ ├── pagination.md │ │ ├── style │ │ │ ├── css.js │ │ │ └── index.js │ │ ├── type.ts │ │ └── validators.ts │ ├── popconfirm │ │ ├── Popconfirm.tsx │ │ ├── Popcontent.tsx │ │ ├── __tests__ │ │ │ └── popconfirm.test.tsx │ │ ├── _example │ │ │ ├── base.tsx │ │ │ ├── button.tsx │ │ │ ├── describe.tsx │ │ │ ├── extends.tsx │ │ │ ├── icon.tsx │ │ │ ├── inherit.tsx │ │ │ ├── placement.tsx │ │ │ └── theme.tsx │ │ ├── _usage │ │ │ ├── index.jsx │ │ │ └── props.json │ │ ├── defaultProps.ts │ │ ├── index.ts │ │ ├── popconfirm.en-US.md │ │ ├── popconfirm.md │ │ ├── style │ │ │ ├── css.js │ │ │ └── index.js │ │ └── type.ts │ ├── popup │ │ ├── Popup.tsx │ │ ├── PopupPlugin.tsx │ │ ├── __tests__ │ │ │ └── popup.test.tsx │ │ ├── _example │ │ │ ├── base.tsx │ │ │ ├── container.tsx │ │ │ ├── destroy.tsx │ │ │ ├── disabled.tsx │ │ │ ├── dynamic.tsx │ │ │ ├── placement.tsx │ │ │ ├── plugin.tsx │ │ │ ├── popper-options.tsx │ │ │ ├── style.tsx │ │ │ ├── trigger-element.tsx │ │ │ ├── trigger.tsx │ │ │ └── visible.tsx │ │ ├── _usage │ │ │ ├── index.jsx │ │ │ └── props.json │ │ ├── defaultProps.ts │ │ ├── hooks │ │ │ └── useTrigger.tsx │ │ ├── index.ts │ │ ├── popup.en-US.md │ │ ├── popup.md │ │ ├── style │ │ │ ├── css.js │ │ │ └── index.js │ │ ├── type.ts │ │ └── utils │ │ │ └── transition.ts │ ├── progress │ │ ├── Progress.tsx │ │ ├── __tests__ │ │ │ └── progress.test.tsx │ │ ├── _example │ │ │ ├── circle.tsx │ │ │ ├── line.tsx │ │ │ └── plump.tsx │ │ ├── _usage │ │ │ ├── index.jsx │ │ │ └── props.json │ │ ├── defaultProps.ts │ │ ├── index.ts │ │ ├── progress.en-US.md │ │ ├── progress.md │ │ ├── style │ │ │ ├── css.js │ │ │ └── index.js │ │ └── type.ts │ ├── radio │ │ ├── Radio.tsx │ │ ├── RadioGroup.tsx │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── vitest-radio.test.jsx.snap │ │ │ ├── mount.jsx │ │ │ ├── radio.test.tsx │ │ │ └── vitest-radio.test.jsx │ │ ├── _example │ │ │ ├── base.tsx │ │ │ ├── group.tsx │ │ │ ├── size.tsx │ │ │ └── type.tsx │ │ ├── _usage │ │ │ ├── index.jsx │ │ │ └── props.json │ │ ├── defaultProps.ts │ │ ├── index.ts │ │ ├── radio.en-US.md │ │ ├── radio.md │ │ ├── style │ │ │ ├── css.js │ │ │ └── index.js │ │ ├── type.ts │ │ └── useKeyboard.ts │ ├── range-input │ │ ├── RangeInput.tsx │ │ ├── RangeInputPopup.tsx │ │ ├── _example │ │ │ ├── base.tsx │ │ │ ├── popup.tsx │ │ │ ├── size.tsx │ │ │ └── status.tsx │ │ ├── _usage │ │ │ ├── index.jsx │ │ │ └── props.json │ │ ├── defaultProps.ts │ │ ├── index.ts │ │ ├── range-input.en-US.md │ │ ├── range-input.md │ │ ├── style │ │ │ ├── css.js │ │ │ └── index.js │ │ └── type.ts │ ├── rate │ │ ├── Rate.tsx │ │ ├── __tests__ │ │ │ └── rate.test.tsx │ │ ├── _example │ │ │ ├── base.tsx │ │ │ ├── clearable.tsx │ │ │ ├── custom.tsx │ │ │ ├── icon.tsx │ │ │ ├── size.tsx │ │ │ ├── status.tsx │ │ │ └── texts.tsx │ │ ├── _usage │ │ │ └── props.json │ │ ├── defaultProps.ts │ │ ├── index.ts │ │ ├── rate.en-US.md │ │ ├── rate.md │ │ ├── style │ │ │ ├── css.js │ │ │ └── index.js │ │ └── type.ts │ ├── search │ │ ├── defaultProps.ts │ │ ├── search.en-US.md │ │ ├── search.md │ │ └── type.ts │ ├── select-input │ │ ├── SelectInput.tsx │ │ ├── __tests__ │ │ │ ├── mount.jsx │ │ │ ├── select.test.tsx │ │ │ └── vitest-select-input.test.jsx │ │ ├── _example │ │ │ ├── autocomplete.tsx │ │ │ ├── autowidth-multiple.tsx │ │ │ ├── autowidth.tsx │ │ │ ├── borderless-multiple.tsx │ │ │ ├── borderless.tsx │ │ │ ├── collapsed-items.tsx │ │ │ ├── custom-tag.tsx │ │ │ ├── excess-tags-display-type.tsx │ │ │ ├── label-suffix.tsx │ │ │ ├── multiple.tsx │ │ │ ├── single.tsx │ │ │ ├── status.tsx │ │ │ └── width.tsx │ │ ├── _usage │ │ │ ├── index.jsx │ │ │ └── props.json │ │ ├── defaultProps.ts │ │ ├── index.ts │ │ ├── interface.ts │ │ ├── select-input.en-US.md │ │ ├── select-input.md │ │ ├── style │ │ │ ├── css.js │ │ │ └── index.js │ │ ├── type.ts │ │ ├── useMultiple.tsx │ │ ├── useOverlayInnerStyle.ts │ │ └── useSingle.tsx │ ├── select │ │ ├── __tests__ │ │ │ └── select.test.tsx │ │ ├── _example │ │ │ ├── base.tsx │ │ │ ├── collapsed.tsx │ │ │ ├── creatable.tsx │ │ │ ├── custom-options.tsx │ │ │ ├── custom-selected.tsx │ │ │ ├── disabled.tsx │ │ │ ├── filterable.tsx │ │ │ ├── group.tsx │ │ │ ├── keys.tsx │ │ │ ├── label-in-value.tsx │ │ │ ├── max.tsx │ │ │ ├── multiple.tsx │ │ │ ├── noborder.tsx │ │ │ ├── options.tsx │ │ │ ├── panel.tsx │ │ │ ├── popup-props.tsx │ │ │ ├── prefix.tsx │ │ │ ├── remote-search.tsx │ │ │ ├── scroll-bottom.tsx │ │ │ ├── scroll-top.tsx │ │ │ ├── size.tsx │ │ │ ├── status.tsx │ │ │ └── virtual-scroll.tsx │ │ ├── _usage │ │ │ ├── index.jsx │ │ │ └── props.json │ │ ├── base │ │ │ ├── Option.tsx │ │ │ ├── OptionGroup.tsx │ │ │ ├── PopupContent.tsx │ │ │ ├── Select.tsx │ │ │ └── style │ │ │ │ ├── css.js │ │ │ │ └── index.js │ │ ├── defaultProps.ts │ │ ├── hooks │ │ │ ├── useOptions.ts │ │ │ └── usePanelVirtualScroll.ts │ │ ├── index.ts │ │ ├── select.en-US.md │ │ ├── select.md │ │ ├── style │ │ │ ├── css.js │ │ │ └── index.js │ │ ├── type.ts │ │ └── util │ │ │ └── helper.ts │ ├── skeleton │ │ ├── Skeleton.tsx │ │ ├── __tests__ │ │ │ └── skeleton.test.tsx │ │ ├── _example │ │ │ ├── advance.tsx │ │ │ ├── animation.tsx │ │ │ ├── base.tsx │ │ │ ├── delay.tsx │ │ │ └── theme.tsx │ │ ├── _usage │ │ │ ├── index.jsx │ │ │ └── props.json │ │ ├── defaultProps.ts │ │ ├── index.ts │ │ ├── skeleton.en-US.md │ │ ├── skeleton.md │ │ ├── style │ │ │ ├── css.js │ │ │ └── index.js │ │ └── type.ts │ ├── slider │ │ ├── Slider.tsx │ │ ├── SliderHandleButton.tsx │ │ ├── __tests__ │ │ │ ├── SliderHandleButton.test.tsx │ │ │ └── slider.test.tsx │ │ ├── _example │ │ │ ├── base.tsx │ │ │ ├── disabled.tsx │ │ │ ├── input-number-vertical.tsx │ │ │ ├── input-number.tsx │ │ │ ├── marks.tsx │ │ │ ├── min-and-max.tsx │ │ │ ├── step.tsx │ │ │ ├── vertical-marks.tsx │ │ │ └── vertical.tsx │ │ ├── _usage │ │ │ ├── index.jsx │ │ │ └── props.json │ │ ├── defaultProps.ts │ │ ├── index.ts │ │ ├── slider.en-US.md │ │ ├── slider.md │ │ ├── style │ │ │ ├── css.js │ │ │ └── index.js │ │ ├── type.ts │ │ └── utils │ │ │ └── handleNumber.ts │ ├── space │ │ ├── Space.tsx │ │ ├── __tests__ │ │ │ ├── mount.jsx │ │ │ ├── space.test.tsx │ │ │ └── vitest-space.test.jsx │ │ ├── _example │ │ │ ├── align.tsx │ │ │ ├── base.tsx │ │ │ ├── break-line.tsx │ │ │ ├── separator.tsx │ │ │ ├── size.tsx │ │ │ └── vertical.tsx │ │ ├── _usage │ │ │ ├── index.jsx │ │ │ └── props.json │ │ ├── defaultProps.ts │ │ ├── index.ts │ │ ├── space.en-US.md │ │ ├── space.md │ │ ├── style │ │ │ ├── css.js │ │ │ └── index.js │ │ └── type.ts │ ├── statistic │ │ ├── Statistic.tsx │ │ ├── __tests__ │ │ │ └── statistic.test.tsx │ │ ├── _example │ │ │ ├── animation.tsx │ │ │ ├── base.tsx │ │ │ ├── color.tsx │ │ │ ├── combination.tsx │ │ │ ├── loading.tsx │ │ │ ├── slot.tsx │ │ │ └── trend.tsx │ │ ├── defaultProps.ts │ │ ├── index.ts │ │ ├── statistic.en-US.md │ │ ├── statistic.md │ │ ├── style │ │ │ ├── css.js │ │ │ └── index.js │ │ └── type.ts │ ├── steps │ │ ├── StepItem.tsx │ │ ├── Steps.tsx │ │ ├── StepsContext.ts │ │ ├── __tests__ │ │ │ └── steps.test.tsx │ │ ├── _example │ │ │ ├── extra.tsx │ │ │ ├── icon.tsx │ │ │ ├── no-sequence.tsx │ │ │ ├── sequence.tsx │ │ │ ├── status.tsx │ │ │ ├── vertical-no-sequence.tsx │ │ │ └── vertical-sequence.tsx │ │ ├── _usage │ │ │ ├── index.jsx │ │ │ └── props.json │ │ ├── defaultProps.ts │ │ ├── index.ts │ │ ├── steps.en-US.md │ │ ├── steps.md │ │ ├── style │ │ │ ├── css.js │ │ │ └── index.js │ │ └── type.ts │ ├── sticky-tool │ │ ├── StickyItem.tsx │ │ ├── StickyTool.tsx │ │ ├── _example │ │ │ ├── base.tsx │ │ │ ├── compact.tsx │ │ │ └── shape.tsx │ │ ├── _usage │ │ │ └── props.json │ │ ├── defaultProps.ts │ │ ├── index.ts │ │ ├── sticky-tool.en-US.md │ │ ├── sticky-tool.md │ │ ├── style │ │ │ ├── css.js │ │ │ └── index.js │ │ └── type.ts │ ├── style │ │ ├── css.js │ │ └── index.js │ ├── swiper │ │ ├── Swiper.tsx │ │ ├── SwiperItem.tsx │ │ ├── __tests__ │ │ │ └── swiper.test.tsx │ │ ├── _example │ │ │ ├── base.tsx │ │ │ ├── card.tsx │ │ │ ├── current.tsx │ │ │ ├── fade.tsx │ │ │ ├── fraction.tsx │ │ │ ├── placement.tsx │ │ │ ├── size.tsx │ │ │ └── vertical.tsx │ │ ├── _usage │ │ │ ├── index.jsx │ │ │ └── props.json │ │ ├── defaultProps.ts │ │ ├── index.ts │ │ ├── style │ │ │ ├── css.js │ │ │ └── index.js │ │ ├── swiper.en-US.md │ │ ├── swiper.md │ │ └── type.ts │ ├── switch │ │ ├── Switch.tsx │ │ ├── __tests__ │ │ │ └── switch.test.tsx │ │ ├── _example │ │ │ ├── base.tsx │ │ │ ├── beforeChange.tsx │ │ │ ├── describe.tsx │ │ │ ├── size.tsx │ │ │ └── status.tsx │ │ ├── _usage │ │ │ ├── index.jsx │ │ │ └── props.json │ │ ├── defaultProps.ts │ │ ├── index.ts │ │ ├── style │ │ │ ├── css.js │ │ │ └── index.js │ │ ├── switch.en-US.md │ │ ├── switch.md │ │ └── type.ts │ ├── table │ │ ├── BaseTable.tsx │ │ ├── Cell.tsx │ │ ├── EditableCell.tsx │ │ ├── Ellipsis.tsx │ │ ├── EnhancedTable.tsx │ │ ├── FilterController.tsx │ │ ├── PrimaryTable.tsx │ │ ├── README.md │ │ ├── SorterButton.tsx │ │ ├── TBody.tsx │ │ ├── TFoot.tsx │ │ ├── THead.tsx │ │ ├── TR.tsx │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ ├── pagination.test.tsx.snap │ │ │ │ └── vitest-table.test.jsx.snap │ │ │ ├── base.test.tsx │ │ │ ├── column.test.tsx │ │ │ ├── expand.test.jsx │ │ │ ├── mount.jsx │ │ │ ├── pagination.test.tsx │ │ │ ├── row.events.test.tsx │ │ │ └── vitest-table.test.jsx │ │ ├── _example │ │ │ ├── affix.tsx │ │ │ ├── async-loading.tsx │ │ │ ├── base.tsx │ │ │ ├── custom-cell.tsx │ │ │ ├── custom-col-button.tsx │ │ │ ├── custom-col.tsx │ │ │ ├── custom-footer.tsx │ │ │ ├── custom-header.tsx │ │ │ ├── data-sort.tsx │ │ │ ├── drag-col-sort.tsx │ │ │ ├── drag-sort-handler.tsx │ │ │ ├── drag-sort.tsx │ │ │ ├── editable-cell.tsx │ │ │ ├── editable-row.tsx │ │ │ ├── ellipsis.tsx │ │ │ ├── empty.tsx │ │ │ ├── expandable.tsx │ │ │ ├── filter-controlled.tsx │ │ │ ├── fixed-column.tsx │ │ │ ├── fixed-header-col.tsx │ │ │ ├── fixed-header.tsx │ │ │ ├── lazy.tsx │ │ │ ├── loading.tsx │ │ │ ├── merge-cells.tsx │ │ │ ├── multi-header.tsx │ │ │ ├── multiple-sort.tsx │ │ │ ├── pagination-ajax.tsx │ │ │ ├── pagination.tsx │ │ │ ├── select-multiple.tsx │ │ │ ├── select-single.tsx │ │ │ ├── single-sort.tsx │ │ │ ├── style.tsx │ │ │ ├── tree-select.tsx │ │ │ ├── tree.tsx │ │ │ └── virtual-scroll.tsx │ │ ├── _usage │ │ │ ├── base-table-props.json │ │ │ ├── enhanced-table-props.json │ │ │ ├── index.jsx │ │ │ └── primary-table-props.json │ │ ├── defaultProps.ts │ │ ├── hooks │ │ │ ├── style │ │ │ │ ├── css.js │ │ │ │ └── index.js │ │ │ ├── tree-store.ts │ │ │ ├── useAffix.ts │ │ │ ├── useAsyncLoading.tsx │ │ │ ├── useClassName.ts │ │ │ ├── useColumnController.tsx │ │ │ ├── useColumnResize.tsx │ │ │ ├── useDragSort.ts │ │ │ ├── useEditableRow.ts │ │ │ ├── useFilter.tsx │ │ │ ├── useFixed.ts │ │ │ ├── useLazyLoad.ts │ │ │ ├── useMultiHeader.ts │ │ │ ├── usePagination.tsx │ │ │ ├── useRowExpand.tsx │ │ │ ├── useRowSelect.tsx │ │ │ ├── useRowspanAndColspan.ts │ │ │ ├── useSorter.tsx │ │ │ ├── useStyle.ts │ │ │ ├── useTableHeader.tsx │ │ │ ├── useTreeData.tsx │ │ │ ├── useTreeDataExpand.ts │ │ │ └── useTreeSelect.tsx │ │ ├── index.ts │ │ ├── interface.ts │ │ ├── style │ │ │ ├── css.js │ │ │ └── index.js │ │ ├── table.en-US.md │ │ ├── table.md │ │ ├── type.ts │ │ └── utils.ts │ ├── tabs │ │ ├── TabBar.tsx │ │ ├── TabNav.tsx │ │ ├── TabNavItem.tsx │ │ ├── TabPanel.tsx │ │ ├── Tabs.tsx │ │ ├── __tests__ │ │ │ └── tabs.test.tsx │ │ ├── _example │ │ │ ├── ban.tsx │ │ │ ├── base.tsx │ │ │ ├── combination.tsx │ │ │ ├── custom.tsx │ │ │ ├── drag-sort.tsx │ │ │ ├── icon.tsx │ │ │ ├── lazy-load.tsx │ │ │ ├── operation.tsx │ │ │ ├── position.tsx │ │ │ ├── size.tsx │ │ │ └── theme.tsx │ │ ├── _usage │ │ │ ├── index.jsx │ │ │ └── props.json │ │ ├── defaultProps.ts │ │ ├── index.ts │ │ ├── style │ │ │ ├── css.js │ │ │ └── index.js │ │ ├── tabs.en-US.md │ │ ├── tabs.md │ │ ├── type.ts │ │ └── useTabClass.ts │ ├── tag-input │ │ ├── TagInput.tsx │ │ ├── __tests__ │ │ │ ├── mount.jsx │ │ │ ├── tag-input.test.tsx │ │ │ └── vitest-tag-input.test.jsx │ │ ├── _example │ │ │ ├── auto-width.tsx │ │ │ ├── base.tsx │ │ │ ├── collapsed.tsx │ │ │ ├── custom-tag.tsx │ │ │ ├── draggable.tsx │ │ │ ├── excess.tsx │ │ │ ├── max-row.tsx │ │ │ ├── max.tsx │ │ │ ├── size.tsx │ │ │ ├── status.tsx │ │ │ └── theme.tsx │ │ ├── _usage │ │ │ ├── index.jsx │ │ │ └── props.json │ │ ├── defaultProps.ts │ │ ├── index.ts │ │ ├── style │ │ │ ├── css.js │ │ │ └── index.js │ │ ├── tag-input.en-US.md │ │ ├── tag-input.md │ │ ├── type.ts │ │ ├── useHover.ts │ │ ├── useTagList.tsx │ │ └── useTagScroll.ts │ ├── tag │ │ ├── CheckTag.tsx │ │ ├── CheckTagGroup.tsx │ │ ├── Tag.tsx │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── tag.test.tsx.snap │ │ │ └── vitest-tag.test.jsx │ │ ├── _example │ │ │ ├── base.tsx │ │ │ ├── check-tag-group.tsx │ │ │ ├── custom-color.tsx │ │ │ ├── delete.tsx │ │ │ ├── icon.tsx │ │ │ ├── long-text.tsx │ │ │ ├── selectable.tsx │ │ │ ├── shape.tsx │ │ │ └── size.tsx │ │ ├── _usage │ │ │ ├── index.jsx │ │ │ └── props.json │ │ ├── defaultProps.ts │ │ ├── index.ts │ │ ├── style │ │ │ ├── css.js │ │ │ └── index.js │ │ ├── tag.en-US.md │ │ ├── tag.md │ │ └── type.ts │ ├── textarea │ │ ├── Textarea.tsx │ │ ├── __tests__ │ │ │ └── textarea.test.tsx │ │ ├── _example │ │ │ ├── base.tsx │ │ │ ├── events.tsx │ │ │ ├── maxlength.tsx │ │ │ └── type.tsx │ │ ├── _usage │ │ │ ├── index.jsx │ │ │ └── props.json │ │ ├── defaultProps.ts │ │ ├── index.tsx │ │ ├── style │ │ │ ├── css.js │ │ │ └── index.js │ │ ├── textarea.en-US.md │ │ ├── textarea.md │ │ └── type.ts │ ├── time-picker │ │ ├── TimePicker.tsx │ │ ├── TimeRangePicker.tsx │ │ ├── __tests__ │ │ │ └── time-picker.test.tsx │ │ ├── _example │ │ │ ├── disabled.tsx │ │ │ ├── hide-clear-button.tsx │ │ │ ├── hm.tsx │ │ │ ├── hms.tsx │ │ │ ├── keyboard.tsx │ │ │ ├── panel.tsx │ │ │ ├── presets.tsx │ │ │ ├── range.tsx │ │ │ ├── show-steps.tsx │ │ │ └── twelve-hour-meridian.tsx │ │ ├── _usage │ │ │ ├── index.jsx │ │ │ ├── time-picker-props.json │ │ │ └── time-range-picker-props.json │ │ ├── defaultProps.ts │ │ ├── hooks │ │ │ └── useTimePickerTextConfig.ts │ │ ├── index.ts │ │ ├── panel │ │ │ ├── SinglePanel.tsx │ │ │ ├── TimePickerPanel.tsx │ │ │ └── style │ │ │ │ ├── css.js │ │ │ │ └── index.js │ │ ├── style │ │ │ ├── css.js │ │ │ └── index.js │ │ ├── time-picker.en-US.md │ │ ├── time-picker.md │ │ └── type.ts │ ├── timeline │ │ ├── Timeline.tsx │ │ ├── TimelineContext.ts │ │ ├── TimelineItem.tsx │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── vitest-timeline.test.jsx.snap │ │ │ ├── mount.jsx │ │ │ └── vitest-timeline.test.jsx │ │ ├── _example │ │ │ ├── base.tsx │ │ │ ├── customContent.tsx │ │ │ ├── customDot.tsx │ │ │ ├── layout.tsx │ │ │ ├── loading.tsx │ │ │ ├── reverse.tsx │ │ │ └── theme.tsx │ │ ├── defaultProps.ts │ │ ├── index.ts │ │ ├── style │ │ │ ├── css.js │ │ │ └── index.js │ │ ├── timeline.en-US.md │ │ ├── timeline.md │ │ ├── type.ts │ │ └── useAlign.ts │ ├── tooltip │ │ ├── Tooltip.tsx │ │ ├── TooltipLite.tsx │ │ ├── __tests__ │ │ │ └── tooltip.test.tsx │ │ ├── _example │ │ │ ├── arrow.tsx │ │ │ ├── base.tsx │ │ │ ├── duration.tsx │ │ │ ├── lite.tsx │ │ │ ├── mouse.tsx │ │ │ ├── no-arrow.tsx │ │ │ ├── theme.tsx │ │ │ └── trigger.tsx │ │ ├── _usage │ │ │ ├── index.jsx │ │ │ └── props.json │ │ ├── defaultProps.ts │ │ ├── index.ts │ │ ├── style │ │ │ ├── css.js │ │ │ └── index.js │ │ ├── tooltip.en-US.md │ │ ├── tooltip.md │ │ └── type.ts │ ├── transfer │ │ ├── Transfer.tsx │ │ ├── TransferList.tsx │ │ ├── __tests__ │ │ │ └── transfer.test.tsx │ │ ├── _example │ │ │ ├── base.tsx │ │ │ ├── checked.tsx │ │ │ ├── custom-render.tsx │ │ │ ├── custom.tsx │ │ │ ├── empty.tsx │ │ │ ├── pagination.tsx │ │ │ ├── search.tsx │ │ │ └── tree.tsx │ │ ├── _usage │ │ │ ├── index.jsx │ │ │ └── props.json │ │ ├── defaultProps.ts │ │ ├── index.ts │ │ ├── style │ │ │ ├── css.js │ │ │ └── index.js │ │ ├── transfer.en-US.md │ │ ├── transfer.md │ │ ├── type.ts │ │ └── utils.ts │ ├── tree-select │ │ ├── SelectArrow.tsx │ │ ├── TreeSelect.tsx │ │ ├── __tests__ │ │ │ ├── mount.jsx │ │ │ └── vitest-tree-select.test.jsx │ │ ├── _example │ │ │ ├── base.tsx │ │ │ ├── collapsed.tsx │ │ │ ├── filterable.tsx │ │ │ ├── lazy.tsx │ │ │ ├── multiple.tsx │ │ │ ├── panelContent.tsx │ │ │ ├── prefix.tsx │ │ │ ├── prefixsuffix.tsx │ │ │ ├── props.tsx │ │ │ ├── valuedisplay.tsx │ │ │ └── valuetype.tsx │ │ ├── _usage │ │ │ ├── index.jsx │ │ │ └── props.json │ │ ├── defaultProps.ts │ │ ├── hooks │ │ │ ├── useTreeSelectLocale.tsx │ │ │ ├── useTreeSelectPassthroughProps.ts │ │ │ └── useTreeSelectUtils.ts │ │ ├── index.ts │ │ ├── style │ │ │ ├── css.js │ │ │ └── index.js │ │ ├── tree-select.en-US.md │ │ ├── tree-select.md │ │ └── type.ts │ ├── tree │ │ ├── Tree.tsx │ │ ├── TreeItem.tsx │ │ ├── __tests__ │ │ │ ├── mount.jsx │ │ │ ├── tree.test.tsx │ │ │ └── vitest-tree.test.jsx │ │ ├── _example │ │ │ ├── activable.tsx │ │ │ ├── base.tsx │ │ │ ├── checkable.tsx │ │ │ ├── controlled.tsx │ │ │ ├── disabled.tsx │ │ │ ├── draggable.tsx │ │ │ ├── empty.tsx │ │ │ ├── expand-all.tsx │ │ │ ├── expand-level.tsx │ │ │ ├── expand-mutex.tsx │ │ │ ├── filter.tsx │ │ │ ├── icon.tsx │ │ │ ├── label.tsx │ │ │ ├── lazy.tsx │ │ │ ├── line.tsx │ │ │ ├── load.tsx │ │ │ ├── operations.tsx │ │ │ ├── state.tsx │ │ │ ├── sync.tsx │ │ │ └── vscroll.tsx │ │ ├── _usage │ │ │ ├── index.jsx │ │ │ └── props.json │ │ ├── defaultProps.ts │ │ ├── hooks │ │ │ ├── TreeDraggableContext.tsx │ │ │ ├── style │ │ │ │ ├── css.js │ │ │ │ └── index.js │ │ │ ├── useControllable.ts │ │ │ ├── useDraggable.tsx │ │ │ ├── useStore.ts │ │ │ ├── useTreeConfig.ts │ │ │ └── useTreeVirtualScroll.ts │ │ ├── index.ts │ │ ├── interface.ts │ │ ├── style │ │ │ ├── css.js │ │ │ └── index.js │ │ ├── tree.en-US.md │ │ ├── tree.md │ │ └── type.ts │ ├── typography │ │ ├── Paragraph.tsx │ │ ├── Text.tsx │ │ ├── Title.tsx │ │ ├── Typography.tsx │ │ ├── __tests__ │ │ │ └── typography.test.tsx │ │ ├── _example │ │ │ ├── base.tsx │ │ │ ├── copyable.tsx │ │ │ ├── ellipsis.tsx │ │ │ ├── text.tsx │ │ │ └── title.tsx │ │ ├── defaultProps.ts │ │ ├── ellipsis │ │ │ ├── Ellipsis.tsx │ │ │ ├── Truncate.tsx │ │ │ ├── style │ │ │ │ ├── css.js │ │ │ │ └── index.js │ │ │ └── useEllipsis.tsx │ │ ├── index.ts │ │ ├── style │ │ │ ├── css.js │ │ │ └── index.js │ │ ├── type.ts │ │ ├── typography.en-US.md │ │ └── typography.md │ ├── upload │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── vitest-upload.test.jsx.snap │ │ │ ├── request │ │ │ │ └── index.js │ │ │ ├── upload.test.tsx │ │ │ └── vitest-upload.test.jsx │ │ ├── _example │ │ │ ├── base.tsx │ │ │ ├── custom-drag.tsx │ │ │ ├── draggable.tsx │ │ │ ├── file-flow-list.tsx │ │ │ ├── image.tsx │ │ │ ├── img-flow-list.tsx │ │ │ ├── request-method.tsx │ │ │ ├── single-custom.tsx │ │ │ └── single-input.tsx │ │ ├── _usage │ │ │ ├── index.jsx │ │ │ └── props.json │ │ ├── defaultProps.ts │ │ ├── hooks │ │ │ ├── useDrag.ts │ │ │ └── useUpload.ts │ │ ├── index.tsx │ │ ├── interface.ts │ │ ├── style │ │ │ ├── css.js │ │ │ └── index.js │ │ ├── themes │ │ │ ├── CustomFile.tsx │ │ │ ├── DraggerFile.tsx │ │ │ ├── ImageCard.tsx │ │ │ ├── MultipleFlowList.tsx │ │ │ ├── NormalFile.tsx │ │ │ └── README.md │ │ ├── type.ts │ │ ├── upload.en-US.md │ │ ├── upload.md │ │ └── upload.tsx │ └── watermark │ │ ├── Watermark.tsx │ │ ├── __tests__ │ │ └── watermark.test.tsx │ │ ├── _example │ │ ├── base.tsx │ │ ├── graylevel.tsx │ │ ├── image.tsx │ │ ├── movingImage.tsx │ │ ├── movingText.tsx │ │ └── multiline.tsx │ │ ├── defaultProps.ts │ │ ├── index.ts │ │ ├── style │ │ ├── css.js │ │ └── index.js │ │ ├── type.ts │ │ ├── utils.ts │ │ ├── watermark.en-US.md │ │ └── watermark.md └── tdesign-react │ ├── CHANGELOG-0.x.md │ ├── CHANGELOG.md │ ├── LICENSE │ ├── README-zh_CN.md │ ├── README.md │ ├── package.json │ └── site │ ├── .gitignore │ ├── README.md │ ├── babel.config.demo.js │ ├── babel.config.js │ ├── docs │ ├── getting-started.en-US.md │ ├── getting-started.md │ ├── starter.en-US.md │ └── starter.md │ ├── index.html │ ├── package.json │ ├── playground.html │ ├── plugin-tdoc │ ├── demo.js │ ├── index.js │ ├── md-to-react.js │ └── transforms.js │ ├── public │ ├── apple-touch-icon.png │ ├── favicon.ico │ ├── logo.svg │ ├── pwa-192x192.png │ ├── pwa-512x512.png │ └── sw.js │ ├── pwaConfig.js │ ├── site.config.mjs │ ├── src │ ├── App.jsx │ ├── components │ │ ├── BaseUsage.jsx │ │ ├── Demo.jsx │ │ ├── Playground.jsx │ │ ├── codesandbox │ │ │ ├── content.js │ │ │ └── index.jsx │ │ └── stackblitz │ │ │ ├── content.js │ │ │ └── index.jsx │ ├── main.jsx │ ├── pwa.js │ ├── styles │ │ └── Codesandbox.less │ ├── sw.js │ └── utils.js │ ├── test-coverage.js │ └── vite.config.js ├── pnpm-workspace.yaml ├── postcss.config.js ├── script ├── generate-coverage.js ├── generate-usage │ ├── config.js │ └── index.js ├── init-component │ ├── config.js │ ├── index.js │ └── tpl │ │ ├── component.tsx.tpl │ │ ├── example.base.jsx.tpl │ │ ├── index.test.tsx.tpl │ │ ├── index.tsx.tpl │ │ ├── style.css.js.tpl │ │ └── style.index.js.tpl ├── pnpm-dev-preinstall.js ├── prerender.mjs ├── rollup.config.js ├── utils │ └── bundle-override.js └── workflows │ └── pkg-pr-new-generate-template.mjs ├── test ├── README.md ├── config │ ├── cypress.json │ ├── index.d.ts │ ├── jest.base.conf.js │ ├── jest.ssr.conf.js │ └── jest.unit.conf.js ├── scripts │ ├── cypress │ │ ├── fixtures │ │ │ └── example.json │ │ ├── plugins │ │ │ └── index.js │ │ └── support │ │ │ ├── commands.js │ │ │ └── index.js │ └── setup-framework.js ├── snap │ ├── __snapshots__ │ │ ├── csr.test.jsx.snap │ │ └── ssr.test.jsx.snap │ ├── csr.test.jsx │ └── ssr.test.jsx ├── ssr │ └── __snapshots__ │ │ └── ssr.test.js.snap └── utils │ ├── events.js │ └── index.jsx ├── tsconfig.build.json ├── tsconfig.dev.json ├── tsconfig.json └── vitest.config.mts /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 2 6 | charset = utf-8 7 | trim_trailing_whitespace = true 8 | insert_final_newline = true 9 | end_of_line = lf -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | snapshot* 2 | dist/ 3 | esm/ 4 | lib/ 5 | cjs/ 6 | lib/ 7 | es/ 8 | node_modules/ 9 | static 10 | cypress 11 | script/test/cypress 12 | _site 13 | temp* 14 | static/ 15 | packages/common 16 | -------------------------------------------------------------------------------- /.github/CODEOWNERS: -------------------------------------------------------------------------------- 1 | * @honkinglin @uyarn @carolin913 @HaixingOoO @NWYLZW @ZWkang 2 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/config.yml: -------------------------------------------------------------------------------- 1 | blank_issues_enabled: true 2 | contact_links: 3 | - name: 使用 issue-helper 新建 4 | url: https://Tencent.github.io/tdesign/issue-helper/?lang=zh-CN&repo=Tencent/tdesign-react 5 | about: 使用 https://Tencent.github.io/tdesign/issue-helper/ 创建 issue，其中包含 bug 和 feature，表单提交更加严格。 6 | -------------------------------------------------------------------------------- /.github/issue-shoot.md: -------------------------------------------------------------------------------- 1 | ## IssueShoot 2 | - 预估时长: {{ .duration }} 3 | - 期望完成时间: {{ .deadline }} 4 | - 开发难度: {{ .level }} 5 | - 参与人数: 1 6 | - 需求对接人: lincao 7 | - 验收标准: 实现期望改造效果，提 PR 并通过验收无误 8 | - 备注: 最终激励以实际提交 `pull request` 并合并为准 9 | -------------------------------------------------------------------------------- /.github/workflows/issue-assignees.temp.yml: -------------------------------------------------------------------------------- 1 | # force copy from tencent/tdesign 2 | name: Issue Add Assigness 3 | 4 | on: 5 | issues: 6 | types: [opened, edited] 7 | 8 | jobs: 9 | mark-duplicate: 10 | runs-on: ubuntu-latest 11 | steps: 12 | - uses: wow-actions/auto-comment@v1 13 | with: 14 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 15 | issuesOpened: | 16 | 👋 @{{ author }}，感谢给 TDesign 提出了 issue。 17 | 请根据 issue 模版确保背景信息的完善，我们将调查并尽快回复你。 18 | -------------------------------------------------------------------------------- /.github/workflows/issue-mark-duplicate.temp.yml: -------------------------------------------------------------------------------- 1 | # force copy from tencent/tdesign 2 | # 当在 issue 的 comment 回复类似 `Duplicate of #111` 这样的话，issue 将被自动打上 重复提交标签 并且 cloese 3 | name: Issue Mark Duplicate 4 | 5 | on: 6 | issue_comment: 7 | types: [created, edited] 8 | 9 | jobs: 10 | mark-duplicate: 11 | runs-on: ubuntu-latest 12 | steps: 13 | - name: mark-duplicate 14 | uses: actions-cool/issues-helper@v2 15 | with: 16 | actions: "mark-duplicate" 17 | token: ${{ secrets.GITHUB_TOKEN }} 18 | duplicate-labels: "duplicate" 19 | close-issue: true 20 | -------------------------------------------------------------------------------- /.github/workflows/issue-synchronize.temp.yml: -------------------------------------------------------------------------------- 1 | # force copy from tencent/tdesign 2 | name: Issue Synchronize 3 | 4 | on: 5 | issues: 6 | types: [opened, reopened] 7 | 8 | jobs: 9 | synchronize: 10 | runs-on: ubuntu-latest 11 | steps: 12 | # https://docs.github.com/cn/developers/webhooks-and-events/webhooks/webhook-events-and-payloads#issues 13 | - uses: 94dreamer/create-report@main 14 | with: 15 | wxhook: ${{ secrets.WX_HOOK_URL }} 16 | token: ${{ secrets.GITHUB_TOKEN }} 17 | type: 'issue' -------------------------------------------------------------------------------- /.github/workflows/pr-spelling.template.yml: -------------------------------------------------------------------------------- 1 | name: pr-spell-check 2 | on: [pull_request] 3 | 4 | jobs: 5 | run: 6 | name: Spell Check with Typos 7 | runs-on: ubuntu-latest 8 | steps: 9 | - uses: actions/checkout@v4 10 | - name: Check spelling 11 | uses: crate-ci/typos@master 12 | with: 13 | config: .github/workflows/typos-config.toml 14 | -------------------------------------------------------------------------------- /.github/workflows/typos-config.toml: -------------------------------------------------------------------------------- 1 | default.check-filename = true 2 | 3 | [default.extend-words] 4 | actived="actived" 5 | 6 | [files] 7 | extend-exclude = ["CHANGELOG*.md", "*.snap","jest.base.conf.js"] 8 | -------------------------------------------------------------------------------- /.gitmodules: -------------------------------------------------------------------------------- 1 | [submodule "packages/common"] 2 | path = packages/common 3 | url = https://github.com/Tencent/tdesign-common.git 4 | -------------------------------------------------------------------------------- /.husky/commit-msg: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | npx --no-install commitlint --edit "" 5 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | npx lint-staged && log_emails=$(git config user.email) && if [[ ${log_emails} =~ '@tencent.com' ]];then echo 本地提交邮箱 $log_emails 校验非法，需要本地更改重新提交 && exit 2;else echo 邮箱 $log_emails 校验通过;fi 5 | -------------------------------------------------------------------------------- /.husky/prepare-commit-msg: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | [[ "$(uname -a)" = *"MINGW64"* ]] && exit 0 3 | [ -n "$CI" ] && exit 0 4 | . "$(dirname "$0")/_/husky.sh" 5 | 6 | exec < /dev/tty && npx git-cz --hook || true -------------------------------------------------------------------------------- /.node-version: -------------------------------------------------------------------------------- 1 | 18 -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | # 提升依赖项到根目录，以避免重复安装相同的包 2 | shamefully-hoist=true -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | v18 -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | site/engineering/static -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": [ 3 | "esbenp.prettier-vscode", 4 | "dbaeumer.vscode-eslint", 5 | "streetsidesoftware.code-spell-checker" 6 | ] 7 | } -------------------------------------------------------------------------------- /babel.config.demo.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['@babel/preset-typescript'], 3 | }; 4 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript'], 3 | plugins: ['@babel/plugin-transform-runtime'], 4 | }; 5 | -------------------------------------------------------------------------------- /commitlint.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { extends: ['@commitlint/config-conventional'] }; 2 | -------------------------------------------------------------------------------- /packages/components/_util/composeRefs.ts: -------------------------------------------------------------------------------- 1 | import { Ref } from 'react'; 2 | 3 | // 同时处理多个 ref 4 | export default function composeRefs(...refs: Ref[]) { 5 | return (instance: T) => { 6 | // eslint-disable-next-line no-restricted-syntax 7 | for (const ref of refs) { 8 | if (typeof ref === 'function') { 9 | ref(instance); 10 | } else if (ref) { 11 | (ref as any).current = instance; 12 | } 13 | } 14 | }; 15 | } 16 | -------------------------------------------------------------------------------- /packages/components/_util/forwardRefWithStatics.ts: -------------------------------------------------------------------------------- 1 | import React, { RefAttributes, forwardRef } from 'react'; 2 | import hoistNonReactStatics from 'hoist-non-react-statics'; 3 | 4 | export default function forwardRefWithStatics( 5 | component: React.ForwardRefRenderFunction, 6 | statics?: S, 7 | ): React.FunctionComponent

> & S { 8 | return hoistNonReactStatics(forwardRef(component as any), statics as any) as any; 9 | } 10 | -------------------------------------------------------------------------------- /packages/components/_util/insertCSS.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 当前页面动态插入 CSS 3 | */ 4 | 5 | const prefix = 't-dynamic-css-'; 6 | export default function insertCSS(id: string, cssText: string) { 7 | let style: HTMLStyleElement; 8 | style = document.getElementById(prefix + id) as HTMLStyleElement; 9 | if (!style) { 10 | style = document.createElement('style'); 11 | style.id = prefix + id; 12 | // IE8/9 can not use document.head 13 | document.getElementsByTagName('head')[0].appendChild(style); 14 | } 15 | if (style.textContent !== cssText) { 16 | style.textContent = cssText; 17 | } 18 | return style; 19 | } 20 | -------------------------------------------------------------------------------- /packages/components/_util/noop.ts: -------------------------------------------------------------------------------- 1 | // eslint-disable-next-line @typescript-eslint/no-empty-function 2 | const noop = () => {}; 3 | 4 | export default noop; 5 | -------------------------------------------------------------------------------- /packages/components/affix/_example/base.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { Affix, Button } from 'tdesign-react'; 3 | 4 | export default function BaseExample() { 5 | const [top, setTop] = useState(150); 6 | 7 | const handleClick = () => { 8 | setTop(top + 10); 9 | }; 10 | 11 | return ( 12 | 13 | 14 | 15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /packages/components/affix/_usage/props.json: -------------------------------------------------------------------------------- 1 | [] -------------------------------------------------------------------------------- /packages/components/affix/defaultProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC 3 | * */ 4 | 5 | import { TdAffixProps } from './type'; 6 | 7 | export const affixDefaultProps: TdAffixProps = { container: () => window, offsetBottom: 0, offsetTop: 0 }; 8 | -------------------------------------------------------------------------------- /packages/components/affix/index.ts: -------------------------------------------------------------------------------- 1 | import _Affix from './Affix'; 2 | 3 | import './style/index.js'; 4 | 5 | export type { AffixProps, AffixRef } from './Affix'; 6 | export * from './type'; 7 | 8 | export const Affix = _Affix; 9 | export default Affix; 10 | -------------------------------------------------------------------------------- /packages/components/affix/style/css.js: -------------------------------------------------------------------------------- 1 | import './index.css'; 2 | -------------------------------------------------------------------------------- /packages/components/affix/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../../common/style/web/components/affix/_index.less'; 2 | -------------------------------------------------------------------------------- /packages/components/alert/_example/base.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Alert, Space } from 'tdesign-react'; 3 | 4 | export default function AlertBase() { 5 | return ( 6 | 7 | 8 | 9 | 10 | 11 | 12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /packages/components/alert/_example/close.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Alert, Space } from 'tdesign-react'; 3 | 4 | export default function AlertClose() { 5 | return ( 6 | 7 | 8 | 9 | 10 | 自定义关闭} /> 11 | 12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /packages/components/alert/_example/collapse.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Alert } from 'tdesign-react'; 3 | 4 | export default function AlertCollapsed() { 5 | const message = [ 6 | '1.这是一条普通的消息提示描述，', 7 | '2.这是一条普通的消息提示描述，', 8 | '3.这是一条普通的消息提示描述，', 9 | '4.这是一条普通的消息提示描述，', 10 | '5.这是一条普通的消息提示描述，', 11 | ]; 12 | return ; 13 | } 14 | -------------------------------------------------------------------------------- /packages/components/alert/_example/icon.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Alert, Space } from 'tdesign-react'; 3 | 4 | export default function AlertIcon() { 5 | return ( 6 | 7 | 8 | 9 | 10 | 11 | 12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /packages/components/alert/_example/swiper.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Alert, Space } from 'tdesign-react'; 3 | 4 | export default function AlertBase() { 5 | return ( 6 | 7 | 8 | 9 | 10 | 11 | 12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /packages/components/alert/_example/title.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Alert } from 'tdesign-react'; 3 | 4 | export default function AlertDescription() { 5 | const operation = 相关操作; 6 | return ( 7 | 13 | ); 14 | } 15 | -------------------------------------------------------------------------------- /packages/components/alert/defaultProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC 3 | * */ 4 | 5 | import { TdAlertProps } from './type'; 6 | 7 | export const alertDefaultProps: TdAlertProps = { close: false, maxLine: 0, theme: 'info' }; 8 | -------------------------------------------------------------------------------- /packages/components/alert/index.ts: -------------------------------------------------------------------------------- 1 | import _Alert from './Alert'; 2 | 3 | import './style/index.js'; 4 | 5 | export type { AlertProps } from './Alert'; 6 | export * from './type'; 7 | 8 | export const Alert = _Alert; 9 | export default Alert; 10 | -------------------------------------------------------------------------------- /packages/components/alert/style/css.js: -------------------------------------------------------------------------------- 1 | import './index.css'; 2 | -------------------------------------------------------------------------------- /packages/components/alert/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../../common/style/web/components/alert/_index.less'; 2 | -------------------------------------------------------------------------------- /packages/components/anchor/_usage/props.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "name": "size", 4 | "type": "enum", 5 | "defaultValue": "medium", 6 | "options": [ 7 | { 8 | "label": "small", 9 | "value": "small" 10 | }, 11 | { 12 | "label": "medium", 13 | "value": "medium" 14 | }, 15 | { 16 | "label": "large", 17 | "value": "large" 18 | } 19 | ] 20 | } 21 | ] -------------------------------------------------------------------------------- /packages/components/anchor/defaultProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC 3 | * */ 4 | 5 | import { TdAnchorProps, TdAnchorItemProps, TdAnchorTargetProps } from './type'; 6 | 7 | export const anchorDefaultProps: TdAnchorProps = { 8 | bounds: 5, 9 | container: () => window, 10 | size: 'medium', 11 | targetOffset: 0, 12 | }; 13 | 14 | export const anchorItemDefaultProps: Pick = { target: '_self' }; 15 | 16 | export const anchorTargetDefaultProps: Pick = { tag: 'div' }; 17 | -------------------------------------------------------------------------------- /packages/components/anchor/index.ts: -------------------------------------------------------------------------------- 1 | import _Anchor from './Anchor'; 2 | 3 | import './style/index.js'; 4 | 5 | export type { AnchorProps } from './Anchor'; 6 | export type { AnchorItemProps } from './AnchorItem'; 7 | export type { AnchorTargetProps } from './AnchorTarget'; 8 | export * from './type'; 9 | 10 | export const Anchor = _Anchor; 11 | export default Anchor; 12 | -------------------------------------------------------------------------------- /packages/components/anchor/style/css.js: -------------------------------------------------------------------------------- 1 | import './index.css'; 2 | -------------------------------------------------------------------------------- /packages/components/anchor/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../../common/style/web/components/anchor/_index.less'; 2 | -------------------------------------------------------------------------------- /packages/components/auto-complete/defaultProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC 3 | * */ 4 | 5 | import { TdAutoCompleteProps } from './type'; 6 | 7 | export const autoCompleteDefaultProps: TdAutoCompleteProps = { 8 | borderless: false, 9 | filterable: true, 10 | highlightKeyword: true, 11 | placeholder: undefined, 12 | size: 'medium', 13 | status: 'default', 14 | }; 15 | -------------------------------------------------------------------------------- /packages/components/auto-complete/index.ts: -------------------------------------------------------------------------------- 1 | import _AutoComplete from './AutoComplete'; 2 | import _HighlightOption, { TdHighlightOptionProps } from './HighlightOption'; 3 | 4 | import './style/index.js'; 5 | 6 | export * from './type'; 7 | 8 | export type { AutoCompleteProps } from './AutoComplete'; 9 | 10 | export type HighlightOptionProps = TdHighlightOptionProps; 11 | 12 | export const AutoComplete = _AutoComplete; 13 | 14 | export const HighlightOption = _HighlightOption; 15 | 16 | export default AutoComplete; 17 | -------------------------------------------------------------------------------- /packages/components/auto-complete/style/css.js: -------------------------------------------------------------------------------- 1 | import './index.css'; 2 | -------------------------------------------------------------------------------- /packages/components/auto-complete/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../../common/style/web/components/auto-complete/_index.less'; 2 | -------------------------------------------------------------------------------- /packages/components/avatar/AvatarContext.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const AvatarContext = React.createContext('default'); 4 | 5 | export interface AvatarContextProps { 6 | size?: string; 7 | children?: React.ReactNode; 8 | } 9 | 10 | export const AvatarContextProvider: React.FC = ({ children, size }) => ( 11 | 12 | {(inputSize) => {children}} 13 | 14 | ); 15 | 16 | export default AvatarContext; 17 | -------------------------------------------------------------------------------- /packages/components/avatar/_example/adjust.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Avatar, Space } from 'tdesign-react'; 3 | 4 | export default function AdjustAvatar() { 5 | return ( 6 | 7 | 王 8 | 王亿 9 | 王亿亿 10 | 11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /packages/components/avatar/_example/base.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Avatar, Space } from 'tdesign-react'; 3 | import { UserIcon } from 'tdesign-icons-react'; 4 | 5 | export default function BasicAvatar() { 6 | return ( 7 | 8 | } style={{ marginRight: '40px' }} /> 9 | 14 | W 15 | 16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /packages/components/avatar/_example/shape.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Avatar, Space } from 'tdesign-react'; 3 | 4 | export default function ShapeAvatar() { 5 | return ( 6 | 7 | W 8 | 9 | W 10 | 11 | 12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /packages/components/avatar/_usage/props.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "name": "hideOnLoadFailed", 4 | "type": "Boolean", 5 | "defaultValue": false, 6 | "options": [] 7 | }, 8 | { 9 | "name": "shape", 10 | "type": "enum", 11 | "defaultValue": "circle", 12 | "options": [ 13 | { 14 | "label": "circle", 15 | "value": "circle" 16 | }, 17 | { 18 | "label": "round", 19 | "value": "round" 20 | } 21 | ] 22 | } 23 | ] -------------------------------------------------------------------------------- /packages/components/avatar/defaultProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC 3 | * */ 4 | 5 | import { TdAvatarProps, TdAvatarGroupProps } from './type'; 6 | 7 | export const avatarDefaultProps: TdAvatarProps = { hideOnLoadFailed: false, shape: 'circle' }; 8 | 9 | export const avatarGroupDefaultProps: TdAvatarGroupProps = { cascading: 'right-up' }; 10 | -------------------------------------------------------------------------------- /packages/components/avatar/index.ts: -------------------------------------------------------------------------------- 1 | import _Avatar from './Avatar'; 2 | import _AvatarGroup from './AvatarGroup'; 3 | 4 | import './style/index.js'; 5 | 6 | export type { AvatarProps } from './Avatar'; 7 | export type { AvatarGroupProps } from './AvatarGroup'; 8 | export * from './type'; 9 | 10 | export const AvatarGroup = _AvatarGroup; 11 | export const Avatar = _Avatar; 12 | export default Avatar; 13 | -------------------------------------------------------------------------------- /packages/components/avatar/style/css.js: -------------------------------------------------------------------------------- 1 | import './index.css'; 2 | -------------------------------------------------------------------------------- /packages/components/avatar/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../../common/style/web/components/avatar/_index.less'; 2 | -------------------------------------------------------------------------------- /packages/components/back-top/defaultProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC 3 | * */ 4 | 5 | import { TdBackTopProps } from './type'; 6 | 7 | export const backTopDefaultProps: TdBackTopProps = { 8 | container: 'body', 9 | duration: 200, 10 | offset: ['24px', '80px'], 11 | shape: 'square', 12 | size: 'medium', 13 | target: 'body', 14 | theme: 'light', 15 | visibleHeight: '200px', 16 | }; 17 | -------------------------------------------------------------------------------- /packages/components/back-top/index.ts: -------------------------------------------------------------------------------- 1 | import _BackTop from './BackTop'; 2 | 3 | import './style/index.js'; 4 | 5 | export type { BackTopProps } from './BackTop'; 6 | 7 | export const BackTop = _BackTop; 8 | 9 | export default BackTop; 10 | -------------------------------------------------------------------------------- /packages/components/back-top/style/css.js: -------------------------------------------------------------------------------- 1 | import './index.css'; 2 | -------------------------------------------------------------------------------- /packages/components/back-top/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../../common/style/web/components/back-top/_index.less'; 2 | -------------------------------------------------------------------------------- /packages/components/badge/_example/base.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Badge, Button } from 'tdesign-react'; 3 | import { UserIcon } from 'tdesign-icons-react'; 4 | 5 | export default function BadgeExample() { 6 | return ( 7 | <> 8 | 9 | 10 | 11 | 12 | 解锁新徽章 13 | 14 | 15 | 16 | 17 | 18 | ); 19 | } 20 | -------------------------------------------------------------------------------- /packages/components/badge/_example/number.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Badge, Button } from 'tdesign-react'; 3 | 4 | export default function BadgeExample() { 5 | return ( 6 | <> 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | ); 18 | } 19 | -------------------------------------------------------------------------------- /packages/components/badge/_example/shape.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Badge, Button } from 'tdesign-react'; 3 | 4 | export default function BadgeExample() { 5 | return ( 6 | <> 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | ); 15 | } 16 | -------------------------------------------------------------------------------- /packages/components/badge/defaultProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC 3 | * */ 4 | 5 | import { TdBadgeProps } from './type'; 6 | 7 | export const badgeDefaultProps: TdBadgeProps = { 8 | count: 0, 9 | dot: false, 10 | maxCount: 99, 11 | shape: 'circle', 12 | showZero: false, 13 | size: 'medium', 14 | }; 15 | -------------------------------------------------------------------------------- /packages/components/badge/index.ts: -------------------------------------------------------------------------------- 1 | import _Badge from './Badge'; 2 | 3 | import './style/index.js'; 4 | 5 | export type { BadgeProps } from './Badge'; 6 | export * from './type'; 7 | 8 | export const Badge = _Badge; 9 | export default Badge; 10 | -------------------------------------------------------------------------------- /packages/components/badge/style/css.js: -------------------------------------------------------------------------------- 1 | import './index.css'; 2 | -------------------------------------------------------------------------------- /packages/components/badge/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../../common/style/web/components/badge/_index.less'; 2 | -------------------------------------------------------------------------------- /packages/components/breadcrumb/BreadcrumbContext.tsx: -------------------------------------------------------------------------------- 1 | import { createContext } from 'react'; 2 | import { TdBreadcrumbProps } from './type'; 3 | 4 | export interface BreadcrumbContextType { 5 | maxItemWidthInContext: string; 6 | separator: TdBreadcrumbProps['separator']; 7 | } 8 | 9 | export const BreadcrumbContext = createContext({ 10 | maxItemWidthInContext: '', 11 | separator: null, 12 | }); 13 | -------------------------------------------------------------------------------- /packages/components/breadcrumb/BreadcrumbProps.ts: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyledProps } from '../common'; 3 | import { TdBreadcrumbItemProps, TdBreadcrumbProps } from './type'; 4 | 5 | export interface BreadcrumbProps extends StyledProps, React.PropsWithChildren {} 6 | 7 | export interface BreadcrumbItemProps extends StyledProps, React.PropsWithChildren { 8 | separator?: TdBreadcrumbProps['separator']; 9 | maxItemWidth?: TdBreadcrumbProps['maxItemWidth']; 10 | readOnly?: boolean; 11 | } 12 | -------------------------------------------------------------------------------- /packages/components/breadcrumb/_example/base.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Breadcrumb } from 'tdesign-react'; 3 | 4 | const { BreadcrumbItem } = Breadcrumb; 5 | 6 | export default function BreadcrumbExample() { 7 | return ( 8 | 9 | 页面1 10 | 页面2页面2页面2页面2页面2页面2页面2页面2 11 | 12 | 页面3页面3页面3页面3页面3页面3页面3页面3页面3页面3页面3页面3页面3页面3页面3 13 | 14 | 15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /packages/components/breadcrumb/_example/icon.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Breadcrumb } from 'tdesign-react'; 3 | import { BookmarkIcon } from 'tdesign-icons-react'; 4 | 5 | const { BreadcrumbItem } = Breadcrumb; 6 | 7 | export default function BreadcrumbExample() { 8 | return ( 9 | 10 | }>页面1 11 | }>页面2 12 | }>页面3 13 | 14 | ); 15 | } 16 | -------------------------------------------------------------------------------- /packages/components/breadcrumb/_example/options.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Breadcrumb } from 'tdesign-react'; 3 | 4 | export default function BreadcrumbExample() { 5 | const options = [{ content: '页面1' }, { content: '页面2' }, { content: '页面3', href: 'https://github.com/' }]; 6 | return ; 7 | } 8 | -------------------------------------------------------------------------------- /packages/components/breadcrumb/_example/to.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Breadcrumb } from 'tdesign-react'; 3 | 4 | const { BreadcrumbItem } = Breadcrumb; 5 | 6 | export default function BreadcrumbExample() { 7 | return ( 8 | 9 | 首页 10 | 页面1 11 | 12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /packages/components/breadcrumb/_usage/props.json: -------------------------------------------------------------------------------- 1 | [] -------------------------------------------------------------------------------- /packages/components/breadcrumb/defaultProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC 3 | * */ 4 | 5 | import { TdBreadcrumbProps, TdBreadcrumbItemProps } from './type'; 6 | 7 | export const breadcrumbDefaultProps: TdBreadcrumbProps = { maxItemWidth: undefined }; 8 | 9 | export const breadcrumbItemDefaultProps: TdBreadcrumbItemProps = { 10 | maxWidth: undefined, 11 | replace: false, 12 | target: '_self', 13 | }; 14 | -------------------------------------------------------------------------------- /packages/components/breadcrumb/index.ts: -------------------------------------------------------------------------------- 1 | import _Breadcrumb from './Breadcrumb'; 2 | 3 | import './style/index.js'; 4 | 5 | export type { BreadcrumbProps, BreadcrumbItemProps } from './BreadcrumbProps'; 6 | export * from './type'; 7 | 8 | export const Breadcrumb = _Breadcrumb; 9 | export default Breadcrumb; 10 | -------------------------------------------------------------------------------- /packages/components/breadcrumb/style/css.js: -------------------------------------------------------------------------------- 1 | import './index.css'; 2 | -------------------------------------------------------------------------------- /packages/components/breadcrumb/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../../common/style/web/components/breadcrumb/_index.less'; 2 | -------------------------------------------------------------------------------- /packages/components/button/_example/base.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Button, Space } from 'tdesign-react'; 3 | 4 | export default function ButtonExample() { 5 | return ( 6 | 7 | 10 | 13 | 16 | 19 | 20 | ); 21 | } 22 | -------------------------------------------------------------------------------- /packages/components/button/_example/block.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Button, Space } from 'tdesign-react'; 3 | 4 | export default function ButtonExample() { 5 | return ( 6 | 7 | 10 | 13 | 16 | 19 | 20 | ); 21 | } 22 | -------------------------------------------------------------------------------- /packages/components/button/_example/custom-element.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Button, Space } from 'tdesign-react'; 3 | 4 | export default function ButtonExample() { 5 | return ( 6 | 7 | 8 | 9 | 10 | 11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /packages/components/button/_example/status.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Button, Space } from 'tdesign-react'; 3 | 4 | export default function ButtonExample() { 5 | return ( 6 | 7 | 8 | 9 | 10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /packages/components/button/defaultProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC 3 | * */ 4 | 5 | import { TdButtonProps } from './type'; 6 | 7 | export const buttonDefaultProps: TdButtonProps = { 8 | block: false, 9 | disabled: false, 10 | form: undefined, 11 | ghost: false, 12 | loading: false, 13 | shape: 'rectangle', 14 | size: 'medium', 15 | type: 'button', 16 | variant: 'base', 17 | }; 18 | -------------------------------------------------------------------------------- /packages/components/button/index.ts: -------------------------------------------------------------------------------- 1 | import _Button from './Button'; 2 | 3 | import './style/index.js'; 4 | 5 | export type { ButtonProps } from './Button'; 6 | export * from './type'; 7 | 8 | export const Button = _Button; 9 | export default Button; 10 | -------------------------------------------------------------------------------- /packages/components/button/style/css.js: -------------------------------------------------------------------------------- 1 | import './index.css'; 2 | -------------------------------------------------------------------------------- /packages/components/button/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../../common/style/web/components/button/_index.less'; 2 | -------------------------------------------------------------------------------- /packages/components/calendar/_example/base.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Calendar } from 'tdesign-react'; 3 | 4 | export default function CalendarExample() { 5 | return ; 6 | } 7 | -------------------------------------------------------------------------------- /packages/components/calendar/_example/filter.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Switch, Calendar } from 'tdesign-react'; 3 | 4 | export default function CalendarExample() { 5 | const [isShowWeekendDefault, setIsShowWeekendDefault] = React.useState(true); 6 | 7 | return ( 8 |

9 |
10 | 11 | setIsShowWeekendDefault(val)} /> 12 |
13 | 14 |
15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /packages/components/calendar/_example/head.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Calendar } from 'tdesign-react'; 3 | 4 | export default function CalendarExample() { 5 | return 🗓 TDesign开发计划} />; 6 | } 7 | -------------------------------------------------------------------------------- /packages/components/calendar/_example/range.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Calendar } from 'tdesign-react'; 3 | 4 | export default function CalendarExample() { 5 | const range = [ 6 | '2018-08', // new Date(2018, 7), 7 | '2027-04', // new Date(2027, 3), 8 | ]; 9 | return ; 10 | } 11 | -------------------------------------------------------------------------------- /packages/components/calendar/_example/value.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Calendar } from 'tdesign-react'; 3 | 4 | export default function CalendarExample() { 5 | const value = '1998-11-11'; // new Date(1998, 10, 11) 6 | return ; 7 | } 8 | -------------------------------------------------------------------------------- /packages/components/calendar/_example/week.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Calendar } from 'tdesign-react'; 3 | import type { CalendarWeek } from 'tdesign-react'; 4 | 5 | export default function CalendarExample() { 6 | const getWeekText = React.useCallback((calendarWeek: CalendarWeek) => { 7 | const output = `星期${calendarWeek.day}`; 8 | return output; 9 | }, []); 10 | 11 | return
{getWeekText(calendarWeek)}
} />; 12 | } 13 | -------------------------------------------------------------------------------- /packages/components/calendar/defaultProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC 3 | * */ 4 | 5 | import { TdCalendarProps } from './type'; 6 | 7 | export const calendarDefaultProps: TdCalendarProps = { 8 | format: 'YYYY-MM-DD', 9 | isShowWeekendDefault: true, 10 | mode: 'month', 11 | preventCellContextmenu: false, 12 | theme: 'full', 13 | }; 14 | -------------------------------------------------------------------------------- /packages/components/calendar/index.ts: -------------------------------------------------------------------------------- 1 | import _Calendar from './Calendar'; 2 | 3 | import './style/index.js'; 4 | 5 | export type { CalendarProps, CalendarMethods } from './Calendar'; 6 | export * from './type'; 7 | 8 | export const Calendar = _Calendar; 9 | export default Calendar; 10 | -------------------------------------------------------------------------------- /packages/components/calendar/style/css.js: -------------------------------------------------------------------------------- 1 | import './index.css'; 2 | -------------------------------------------------------------------------------- /packages/components/calendar/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../../common/style/web/components/calendar/_index.less'; 2 | -------------------------------------------------------------------------------- /packages/components/card/_example/base.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Card } from 'tdesign-react'; 3 | 4 | export default function BasicCard() { 5 | return ( 6 | 7 | 仅有内容区域的卡片形式。卡片内容区域可以是文字、图片、表单、表格等形式信息内容。可使用大中小不同的卡片尺寸，按业务需求进行呈现。 8 | 9 | ); 10 | } 11 | -------------------------------------------------------------------------------- /packages/components/card/_example/bordered.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Card } from 'tdesign-react'; 3 | 4 | export default function BorderedCard() { 5 | return ( 6 | 7 | 仅有内容区域的卡片形式。卡片内容区域可以是文字、图片、表单、表格等形式信息内容。可使用大中小不同的卡片尺寸，按业务需求进行呈现。 8 | 9 | ); 10 | } 11 | -------------------------------------------------------------------------------- /packages/components/card/_example/custom-loading-props.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Card } from 'tdesign-react'; 3 | 4 | export default function CustomLoadingProps() { 5 | const customProps = { 6 | text: 'TDesign努力加载中...', 7 | }; 8 | 9 | return ( 10 | 11 | 仅有内容区域的卡片形式。卡片内容区域可以是文字、图片、表单、表格等形式信息内容。可使用大中小不同的卡片尺寸，按业务需求进行呈现。 12 | 13 | ); 14 | } 15 | -------------------------------------------------------------------------------- /packages/components/card/_example/footer-content.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Card, Comment } from 'tdesign-react'; 3 | 4 | export default function FooterContentCard() { 5 | return ( 6 | 13 | } 14 | > 15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /packages/components/card/_example/header-all-props.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Card } from 'tdesign-react'; 3 | 4 | export default function HeaderAllPropsCard() { 5 | return ( 6 | 15 | 卡片内容，以描述性为主，可以是文字、图片或图文组合的形式。按业务需求进行自定义组合。 16 | 17 | ); 18 | } 19 | -------------------------------------------------------------------------------- /packages/components/card/_example/header-description.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Card } from 'tdesign-react'; 3 | 4 | export default function HeaderDescriptionCard() { 5 | return ( 6 | 7 | 卡片内容，以描述性为主，可以是文字、图片或图文组合的形式。按业务需求进行自定义组合。 8 | 9 | ); 10 | } 11 | -------------------------------------------------------------------------------- /packages/components/card/_example/header-subtitle.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Card } from 'tdesign-react'; 3 | 4 | export default function HeaderSubtitleCard() { 5 | return ( 6 | 7 | 卡片内容，以描述性为主，可以是文字、图片或图文组合的形式。按业务需求进行自定义组合。 8 | 9 | ); 10 | } 11 | -------------------------------------------------------------------------------- /packages/components/card/defaultProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC 3 | * */ 4 | 5 | import { TdCardProps } from './type'; 6 | 7 | export const cardDefaultProps: TdCardProps = { 8 | bordered: true, 9 | headerBordered: false, 10 | hoverShadow: false, 11 | loading: false, 12 | shadow: false, 13 | size: 'medium', 14 | theme: 'normal', 15 | }; 16 | -------------------------------------------------------------------------------- /packages/components/card/index.ts: -------------------------------------------------------------------------------- 1 | import _Card from './Card'; 2 | 3 | import './style/index.js'; 4 | 5 | export type { CardProps } from './Card'; 6 | 7 | export const Card = _Card; 8 | 9 | export default Card; 10 | -------------------------------------------------------------------------------- /packages/components/card/style/css.js: -------------------------------------------------------------------------------- 1 | import './index.css'; 2 | -------------------------------------------------------------------------------- /packages/components/card/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../../common/style/web/components/card/_index.less'; 2 | -------------------------------------------------------------------------------- /packages/components/cascader/components/style/css.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.css'; 2 | -------------------------------------------------------------------------------- /packages/components/cascader/components/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.js'; 2 | -------------------------------------------------------------------------------- /packages/components/cascader/index.ts: -------------------------------------------------------------------------------- 1 | import _Cascader from './Cascader'; 2 | import _CascaderPanel from './CascaderPanel'; 3 | 4 | import './style/index.js'; 5 | 6 | export type { CascaderProps } from './Cascader'; 7 | export * from './type'; 8 | 9 | export const Cascader = _Cascader; 10 | export const CascaderPanel = _CascaderPanel; 11 | export default Cascader; 12 | -------------------------------------------------------------------------------- /packages/components/cascader/style/css.js: -------------------------------------------------------------------------------- 1 | import './index.css'; 2 | -------------------------------------------------------------------------------- /packages/components/cascader/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../../common/style/web/components/cascader/_index.less'; 2 | -------------------------------------------------------------------------------- /packages/components/checkbox/_example/base.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { Checkbox, Space } from 'tdesign-react'; 3 | 4 | export default function CheckboxExample() { 5 | const [value, setValue] = useState(true); 6 | 7 | return ( 8 | 9 | 未选中项 10 | 半选状态 11 | 12 | 选中项 13 | 14 | 未选禁用项 15 | 16 | 选中禁用项 17 | 18 | 19 | ); 20 | } 21 | -------------------------------------------------------------------------------- /packages/components/checkbox/_example/controlled.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { Checkbox, Space } from 'tdesign-react'; 3 | 4 | export default function CheckboxExample() { 5 | const [value, setValue] = useState(false); 6 | 7 | return ( 8 | 9 | 10 | 受控属性 11 | 12 | 非受控属性 13 | 14 | ); 15 | } 16 | -------------------------------------------------------------------------------- /packages/components/checkbox/defaultProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC 3 | * */ 4 | 5 | import { TdCheckboxProps, TdCheckboxGroupProps } from './type'; 6 | 7 | export const checkboxDefaultProps: TdCheckboxProps = { 8 | checkAll: false, 9 | defaultChecked: false, 10 | disabled: undefined, 11 | indeterminate: false, 12 | readonly: false, 13 | }; 14 | 15 | export const checkboxGroupDefaultProps: TdCheckboxGroupProps = { max: undefined, defaultValue: [] }; 16 | -------------------------------------------------------------------------------- /packages/components/checkbox/index.ts: -------------------------------------------------------------------------------- 1 | import _Checkbox from './Checkbox'; 2 | 3 | import './style/index.js'; 4 | 5 | export type { CheckboxProps } from './Checkbox'; 6 | export type { CheckboxGroupProps } from './CheckboxGroup'; 7 | export * from './type'; 8 | 9 | export const Checkbox = _Checkbox; 10 | export default Checkbox; 11 | -------------------------------------------------------------------------------- /packages/components/checkbox/style/css.js: -------------------------------------------------------------------------------- 1 | import './index.css'; 2 | -------------------------------------------------------------------------------- /packages/components/checkbox/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../../common/style/web/components/checkbox/_index.less'; 2 | -------------------------------------------------------------------------------- /packages/components/collapse/defaultProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC 3 | * */ 4 | 5 | import { TdCollapseProps, TdCollapsePanelProps } from './type'; 6 | 7 | export const collapseDefaultProps: TdCollapseProps = { 8 | borderless: false, 9 | defaultExpandAll: false, 10 | expandIcon: true, 11 | expandIconPlacement: 'left', 12 | expandMutex: false, 13 | expandOnRowClick: true, 14 | }; 15 | 16 | export const collapsePanelDefaultProps: TdCollapsePanelProps = { 17 | destroyOnCollapse: false, 18 | disabled: undefined, 19 | expandIcon: undefined, 20 | }; 21 | -------------------------------------------------------------------------------- /packages/components/collapse/index.ts: -------------------------------------------------------------------------------- 1 | import _Collapse from './Collapse'; 2 | 3 | import './style'; 4 | 5 | export type { CollapseProps } from './Collapse'; 6 | export * from './type'; 7 | 8 | export const Collapse = _Collapse; 9 | 10 | export default Collapse; 11 | -------------------------------------------------------------------------------- /packages/components/collapse/style/css.js: -------------------------------------------------------------------------------- 1 | import './index.css'; 2 | -------------------------------------------------------------------------------- /packages/components/collapse/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../../common/style/web/components/collapse/_index.less'; 2 | -------------------------------------------------------------------------------- /packages/components/color-picker/ColorPickerPanel.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ColorPanel from './components/panel'; 3 | import { ColorPickerProps } from './interface'; 4 | 5 | const ColorPickerPanel: React.FC = (props) => ( 6 | 7 | ); 8 | 9 | ColorPickerPanel.displayName = 'ColorPickerPanel'; 10 | 11 | export default React.memo(ColorPickerPanel); 12 | -------------------------------------------------------------------------------- /packages/components/color-picker/_example/enable-alpha.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { ColorPickerPanel } from 'tdesign-react'; 3 | import type { ColorPickerProps } from 'tdesign-react'; 4 | 5 | export default function EnableAlpha() { 6 | const [value, setValue] = useState('#0052D9CC'); 7 | 8 | const handleChange: ColorPickerProps['onChange'] = (value) => { 9 | setValue(value); 10 | }; 11 | 12 | return ; 13 | } 14 | -------------------------------------------------------------------------------- /packages/components/color-picker/_example/status-disabled.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ColorPicker } from 'tdesign-react'; 3 | 4 | export default function StatusDisabled() { 5 | const color = '#0052d9'; 6 | 7 | return ; 8 | } 9 | -------------------------------------------------------------------------------- /packages/components/color-picker/_example/status-readonly.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ColorPickerPanel } from 'tdesign-react'; 3 | 4 | export default function StatusReadonly() { 5 | const color = '#0052d9'; 6 | 7 | return ; 8 | } 9 | -------------------------------------------------------------------------------- /packages/components/color-picker/_example/trigger.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ColorPicker } from 'tdesign-react'; 3 | 4 | export default function PanelExample() { 5 | return ; 6 | } 7 | -------------------------------------------------------------------------------- /packages/components/color-picker/components/panel/format/style/css.js: -------------------------------------------------------------------------------- 1 | import '../../../../style/index.css'; 2 | -------------------------------------------------------------------------------- /packages/components/color-picker/components/panel/format/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../../../style/index.js'; 2 | -------------------------------------------------------------------------------- /packages/components/color-picker/components/panel/style/css.js: -------------------------------------------------------------------------------- 1 | import '../../../style/index.css'; 2 | -------------------------------------------------------------------------------- /packages/components/color-picker/components/panel/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../../style/index.js'; 2 | -------------------------------------------------------------------------------- /packages/components/color-picker/components/style/css.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.css'; 2 | -------------------------------------------------------------------------------- /packages/components/color-picker/components/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.js'; 2 | -------------------------------------------------------------------------------- /packages/components/color-picker/defaultProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC 3 | * */ 4 | 5 | import { TdColorPickerProps } from './type'; 6 | 7 | export const colorPickerDefaultProps: TdColorPickerProps = { 8 | borderless: false, 9 | clearable: false, 10 | colorModes: ['monochrome', 'linear-gradient'], 11 | disabled: undefined, 12 | enableAlpha: false, 13 | enableMultipleGradient: true, 14 | format: 'RGB', 15 | defaultRecentColors: [], 16 | showPrimaryColorPreview: true, 17 | swatchColors: undefined, 18 | }; 19 | -------------------------------------------------------------------------------- /packages/components/color-picker/hooks/useClassNames.ts: -------------------------------------------------------------------------------- 1 | import useConfig from '../../hooks/useConfig'; 2 | 3 | const useClassNames = () => { 4 | const { classPrefix } = useConfig(); 5 | const baseClassName = `${classPrefix}-color-picker`; 6 | return baseClassName; 7 | }; 8 | 9 | export default useClassNames; 10 | -------------------------------------------------------------------------------- /packages/components/color-picker/index.ts: -------------------------------------------------------------------------------- 1 | import _ColorPickerPanel from './ColorPickerPanel'; 2 | import _ColorPicker from './ColorPicker'; 3 | 4 | import './style'; 5 | 6 | export type { ColorPickerProps } from './interface'; 7 | export * from './type'; 8 | 9 | export const ColorPickerPanel = _ColorPickerPanel; 10 | export const ColorPicker = _ColorPicker; 11 | 12 | export default ColorPicker; 13 | -------------------------------------------------------------------------------- /packages/components/color-picker/style/css.js: -------------------------------------------------------------------------------- 1 | import './index.css'; 2 | -------------------------------------------------------------------------------- /packages/components/color-picker/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../../common/style/web/components/color-picker/_index.less'; 2 | -------------------------------------------------------------------------------- /packages/components/comment/_example/base.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Comment } from 'tdesign-react'; 3 | 4 | export default function BasicComment() { 5 | return ( 6 | 12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /packages/components/comment/_usage/props.json: -------------------------------------------------------------------------------- 1 | [] -------------------------------------------------------------------------------- /packages/components/comment/defaultProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC 3 | * */ 4 | 5 | import { TdCommentProps } from './type'; 6 | 7 | export const commentDefaultProps: TdCommentProps = {}; 8 | -------------------------------------------------------------------------------- /packages/components/comment/index.ts: -------------------------------------------------------------------------------- 1 | import _Comment from './Comment'; 2 | 3 | import './style/index.js'; 4 | 5 | export type { CommentProps } from './Comment'; 6 | export * from './type'; 7 | 8 | export const Comment = _Comment; 9 | 10 | export default Comment; 11 | -------------------------------------------------------------------------------- /packages/components/comment/style/css.js: -------------------------------------------------------------------------------- 1 | import './index.css'; 2 | -------------------------------------------------------------------------------- /packages/components/comment/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../../common/style/web/components/comment/_index.less'; 2 | -------------------------------------------------------------------------------- /packages/components/comment/type.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | 3 | /** 4 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC 5 | * */ 6 | 7 | import { TNode } from '../common'; 8 | 9 | export interface TdCommentProps { 10 | /** 11 | * 操作 12 | */ 13 | actions?: Array; 14 | /** 15 | * 作者 16 | */ 17 | author?: TNode; 18 | /** 19 | * 头像 20 | */ 21 | avatar?: TNode; 22 | /** 23 | * 内容 24 | */ 25 | content?: TNode; 26 | /** 27 | * 时间 28 | */ 29 | datetime?: TNode; 30 | /** 31 | * 引用 32 | */ 33 | quote?: TNode; 34 | /** 35 | * 回复 36 | */ 37 | reply?: TNode; 38 | } 39 | -------------------------------------------------------------------------------- /packages/components/common/PluginContainer.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ConfigProvider,{ ConfigProviderProps } from '../config-provider'; 3 | 4 | /** 5 | * 6 | * @param notSet 默认不传设置为true，函数是调用唤起组件不需要同步设置全局上下文信息 7 | * @returns 8 | */ 9 | const PluginContainer: React.FC = (props) => ( 10 | <> 11 | {props?.globalConfig?.isContextEffectPlugin ? ( 12 | 13 | {props?.children} 14 | 15 | ) : ( 16 | props?.children 17 | )} 18 | 19 | ); 20 | 21 | 22 | export default PluginContainer; 23 | -------------------------------------------------------------------------------- /packages/components/common/README.md: -------------------------------------------------------------------------------- 1 | # 公共组件 -------------------------------------------------------------------------------- /packages/components/common/__tests__/portal.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from '@test/utils'; 3 | import Portal from '../Portal'; 4 | 5 | describe('Portal', () => { 6 | test('Portal render', () => { 7 | const { unmount } = render( 8 | 9 |
Hello World
10 | , 11 | ); 12 | 13 | expect(document.querySelector('#portal')).not.toBeNull(); 14 | expect(document.querySelector('#portal')).toBeInTheDocument(); 15 | unmount(); 16 | expect(document.querySelector('#portal')).toBeNull(); 17 | }); 18 | }); 19 | -------------------------------------------------------------------------------- /packages/components/config-provider/index.ts: -------------------------------------------------------------------------------- 1 | import ConfigProvider, { merge } from './ConfigProvider'; 2 | import ConfigContext from './ConfigContext'; 3 | 4 | export type { Config, Locale } from './ConfigContext'; 5 | export type { ConfigProviderProps } from './ConfigProvider'; 6 | export * from './type'; 7 | 8 | export { ConfigContext, ConfigProvider, merge }; 9 | export default ConfigProvider; 10 | -------------------------------------------------------------------------------- /packages/components/date-picker/_example/cancel-range-limit.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { DateRangePicker, Space } from 'tdesign-react'; 3 | 4 | export default function CancelRangeLimitDatePicker() { 5 | return ( 6 | 7 | 8 | 9 | ); 10 | } 11 | -------------------------------------------------------------------------------- /packages/components/date-picker/_example/custom-icon.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { DatePicker, Space } from 'tdesign-react'; 3 | import type { DatePickerProps } from 'tdesign-react'; 4 | 5 | import { BrowseIcon, LockOnIcon } from 'tdesign-icons-react'; 6 | 7 | export default function YearDatePicker() { 8 | const handleChange: DatePickerProps['onChange'] = (value) => { 9 | console.log(value); 10 | }; 11 | 12 | return ( 13 | 14 | } suffixIcon={} onChange={handleChange} /> 15 | 16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /packages/components/date-picker/base/style/css.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.css'; 2 | -------------------------------------------------------------------------------- /packages/components/date-picker/base/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.js'; 2 | -------------------------------------------------------------------------------- /packages/components/date-picker/panel/style/css.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.css'; 2 | -------------------------------------------------------------------------------- /packages/components/date-picker/panel/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.js'; 2 | -------------------------------------------------------------------------------- /packages/components/date-picker/style/css.js: -------------------------------------------------------------------------------- 1 | import './index.css'; 2 | -------------------------------------------------------------------------------- /packages/components/date-picker/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../../common/style/web/components/date-picker/_index.less'; 2 | -------------------------------------------------------------------------------- /packages/components/descriptions/DescriptionsContext.tsx: -------------------------------------------------------------------------------- 1 | import { createContext } from 'react'; 2 | import { TdDescriptionsProps } from './type'; 3 | 4 | export type DescriptionsContextProps = TdDescriptionsProps; 5 | 6 | export const DescriptionsContext = createContext(null); 7 | -------------------------------------------------------------------------------- /packages/components/descriptions/DescriptionsItem.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { TdDescriptionsItemProps } from './type'; 3 | 4 | export type DescriptionsItemProps = TdDescriptionsItemProps & { children?: React.ReactNode }; 5 | 6 | const DescriptionsItem: React.FC = () => null; 7 | 8 | DescriptionsItem.displayName = 'DescriptionsItem'; 9 | 10 | export default DescriptionsItem; 11 | -------------------------------------------------------------------------------- /packages/components/descriptions/_example/items.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Descriptions } from 'tdesign-react'; 3 | 4 | export default function Items() { 5 | const items = [ 6 | { label: 'Name', content: 'TDesign' }, 7 | { label: , content: '139****0609' }, 8 | { label: 'Area', content:

China Tencent Headquarters

}, 9 | { label: Address, content: Shenzhen Penguin Island D1 4A Mail Center }, 10 | ]; 11 | return ; 12 | } 13 | -------------------------------------------------------------------------------- /packages/components/descriptions/defaultProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC 3 | * */ 4 | 5 | import { TdDescriptionsProps, TdDescriptionsItemProps } from './type'; 6 | 7 | export const descriptionsDefaultProps: TdDescriptionsProps = { 8 | bordered: false, 9 | column: 2, 10 | itemLayout: 'horizontal', 11 | layout: 'horizontal', 12 | size: 'medium', 13 | tableLayout: 'auto', 14 | }; 15 | 16 | export const descriptionsItemDefaultProps: TdDescriptionsItemProps = { span: 1 }; 17 | -------------------------------------------------------------------------------- /packages/components/descriptions/index.ts: -------------------------------------------------------------------------------- 1 | import _Descriptions from './Descriptions'; 2 | 3 | import './style/index.js'; 4 | 5 | export type { DescriptionsProps } from './Descriptions'; 6 | 7 | export const Descriptions = _Descriptions; 8 | 9 | export default Descriptions; 10 | -------------------------------------------------------------------------------- /packages/components/descriptions/style/css.js: -------------------------------------------------------------------------------- 1 | import './index.css'; 2 | -------------------------------------------------------------------------------- /packages/components/descriptions/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../../common/style/web/components/descriptions/_index.less'; 2 | -------------------------------------------------------------------------------- /packages/components/dialog/index.tsx: -------------------------------------------------------------------------------- 1 | import _Dialog from './Dialog'; 2 | import _DialogCard from './DialogCard'; 3 | import { DialogPlugin as _DialogPlugin } from './plugin'; 4 | 5 | import './style/index.js'; 6 | 7 | export type { DialogProps } from './Dialog'; 8 | export * from './type'; 9 | 10 | export const Dialog = _Dialog; 11 | export const DialogCard = _DialogCard; 12 | 13 | export const dialog = _DialogPlugin; 14 | export const DialogPlugin = _DialogPlugin; 15 | 16 | export default Dialog; 17 | -------------------------------------------------------------------------------- /packages/components/dialog/style/css.js: -------------------------------------------------------------------------------- 1 | import './index.css'; 2 | -------------------------------------------------------------------------------- /packages/components/dialog/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../../common/style/web/components/dialog/_index.less'; 2 | -------------------------------------------------------------------------------- /packages/components/dialog/utils.ts: -------------------------------------------------------------------------------- 1 | export function parseValueToPx(value) { 2 | if (typeof value === 'number') return `${value}px`; 3 | return value; 4 | } 5 | -------------------------------------------------------------------------------- /packages/components/divider/_example/vertical.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Divider } from 'tdesign-react'; 3 | 4 | export default function BasicDivider() { 5 | return ( 6 | <> 7 | 正直 8 | 9 | 进取 10 | 11 | 合作 12 | 13 | 创新 14 | 15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /packages/components/divider/defaultProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC 3 | * */ 4 | 5 | import { TdDividerProps } from './type'; 6 | 7 | export const dividerDefaultProps: TdDividerProps = { align: 'center', dashed: false, layout: 'horizontal' }; 8 | -------------------------------------------------------------------------------- /packages/components/divider/index.ts: -------------------------------------------------------------------------------- 1 | import _Divider from './Divider'; 2 | 3 | import './style/index.js'; 4 | 5 | export type { DividerProps } from './Divider'; 6 | export * from './type'; 7 | 8 | export const Divider = _Divider; 9 | export default Divider; 10 | -------------------------------------------------------------------------------- /packages/components/divider/style/css.js: -------------------------------------------------------------------------------- 1 | import './index.css'; 2 | -------------------------------------------------------------------------------- /packages/components/divider/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../../common/style/web/components/divider/_index.less'; 2 | -------------------------------------------------------------------------------- /packages/components/drawer/defaultProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC 3 | * */ 4 | 5 | import { TdDrawerProps } from './type'; 6 | 7 | export const drawerDefaultProps: TdDrawerProps = { 8 | closeOnEscKeydown: undefined, 9 | closeOnOverlayClick: undefined, 10 | closeBtn: true, 11 | destroyOnClose: false, 12 | footer: true, 13 | header: true, 14 | lazy: true, 15 | mode: 'overlay', 16 | placement: 'right', 17 | preventScrollThrough: true, 18 | showInAttachedElement: false, 19 | showOverlay: true, 20 | size: undefined, 21 | sizeDraggable: false, 22 | visible: false, 23 | }; 24 | -------------------------------------------------------------------------------- /packages/components/drawer/index.tsx: -------------------------------------------------------------------------------- 1 | import _Drawer from './Drawer'; 2 | import { DrawerPlugin as _DrawerPlugin } from './plugin'; 3 | 4 | import './style/index.js'; 5 | 6 | export type { DrawerProps } from './Drawer'; 7 | export * from './type'; 8 | 9 | export const Drawer = _Drawer; 10 | 11 | export const drawer = _DrawerPlugin; 12 | export const DrawerPlugin = _DrawerPlugin; 13 | 14 | export default Drawer; 15 | -------------------------------------------------------------------------------- /packages/components/drawer/style/css.js: -------------------------------------------------------------------------------- 1 | import './index.css'; 2 | -------------------------------------------------------------------------------- /packages/components/drawer/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../../common/style/web/components/drawer/_index.less'; 2 | -------------------------------------------------------------------------------- /packages/components/dropdown/defaultProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC 3 | * */ 4 | 5 | import { TdDropdownProps, TdDropdownItemProps } from './type'; 6 | 7 | export const dropdownDefaultProps: TdDropdownProps = { 8 | direction: 'right', 9 | hideAfterItemClick: true, 10 | maxColumnWidth: 100, 11 | maxHeight: 300, 12 | minColumnWidth: 10, 13 | placement: 'bottom-left', 14 | trigger: 'hover', 15 | }; 16 | 17 | export const dropdownItemDefaultProps: TdDropdownItemProps = { 18 | active: false, 19 | disabled: false, 20 | divider: false, 21 | theme: 'default', 22 | }; 23 | -------------------------------------------------------------------------------- /packages/components/dropdown/index.ts: -------------------------------------------------------------------------------- 1 | import _Dropdown from './Dropdown'; 2 | 3 | import './style/index.js'; 4 | 5 | export type { DropdownProps } from './Dropdown'; 6 | export * from './type'; 7 | 8 | export const Dropdown = _Dropdown; 9 | 10 | export default Dropdown; 11 | -------------------------------------------------------------------------------- /packages/components/dropdown/style/css.js: -------------------------------------------------------------------------------- 1 | import './index.css'; 2 | -------------------------------------------------------------------------------- /packages/components/dropdown/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../../common/style/web/components/dropdown/_index.less'; 2 | -------------------------------------------------------------------------------- /packages/components/empty/_example/base.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Empty } from 'tdesign-react'; 3 | 4 | export default function BasicGrid() { 5 | return ; 6 | } 7 | -------------------------------------------------------------------------------- /packages/components/empty/_example/descriptions.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Empty, Button } from 'tdesign-react'; 3 | 4 | export default function Operation() { 5 | function goToIndex() { 6 | console.log('go to index'); 7 | location.href = '/'; 8 | } 9 | return 返回首页} description="description" />; 10 | } 11 | -------------------------------------------------------------------------------- /packages/components/empty/_example/operation.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Empty, Button } from 'tdesign-react'; 3 | 4 | export default function Operation() { 5 | function goToIndex() { 6 | console.log('go to index'); 7 | location.href = '/'; 8 | } 9 | return 返回首页} />; 10 | } 11 | -------------------------------------------------------------------------------- /packages/components/empty/_example/status.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Empty, Row, Col } from 'tdesign-react'; 3 | 4 | export default function StatusExample() { 5 | return ( 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | ); 24 | } 25 | -------------------------------------------------------------------------------- /packages/components/empty/defaultProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC 3 | * */ 4 | 5 | import { TdEmptyProps } from './type'; 6 | 7 | export const emptyDefaultProps: TdEmptyProps = { size: 'medium', type: 'empty' }; 8 | -------------------------------------------------------------------------------- /packages/components/empty/index.ts: -------------------------------------------------------------------------------- 1 | import _Empty from './Empty'; 2 | import './style/index.js'; 3 | 4 | export type { EmptyProps } from './Empty'; 5 | 6 | export * from './type'; 7 | 8 | export const Empty = _Empty; 9 | export default Empty; 10 | -------------------------------------------------------------------------------- /packages/components/empty/style/css.js: -------------------------------------------------------------------------------- 1 | import './index.css'; 2 | -------------------------------------------------------------------------------- /packages/components/empty/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../../common/style/web/components/empty/_index.less'; 2 | -------------------------------------------------------------------------------- /packages/components/form/const.ts: -------------------------------------------------------------------------------- 1 | export const enum ValidateStatus { 2 | SUCCESS = 'success', 3 | WARNING = 'warning', 4 | ERROR = 'error', 5 | VALIDATING = 'validating', 6 | } 7 | -------------------------------------------------------------------------------- /packages/components/form/index.ts: -------------------------------------------------------------------------------- 1 | import _Form from './Form'; 2 | 3 | import './style/index.js'; 4 | 5 | export type { FormProps } from './Form'; 6 | export type { FormItemProps } from './FormItem'; 7 | export * from './type'; 8 | export * from './hooks/interface'; 9 | 10 | export const Form = _Form; 11 | export default Form; 12 | -------------------------------------------------------------------------------- /packages/components/form/style/css.js: -------------------------------------------------------------------------------- 1 | import './index.css'; 2 | -------------------------------------------------------------------------------- /packages/components/form/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../../common/style/web/components/form/_index.less'; 2 | -------------------------------------------------------------------------------- /packages/components/grid/defaultProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC 3 | * */ 4 | 5 | import { TdRowProps, TdColProps } from './type'; 6 | 7 | export const rowDefaultProps: TdRowProps = { align: 'top', gutter: 0, justify: 'start', tag: 'div' }; 8 | 9 | export const colDefaultProps: TdColProps = { offset: 0, order: 0, pull: 0, push: 0, tag: 'div' }; 10 | -------------------------------------------------------------------------------- /packages/components/grid/index.ts: -------------------------------------------------------------------------------- 1 | import _Row from './Row'; 2 | import _Col from './Col'; 3 | 4 | import './style/index.js'; 5 | 6 | export type { RowProps } from './Row'; 7 | export type { ColProps } from './Col'; 8 | export * from './type'; 9 | 10 | export const Row = _Row; 11 | export const Col = _Col; 12 | -------------------------------------------------------------------------------- /packages/components/grid/style/css.js: -------------------------------------------------------------------------------- 1 | import './index.css'; 2 | -------------------------------------------------------------------------------- /packages/components/grid/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../../common/style/web/components/grid/_index.less'; 2 | -------------------------------------------------------------------------------- /packages/components/guide/defaultProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC 3 | * */ 4 | 5 | import { TdGuideProps } from './type'; 6 | 7 | export const guideDefaultProps: TdGuideProps = { 8 | hideCounter: false, 9 | hidePrev: false, 10 | hideSkip: false, 11 | highlightPadding: 8, 12 | mode: 'popup', 13 | showOverlay: true, 14 | zIndex: 999999, 15 | }; 16 | -------------------------------------------------------------------------------- /packages/components/guide/index.ts: -------------------------------------------------------------------------------- 1 | import _Guide from './Guide'; 2 | 3 | import './style/index.js'; 4 | 5 | export type { GuideProps, GuideCrossProps, TdGuideStepProps } from './Guide'; 6 | export * from './type'; 7 | 8 | export const Guide = _Guide; 9 | export default Guide; 10 | -------------------------------------------------------------------------------- /packages/components/guide/style/css.js: -------------------------------------------------------------------------------- 1 | import './index.css'; 2 | -------------------------------------------------------------------------------- /packages/components/guide/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../../common/style/web/components/guide/_index.less'; 2 | -------------------------------------------------------------------------------- /packages/components/guide/utils/index.ts: -------------------------------------------------------------------------------- 1 | import { scrollToParentVisibleArea } from './getScrollParent'; 2 | import getRelativePosition from './getRelativePosition'; 3 | import getTargetElm from './getTargetElm'; 4 | import scrollToElm from './scrollToElm'; 5 | 6 | export { scrollToParentVisibleArea, getRelativePosition, getTargetElm, scrollToElm }; 7 | -------------------------------------------------------------------------------- /packages/components/hooks/useConfig.ts: -------------------------------------------------------------------------------- 1 | import { useContext } from 'react'; 2 | import ConfigContext from '../config-provider/ConfigContext'; 3 | import { GlobalConfigProvider } from '../config-provider/type'; 4 | 5 | // 获取全局 globalConfig 6 | export default (): GlobalConfigProvider => useContext(ConfigContext).globalConfig; 7 | -------------------------------------------------------------------------------- /packages/components/hooks/useDomRefCallback.ts: -------------------------------------------------------------------------------- 1 | import { useCallback, useState } from 'react'; 2 | 3 | // https://reactjs.org/docs/hooks-faq.html#how-can-i-measure-a-dom-node 4 | export default function useDomRefCallback(): [HTMLElement, React.Dispatch>] { 5 | const [refCurrent, setRefCurrent] = useState(); 6 | 7 | useCallback((dom: HTMLElement) => { 8 | if (dom) setRefCurrent(dom); 9 | 10 | // eslint-disable-next-line react-hooks/exhaustive-deps 11 | }, []); 12 | 13 | return [refCurrent, setRefCurrent]; 14 | } 15 | -------------------------------------------------------------------------------- /packages/components/hooks/useGlobalIcon.ts: -------------------------------------------------------------------------------- 1 | import useConfig from './useConfig'; 2 | import { IconConfig } from '../config-provider/type'; 3 | 4 | // 从 globalConfig 获取 icon 配置用于覆盖组件内置 icon 5 | export default function useGlobalIcon(tdIcon: IconConfig) { 6 | const { icon: globalIcon } = useConfig(); 7 | 8 | const resultIcon: IconConfig = {}; 9 | 10 | Object.keys(tdIcon).forEach((key) => { 11 | resultIcon[key] = globalIcon?.[key] || tdIcon[key]; 12 | }); 13 | 14 | return resultIcon; 15 | } 16 | -------------------------------------------------------------------------------- /packages/components/hooks/useIsFirstRender.ts: -------------------------------------------------------------------------------- 1 | import { useRef } from 'react'; 2 | 3 | const useIsFirstRender = () => { 4 | const isFirstRenderRef = useRef(true); 5 | 6 | if (isFirstRenderRef.current) { 7 | isFirstRenderRef.current = false; 8 | return true; 9 | } 10 | 11 | return isFirstRenderRef.current; 12 | }; 13 | 14 | export default useIsFirstRender; 15 | -------------------------------------------------------------------------------- /packages/components/hooks/useLatest.ts: -------------------------------------------------------------------------------- 1 | import { useRef } from 'react'; 2 | 3 | const useLatest = (value: T) => { 4 | const ref = useRef(value); 5 | ref.current = value; 6 | return ref; 7 | }; 8 | 9 | export default useLatest; 10 | -------------------------------------------------------------------------------- /packages/components/hooks/useLayoutEffect.ts: -------------------------------------------------------------------------------- 1 | import { useLayoutEffect, useEffect } from 'react'; 2 | import { canUseDocument } from '../_util/dom'; 3 | 4 | const useIsomorphicLayoutEffect = canUseDocument ? useLayoutEffect : useEffect; 5 | 6 | export default useIsomorphicLayoutEffect; 7 | -------------------------------------------------------------------------------- /packages/components/hooks/usePrevious.ts: -------------------------------------------------------------------------------- 1 | import { useEffect, useRef } from 'react'; 2 | 3 | // 缓存上一次的 state 用于前后比较 4 | export default function usePrevious(state: T): T | undefined { 5 | const ref = useRef(null); 6 | 7 | useEffect(() => { 8 | ref.current = state; 9 | }, [state]); 10 | 11 | return ref.current; 12 | } 13 | -------------------------------------------------------------------------------- /packages/components/hooks/usePropsRef.ts: -------------------------------------------------------------------------------- 1 | import { useEffect, useRef } from 'react'; 2 | 3 | export const usePropRef = (prop: T) => { 4 | const ref = useRef(prop); 5 | 6 | useEffect(() => { 7 | ref.current = prop; 8 | }, [prop]); 9 | 10 | return ref; 11 | }; 12 | -------------------------------------------------------------------------------- /packages/components/hooks/useSwitch.ts: -------------------------------------------------------------------------------- 1 | import { useState } from 'react'; 2 | import { usePersistFn } from './usePersistFn'; 3 | 4 | /** 5 | * 开关状态 6 | * @param initialState 7 | * @returns [state, actions] 8 | */ 9 | const useSwitch = (initialState = false) => { 10 | const [state, setState] = useState(initialState); 11 | 12 | return [ 13 | state, 14 | { 15 | on: usePersistFn(() => setState(true)), 16 | off: usePersistFn(() => setState(false)), 17 | set: setState, 18 | }, 19 | ] as const; 20 | }; 21 | 22 | export default useSwitch; 23 | -------------------------------------------------------------------------------- /packages/components/hooks/useUpdateEffect.ts: -------------------------------------------------------------------------------- 1 | import { useEffect } from 'react'; 2 | import type { DependencyList, EffectCallback } from 'react'; 3 | import useIsFirstRender from './useIsFirstRender'; 4 | 5 | const useUpdateEffect = (callback: EffectCallback, dependency: DependencyList) => { 6 | const isFirstRender = useIsFirstRender(); 7 | 8 | useEffect(() => { 9 | if (isFirstRender) return; 10 | 11 | return callback(); 12 | // eslint-disable-next-line react-hooks/exhaustive-deps 13 | }, dependency); 14 | }; 15 | 16 | export default useUpdateEffect; 17 | -------------------------------------------------------------------------------- /packages/components/hooks/useUpdateLayoutEffect.ts: -------------------------------------------------------------------------------- 1 | import type { DependencyList, EffectCallback } from 'react'; 2 | import useIsFirstRender from './useIsFirstRender'; 3 | import useIsomorphicLayoutEffect from './useLayoutEffect'; 4 | 5 | const useUpdateLayoutEffect = (callback: EffectCallback, dependency: DependencyList) => { 6 | const isFirstRender = useIsFirstRender(); 7 | 8 | useIsomorphicLayoutEffect(() => { 9 | if (isFirstRender) return; 10 | 11 | return callback(); 12 | // eslint-disable-next-line react-hooks/exhaustive-deps 13 | }, dependency); 14 | }; 15 | 16 | export default useUpdateLayoutEffect; 17 | -------------------------------------------------------------------------------- /packages/components/image-viewer/_example/button.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ImageViewer, Button } from 'tdesign-react'; 3 | 4 | import type { ImageViewerProps } from 'tdesign-react'; 5 | 6 | const img = 'https://tdesign.gtimg.com/demo/demo-image-1.png'; 7 | 8 | export default function BasicImageViewer() { 9 | const trigger: ImageViewerProps['trigger'] = ({ open }) => ; 10 | return ; 11 | } 12 | -------------------------------------------------------------------------------- /packages/components/image-viewer/defaultProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC 3 | * */ 4 | 5 | import { TdImageViewerProps } from './type'; 6 | 7 | export const imageViewerDefaultProps: TdImageViewerProps = { 8 | closeBtn: true, 9 | closeOnEscKeydown: true, 10 | draggable: undefined, 11 | images: [], 12 | defaultIndex: 0, 13 | mode: 'modal', 14 | navigationArrow: true, 15 | showOverlay: undefined, 16 | defaultVisible: false, 17 | }; 18 | -------------------------------------------------------------------------------- /packages/components/image-viewer/hooks/useMirror.ts: -------------------------------------------------------------------------------- 1 | // 镜像控制 2 | import { useCallback, useState } from 'react'; 3 | 4 | const useMirror = () => { 5 | const [mirror, setMirror] = useState(1); 6 | 7 | const onMirror = useCallback(() => { 8 | setMirror((mirror) => (mirror > 0 ? -1 : 1)); 9 | }, []); 10 | 11 | const onResetMirror = useCallback(() => setMirror(1), []); 12 | 13 | return { 14 | mirror, 15 | onResetMirror, 16 | onMirror, 17 | }; 18 | }; 19 | 20 | export default useMirror; 21 | -------------------------------------------------------------------------------- /packages/components/image-viewer/hooks/useViewerScale.ts: -------------------------------------------------------------------------------- 1 | import { ImageViewerScale } from '../type'; 2 | 3 | const useViewerScale = (viewerScale) => { 4 | const result: ImageViewerScale = { 5 | minWidth: 1000, 6 | minHeight: 1000, 7 | }; 8 | if (viewerScale?.minWidth !== undefined) result.minWidth = viewerScale.minWidth; 9 | if (viewerScale?.minHeight !== undefined) result.minHeight = viewerScale.minHeight; 10 | return result; 11 | }; 12 | 13 | export default useViewerScale; 14 | -------------------------------------------------------------------------------- /packages/components/image-viewer/index.ts: -------------------------------------------------------------------------------- 1 | import _ImageViewer from './ImageViewer'; 2 | 3 | import './style/index.js'; 4 | 5 | export type { ImageViewerProps } from './ImageViewer'; 6 | 7 | export const ImageViewer = _ImageViewer; 8 | 9 | export default ImageViewer; 10 | -------------------------------------------------------------------------------- /packages/components/image-viewer/style/css.js: -------------------------------------------------------------------------------- 1 | import './index.css'; 2 | -------------------------------------------------------------------------------- /packages/components/image-viewer/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../../common/style/web/components/image-viewer/_index.less'; 2 | -------------------------------------------------------------------------------- /packages/components/image/__tests__/mount.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from '@test/utils'; 3 | 4 | function ImageOverlay() { 5 | return
预览
6 | } 7 | 8 | export function getOverlayImageMount(Image, props, events) { 9 | return render( 10 | } 13 | {...props} 14 | {...events} 15 | > 16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /packages/components/image/_example/avif.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Image } from 'tdesign-react'; 3 | 4 | export default function AvifImage() { 5 | return ( 6 | 16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /packages/components/image/defaultProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC 3 | * */ 4 | 5 | import { TdImageProps } from './type'; 6 | 7 | export const imageDefaultProps: TdImageProps = { 8 | fit: 'fill', 9 | gallery: false, 10 | lazy: false, 11 | overlayTrigger: 'always', 12 | position: 'center', 13 | shape: 'square', 14 | }; 15 | -------------------------------------------------------------------------------- /packages/components/image/index.ts: -------------------------------------------------------------------------------- 1 | import _Image from './Image'; 2 | 3 | import './style/index.js'; 4 | 5 | export type { ImageProps } from './Image'; 6 | 7 | export const Image = _Image; 8 | 9 | export default Image; 10 | -------------------------------------------------------------------------------- /packages/components/image/style/css.js: -------------------------------------------------------------------------------- 1 | import './index.css'; 2 | -------------------------------------------------------------------------------- /packages/components/image/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../../common/style/web/components/image/_index.less'; 2 | -------------------------------------------------------------------------------- /packages/components/index-lib.ts: -------------------------------------------------------------------------------- 1 | import './style'; 2 | 3 | const ENV = process.env.NODE_ENV; 4 | if ( 5 | ENV !== 'test' && 6 | ENV !== 'production' && 7 | typeof console !== 'undefined' && 8 | console.warn && // eslint-disable-line no-console 9 | typeof window !== 'undefined' 10 | ) { 11 | // eslint-disable-next-line no-console 12 | console.warn('You are using a whole package of TDesign!'); 13 | } 14 | 15 | export * from './index'; 16 | -------------------------------------------------------------------------------- /packages/components/input-adornment/__tests__/input-adornment.test.tsx: -------------------------------------------------------------------------------- 1 | // import { render } from '@test/utils'; 2 | // import React from 'react'; 3 | // import InputAdornment from '../index'; 4 | 5 | // TODO 6 | describe('InputAdornment 组件测试', () => { 7 | test('dom', () => { 8 | expect(true).toBe(true); 9 | }); 10 | }); 11 | -------------------------------------------------------------------------------- /packages/components/input-adornment/index.ts: -------------------------------------------------------------------------------- 1 | import _InputAdornment from './InputAdornment'; 2 | 3 | import './style/index.js'; 4 | 5 | export * from './type'; 6 | export type { InputAdornmentProps } from './InputAdornment'; 7 | 8 | export const InputAdornment = _InputAdornment; 9 | 10 | export default _InputAdornment; 11 | -------------------------------------------------------------------------------- /packages/components/input-adornment/input-adornment.md: -------------------------------------------------------------------------------- 1 | :: BASE_DOC :: 2 | 3 | ## API 4 | ### InputAdornment Props 5 | 6 | 名称 | 类型 | 默认值 | 说明 | 必传 7 | -- | -- | -- | -- | -- 8 | className | String | - | 类名 | N 9 | style | Object | - | 样式，TS 类型：`React.CSSProperties` | N 10 | append | TNode | - | 后缀装饰。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N 11 | prepend | TNode | - | 前缀装饰。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N 12 | -------------------------------------------------------------------------------- /packages/components/input-adornment/style/css.js: -------------------------------------------------------------------------------- 1 | import './index.css'; 2 | -------------------------------------------------------------------------------- /packages/components/input-adornment/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../../common/style/web/components/input-adornment/_index.less'; 2 | -------------------------------------------------------------------------------- /packages/components/input-adornment/type.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | 3 | /** 4 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC 5 | * */ 6 | 7 | import { TNode } from '../common'; 8 | 9 | export interface TdInputAdornmentProps { 10 | /** 11 | * 后缀装饰 12 | */ 13 | append?: TNode; 14 | /** 15 | * 前缀装饰 16 | */ 17 | prepend?: TNode; 18 | } 19 | -------------------------------------------------------------------------------- /packages/components/input-number/_example/auto-width.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { InputNumber } from 'tdesign-react'; 3 | 4 | export default function InputNumberAutoWidthExample() { 5 | return ; 6 | } 7 | -------------------------------------------------------------------------------- /packages/components/input-number/_example/default.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { InputNumber } from 'tdesign-react'; 3 | 4 | export default function InputNumberExample() { 5 | return ; 6 | } 7 | -------------------------------------------------------------------------------- /packages/components/input-number/_example/large-number.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { InputNumber, Space } from 'tdesign-react'; 3 | 4 | export default function InputNumberExample() { 5 | return ( 6 | 7 | 14 | 15 | 16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /packages/components/input-number/_example/left.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { InputNumber } from 'tdesign-react'; 3 | 4 | export default function InputNumberExample() { 5 | return console.log(v)} />; 6 | } 7 | -------------------------------------------------------------------------------- /packages/components/input-number/_example/step.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { InputNumber, InputNumberValue } from 'tdesign-react'; 3 | 4 | export default function InputNumberExample() { 5 | const [value, setValue] = useState(3.2); 6 | 7 | return ; 8 | } 9 | -------------------------------------------------------------------------------- /packages/components/input-number/defaultProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC 3 | * */ 4 | 5 | import { TdInputNumberProps } from './type'; 6 | 7 | export const inputNumberDefaultProps: TdInputNumberProps = { 8 | allowInputOverLimit: true, 9 | autoWidth: false, 10 | decimalPlaces: undefined, 11 | disabled: undefined, 12 | largeNumber: false, 13 | max: Infinity, 14 | min: -Infinity, 15 | placeholder: undefined, 16 | readonly: undefined, 17 | size: 'medium', 18 | status: 'default', 19 | step: 1, 20 | theme: 'row', 21 | }; 22 | -------------------------------------------------------------------------------- /packages/components/input-number/index.ts: -------------------------------------------------------------------------------- 1 | import _InputNumber from './InputNumber'; 2 | 3 | import './style/index.js'; 4 | 5 | export type { InputNumberProps } from './InputNumber'; 6 | export * from './type'; 7 | 8 | export const InputNumber = _InputNumber; 9 | export default InputNumber; 10 | -------------------------------------------------------------------------------- /packages/components/input-number/style/css.js: -------------------------------------------------------------------------------- 1 | import './index.css'; 2 | -------------------------------------------------------------------------------- /packages/components/input-number/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../../common/style/web/components/input-number/_index.less'; 2 | -------------------------------------------------------------------------------- /packages/components/input/__tests__/mount.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from '@test/utils'; 3 | import { Input } from '..'; 4 | 5 | export function getInputGroupDefaultMount(InputGroup, props) { 6 | return render( 7 | 8 | 9 | 10 | , 11 | ); 12 | } 13 | 14 | export default getInputGroupDefaultMount; 15 | -------------------------------------------------------------------------------- /packages/components/input/_example/align.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Input, Space } from 'tdesign-react'; 3 | 4 | export default function InputExample() { 5 | return ( 6 | 7 | 8 | 9 | 10 | 11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /packages/components/input/_example/auto-width.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Input } from 'tdesign-react'; 3 | 4 | export default function InputAutoWidth() { 5 | return ( 6 |
7 | 8 |
9 | ); 10 | } 11 | -------------------------------------------------------------------------------- /packages/components/input/_example/borderless.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Input, Space } from 'tdesign-react'; 3 | 4 | export default function BorderlessInputExample() { 5 | return ( 6 | 7 | 8 | 9 | 10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /packages/components/input/_example/clearable.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { Input } from 'tdesign-react'; 3 | 4 | export default function InputExample() { 5 | const [value, onChange] = useState('Hello TDesign'); 6 | return ( 7 | { 12 | onChange(value); 13 | }} 14 | onClear={() => { 15 | console.log('onClear'); 16 | }} 17 | /> 18 | ); 19 | } 20 | -------------------------------------------------------------------------------- /packages/components/input/_example/disabled.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Input } from 'tdesign-react'; 3 | 4 | export default function InputExample() { 5 | return ; 6 | } 7 | -------------------------------------------------------------------------------- /packages/components/input/_example/textarea.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { Input } from 'tdesign-react'; 3 | import { SearchIcon, ErrorCircleFilledIcon } from 'tdesign-icons-react'; 4 | 5 | export default function InputExample() { 6 | const [value, onChange] = useState(''); 7 | return ( 8 | } 10 | suffixIcon={} 11 | placeholder="请输入内容" 12 | value={value} 13 | onChange={(value) => { 14 | onChange(value); 15 | }} 16 | /> 17 | ); 18 | } 19 | -------------------------------------------------------------------------------- /packages/components/input/index.ts: -------------------------------------------------------------------------------- 1 | import _Input from './Input'; 2 | import _InputGroup from './InputGroup'; 3 | 4 | import './style/index.js'; 5 | 6 | export type { InputProps, InputRef } from './Input'; 7 | export type { InputGroupProps } from './InputGroup'; 8 | export * from './type'; 9 | 10 | export const Input = _Input; 11 | export const InputGroup = _InputGroup; 12 | export default Input; 13 | -------------------------------------------------------------------------------- /packages/components/input/style/css.js: -------------------------------------------------------------------------------- 1 | import './index.css'; 2 | -------------------------------------------------------------------------------- /packages/components/input/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../../common/style/web/components/input/_index.less'; 2 | -------------------------------------------------------------------------------- /packages/components/layout/_usage/props.json: -------------------------------------------------------------------------------- 1 | [] -------------------------------------------------------------------------------- /packages/components/layout/defaultProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC 3 | * */ 4 | 5 | import { TdAsideProps, TdFooterProps, TdHeaderProps, TdLayoutProps } from './type'; 6 | 7 | export const asideDefaultProps: TdAsideProps = {}; 8 | 9 | export const footerDefaultProps: TdFooterProps = {}; 10 | 11 | export const headerDefaultProps: TdHeaderProps = {}; 12 | 13 | export const layoutDefaultProps: TdLayoutProps = {}; 14 | -------------------------------------------------------------------------------- /packages/components/layout/index.ts: -------------------------------------------------------------------------------- 1 | import _Layout from './Layout'; 2 | 3 | import './style/index.js'; 4 | 5 | export type { LayoutProps } from './Layout'; 6 | export * from './type'; 7 | 8 | export const Layout = _Layout; 9 | export default Layout; 10 | -------------------------------------------------------------------------------- /packages/components/layout/style/css.js: -------------------------------------------------------------------------------- 1 | import './index.css'; 2 | -------------------------------------------------------------------------------- /packages/components/layout/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../../common/style/web/components/layout/_index.less'; 2 | -------------------------------------------------------------------------------- /packages/components/link/_example/base.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Link } from 'tdesign-react'; 3 | 4 | export default function LinkExample() { 5 | return 跳转链接; 6 | } 7 | -------------------------------------------------------------------------------- /packages/components/link/_example/theme.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Space, Link } from 'tdesign-react'; 3 | 4 | export default function LinkExample() { 5 | return ( 6 | 7 | 跳转链接 8 | 跳转链接 9 | 跳转链接 10 | 跳转链接 11 | 跳转链接 12 | 13 | ); 14 | } 15 | -------------------------------------------------------------------------------- /packages/components/link/defaultProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC 3 | * */ 4 | 5 | import { TdLinkProps } from './type'; 6 | 7 | export const linkDefaultProps: TdLinkProps = { hover: 'underline', size: 'medium', theme: 'default' }; 8 | -------------------------------------------------------------------------------- /packages/components/link/index.ts: -------------------------------------------------------------------------------- 1 | import _Link from './Link'; 2 | 3 | import './style/index.js'; 4 | 5 | export type { LinkProps } from './Link'; 6 | 7 | export const Link = _Link; 8 | 9 | export default Link; 10 | -------------------------------------------------------------------------------- /packages/components/link/style/css.js: -------------------------------------------------------------------------------- 1 | import './index.css'; 2 | -------------------------------------------------------------------------------- /packages/components/link/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../../common/style/web/components/link/_index.less'; 2 | -------------------------------------------------------------------------------- /packages/components/list/_example/stripe.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { List } from 'tdesign-react'; 3 | 4 | const { ListItem } = List; 5 | 6 | export default function BasicList() { 7 | const listData = [ 8 | { id: 1, content: '列表内容列表内容列表内容' }, 9 | { id: 2, content: '列表内容列表内容列表内容' }, 10 | { id: 3, content: '列表内容列表内容列表内容' }, 11 | { id: 4, content: '列表内容列表内容列表内容' }, 12 | ]; 13 | return ( 14 | 15 | {listData.map((item) => ( 16 | {item.content} 17 | ))} 18 | 19 | ); 20 | } 21 | -------------------------------------------------------------------------------- /packages/components/list/defaultProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC 3 | * */ 4 | 5 | import { TdListProps, TdListItemProps, TdListItemMetaProps } from './type'; 6 | 7 | export const listDefaultProps: TdListProps = { layout: 'horizontal', size: 'medium', split: false, stripe: false }; 8 | 9 | export const listItemDefaultProps: TdListItemProps = {}; 10 | 11 | export const listItemMetaDefaultProps: TdListItemMetaProps = {}; 12 | -------------------------------------------------------------------------------- /packages/components/list/index.ts: -------------------------------------------------------------------------------- 1 | import _List from './List'; 2 | 3 | import './style/index.js'; 4 | 5 | export type { ListProps } from './List'; 6 | export type { ListItemProps } from './ListItem'; 7 | export type { ListItemMetaProps } from './ListItemMeta'; 8 | export * from './type'; 9 | 10 | export const List = _List; 11 | export default List; 12 | -------------------------------------------------------------------------------- /packages/components/list/style/css.js: -------------------------------------------------------------------------------- 1 | import './index.css'; 2 | -------------------------------------------------------------------------------- /packages/components/list/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../../common/style/web/components/list/_index.less'; 2 | -------------------------------------------------------------------------------- /packages/components/loading/_example/base.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Loading } from 'tdesign-react'; 3 | 4 | export default function BaseLoadingExample() { 5 | return ; 6 | } 7 | -------------------------------------------------------------------------------- /packages/components/loading/_example/icon-text.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Loading } from 'tdesign-react'; 3 | 4 | export default function IconTextExample() { 5 | return ; 6 | } 7 | -------------------------------------------------------------------------------- /packages/components/loading/_example/size.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Loading, Space } from 'tdesign-react'; 3 | 4 | export default function LoadingSize() { 5 | return ( 6 | 7 | 8 | 9 | 10 | 11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /packages/components/loading/_example/text.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Loading } from 'tdesign-react'; 3 | 4 | export default function TextExample() { 5 | return ; 6 | } 7 | -------------------------------------------------------------------------------- /packages/components/loading/defaultProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC 3 | * */ 4 | 5 | import { TdLoadingProps } from './type'; 6 | 7 | export const loadingDefaultProps: TdLoadingProps = { 8 | delay: 0, 9 | fullscreen: false, 10 | indicator: true, 11 | inheritColor: false, 12 | loading: true, 13 | preventScrollThrough: true, 14 | showOverlay: true, 15 | size: 'medium', 16 | }; 17 | -------------------------------------------------------------------------------- /packages/components/loading/index.ts: -------------------------------------------------------------------------------- 1 | import _Loading from './Loading'; 2 | import { LoadingPlugin as _LoadingPlugin } from './plugin'; 3 | 4 | import './style/index.js'; 5 | 6 | export type { LoadingProps } from './Loading'; 7 | export * from './type'; 8 | 9 | export const Loading = _Loading; 10 | export const loading = _LoadingPlugin; 11 | export const LoadingPlugin = _LoadingPlugin; 12 | 13 | export default Loading; 14 | -------------------------------------------------------------------------------- /packages/components/loading/style/css.js: -------------------------------------------------------------------------------- 1 | import './index.css'; 2 | -------------------------------------------------------------------------------- /packages/components/loading/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../../common/style/web/components/loading/_index.less'; 2 | -------------------------------------------------------------------------------- /packages/components/locale/ar_KW.ts: -------------------------------------------------------------------------------- 1 | import arKW from '@tdesign/common-js/global-config/locale/ar_KW'; 2 | import { GlobalConfigProvider } from '../config-provider/type'; 3 | 4 | // 需要 GlobalConfigProvider 保证数据类型正确 5 | export default arKW as unknown as GlobalConfigProvider; 6 | -------------------------------------------------------------------------------- /packages/components/locale/en_US.ts: -------------------------------------------------------------------------------- 1 | import enUS from '@tdesign/common-js/global-config/locale/en_US'; 2 | import { GlobalConfigProvider } from '../config-provider/type'; 3 | 4 | // 需要 GlobalConfigProvider 保证数据类型正确，本次提交就检查出了英文字段缺少 5 | export default enUS as unknown as GlobalConfigProvider; 6 | -------------------------------------------------------------------------------- /packages/components/locale/it_IT.ts: -------------------------------------------------------------------------------- 1 | import itIT from '@tdesign/common-js/global-config/locale/it_IT'; 2 | import { GlobalConfigProvider } from '../config-provider/type'; 3 | 4 | // 需要 GlobalConfigProvider 保证数据类型正确 5 | export default itIT as unknown as GlobalConfigProvider; 6 | -------------------------------------------------------------------------------- /packages/components/locale/ja_JP.ts: -------------------------------------------------------------------------------- 1 | import jaJP from '@tdesign/common-js/global-config/locale/ja_JP'; 2 | import { GlobalConfigProvider } from '../config-provider/type'; 3 | 4 | // 需要 GlobalConfigProvider 保证数据类型正确 5 | export default jaJP as unknown as GlobalConfigProvider; 6 | -------------------------------------------------------------------------------- /packages/components/locale/ko_KR.ts: -------------------------------------------------------------------------------- 1 | import koKR from '@tdesign/common-js/global-config/locale/ko_KR'; 2 | import { GlobalConfigProvider } from '../config-provider/type'; 3 | 4 | // 需要 GlobalConfigProvider 保证数据类型正确 5 | export default koKR as unknown as GlobalConfigProvider; 6 | -------------------------------------------------------------------------------- /packages/components/locale/ru_RU.ts: -------------------------------------------------------------------------------- 1 | import ruRU from '@tdesign/common-js/global-config/locale/ru_RU'; 2 | import { GlobalConfigProvider } from '../config-provider/type'; 3 | 4 | // 需要 GlobalConfigProvider 保证数据类型正确 5 | export default ruRU as unknown as GlobalConfigProvider; 6 | -------------------------------------------------------------------------------- /packages/components/locale/zh_CN.ts: -------------------------------------------------------------------------------- 1 | import zhCN from '@tdesign/common-js/global-config/locale/zh_CN'; 2 | import { GlobalConfigProvider } from '../config-provider/type'; 3 | 4 | // 需要 GlobalConfigProvider 保证数据类型正确 5 | export default zhCN as unknown as GlobalConfigProvider; 6 | -------------------------------------------------------------------------------- /packages/components/locale/zh_TW.ts: -------------------------------------------------------------------------------- 1 | import zhTW from '@tdesign/common-js/global-config/locale/zh_TW'; 2 | import { GlobalConfigProvider } from '../config-provider/type'; 3 | 4 | // 需要 GlobalConfigProvider 保证数据类型正确 5 | export default zhTW as unknown as GlobalConfigProvider; 6 | -------------------------------------------------------------------------------- /packages/components/menu/_util/cacularPaddingLeft.ts: -------------------------------------------------------------------------------- 1 | const DEFAULT_SUBMENU_PADDING_LEFT = 44; 2 | const INCREASE_SUBMENU_PADDING_LEFT = 16; 3 | 4 | export const cacularPaddingLeft = (level: number) => 5 | DEFAULT_SUBMENU_PADDING_LEFT + level * INCREASE_SUBMENU_PADDING_LEFT; 6 | -------------------------------------------------------------------------------- /packages/components/menu/_util/constant.ts: -------------------------------------------------------------------------------- 1 | export const DEFAULT_MENU_WIDTH = [232, 64]; 2 | -------------------------------------------------------------------------------- /packages/components/menu/_util/type.ts: -------------------------------------------------------------------------------- 1 | /** menu 组件类型，包括 MenuItem，SubMenu，MenuItemGroup */ 2 | export enum MenuBlockType { 3 | MenuItem = 'MenuItem', 4 | SubMenu = 'SubMenu', 5 | MenuItemGroup = 'MenuItemGroup', 6 | MenuGroup = 'MenuGroup', 7 | } 8 | -------------------------------------------------------------------------------- /packages/components/menu/index.ts: -------------------------------------------------------------------------------- 1 | import _Menu from './Menu'; 2 | 3 | import './style/index.js'; 4 | 5 | export type { MenuProps } from './Menu'; 6 | export type { HeadMenuProps } from './HeadMenu'; 7 | export type { SubMenuProps } from './SubMenu'; 8 | export type { MenuItemProps } from './MenuItem'; 9 | export type { MenuGroupProps } from './MenuGroup'; 10 | export * from './type'; 11 | 12 | export const Menu = _Menu; 13 | export default Menu; 14 | -------------------------------------------------------------------------------- /packages/components/menu/style/css.js: -------------------------------------------------------------------------------- 1 | import './index.css'; 2 | -------------------------------------------------------------------------------- /packages/components/menu/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../../common/style/web/components/menu/_index.less'; 2 | -------------------------------------------------------------------------------- /packages/components/message/defaultProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC 3 | * */ 4 | 5 | import { TdMessageProps } from './type'; 6 | 7 | export const messageDefaultProps: TdMessageProps = { closeBtn: undefined, duration: 3000, icon: true, theme: 'info' }; 8 | -------------------------------------------------------------------------------- /packages/components/message/index.ts: -------------------------------------------------------------------------------- 1 | import _Message, { MessagePlugin as _MessagePlugin } from './Message'; 2 | 3 | import './style/index.js'; 4 | 5 | export * from './type'; 6 | 7 | export const Message = _Message; 8 | export const message = _MessagePlugin; 9 | export const MessagePlugin = _MessagePlugin; 10 | 11 | export default Message; 12 | -------------------------------------------------------------------------------- /packages/components/message/style/css.js: -------------------------------------------------------------------------------- 1 | import './index.css'; 2 | -------------------------------------------------------------------------------- /packages/components/message/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../../common/style/web/components/message/_index.less'; 2 | -------------------------------------------------------------------------------- /packages/components/notification/_example/base.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Notification } from 'tdesign-react'; 3 | 4 | export default function NotificationExample() { 5 | return ; 6 | } 7 | -------------------------------------------------------------------------------- /packages/components/notification/_example/content.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Notification, Space } from 'tdesign-react'; 3 | 4 | export default function NotificationExample() { 5 | return ( 6 | 7 | 8 | 这是一条消息通知} /> 9 | 10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /packages/components/notification/_example/footer.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Notification } from 'tdesign-react'; 3 | 4 | export default function NotificationExample() { 5 | return ( 6 | 11 | 重启 12 | 查看详情 13 | 14 | } 15 | /> 16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /packages/components/notification/_example/toggle.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { NotificationPlugin, Button } from 'tdesign-react'; 3 | 4 | export default function NotificationExample() { 5 | const openNotification = () => { 6 | const notification = NotificationPlugin.info({ 7 | title: '信息', 8 | content: '这是一条不会自动关闭的消息通知', 9 | closeBtn: true, 10 | duration: 0, 11 | onCloseBtnClick: () => { 12 | NotificationPlugin.close(notification); 13 | }, 14 | }); 15 | }; 16 | 17 | return ; 18 | } 19 | -------------------------------------------------------------------------------- /packages/components/notification/defaultProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC 3 | * */ 4 | 5 | import { TdNotificationProps } from './type'; 6 | 7 | export const notificationDefaultProps: TdNotificationProps = { 8 | closeBtn: undefined, 9 | duration: 3000, 10 | icon: true, 11 | theme: 'info', 12 | }; 13 | -------------------------------------------------------------------------------- /packages/components/notification/index.ts: -------------------------------------------------------------------------------- 1 | import _Notification from './Notification'; 2 | import { NotificationPlugin as _NotificationPlugin } from './NotificationPlugin'; 3 | 4 | import './style/index.js'; 5 | 6 | export * from './type'; 7 | 8 | export const Notification = _Notification; 9 | export const notification = _NotificationPlugin; 10 | export const NotificationPlugin = _NotificationPlugin; 11 | 12 | export default Notification; 13 | -------------------------------------------------------------------------------- /packages/components/notification/style/css.js: -------------------------------------------------------------------------------- 1 | import './index.css'; 2 | -------------------------------------------------------------------------------- /packages/components/notification/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../../common/style/web/components/notification/_index.less'; 2 | -------------------------------------------------------------------------------- /packages/components/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@tdesign/components", 3 | "private": true, 4 | "main": "index.ts", 5 | "author": "tdesign", 6 | "license": "MIT" 7 | } 8 | -------------------------------------------------------------------------------- /packages/components/pagination/_example/mini.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Pagination } from 'tdesign-react'; 3 | 4 | export default function PaginationExample() { 5 | return ; 6 | } 7 | -------------------------------------------------------------------------------- /packages/components/pagination/_example/simple-mini.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Pagination } from 'tdesign-react'; 3 | 4 | import type { PaginationProps } from 'tdesign-react'; 5 | 6 | export default function PaginationExample() { 7 | const onChange: PaginationProps['onChange'] = (pageInfo) => { 8 | console.log(pageInfo); 9 | }; 10 | 11 | return ; 12 | } 13 | -------------------------------------------------------------------------------- /packages/components/pagination/_example/simple.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Pagination } from 'tdesign-react'; 3 | 4 | import type { PaginationProps } from 'tdesign-react'; 5 | 6 | export default function PaginationExample() { 7 | const onChange: PaginationProps['onChange'] = (pageInfo) => { 8 | console.log(pageInfo); 9 | }; 10 | 11 | return ; 12 | } 13 | -------------------------------------------------------------------------------- /packages/components/pagination/_example/total.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Pagination } from 'tdesign-react'; 3 | 4 | export default function PaginationExample() { 5 | return ; 6 | } 7 | -------------------------------------------------------------------------------- /packages/components/pagination/index.ts: -------------------------------------------------------------------------------- 1 | import _Pagination from './Pagination'; 2 | import _PaginationMini from './PaginationMini'; 3 | 4 | import './style/index.js'; 5 | 6 | export type { PaginationProps } from './Pagination'; 7 | export type { PaginationMiniProps } from './PaginationMini'; 8 | export * from './type'; 9 | 10 | export const Pagination = _Pagination; 11 | export const PaginationMini = _PaginationMini; 12 | export default Pagination; 13 | -------------------------------------------------------------------------------- /packages/components/pagination/style/css.js: -------------------------------------------------------------------------------- 1 | import './index.css'; 2 | -------------------------------------------------------------------------------- /packages/components/pagination/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../../common/style/web/components/pagination/_index.less'; 2 | -------------------------------------------------------------------------------- /packages/components/pagination/validators.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @author kenzyyang 3 | * @date 2021-03-29 4 | * @desc 判定当前 pageSize 是否是合法的值,目前仅校验合法性，若后续有逻辑校验可在此处扩展 5 | * @param pageSize any 任意类型 6 | * @return boolean 是否合法 7 | * */ 8 | const pageSizeValidator = (pageSize: any): boolean => { 9 | let pageSizeNumber: number; 10 | if (typeof pageSize !== 'number') { 11 | pageSizeNumber = pageSize - 0; 12 | } else { 13 | pageSizeNumber = pageSize; 14 | } 15 | 16 | return !Number.isFinite(pageSizeNumber) && pageSizeNumber > 0; 17 | }; 18 | 19 | export { pageSizeValidator }; 20 | -------------------------------------------------------------------------------- /packages/components/popconfirm/_example/extends.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Button, Popconfirm } from 'tdesign-react'; 3 | 4 | export default function BasicUsageExample() { 5 | const $content = '请确认您要进行此操作'; 6 | 7 | return ( 8 | 9 | 10 | 11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /packages/components/popconfirm/defaultProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC 3 | * */ 4 | 5 | import { TdPopconfirmProps } from './type'; 6 | 7 | export const popconfirmDefaultProps: TdPopconfirmProps = { 8 | destroyOnClose: true, 9 | placement: 'top', 10 | showArrow: true, 11 | theme: 'default', 12 | }; 13 | -------------------------------------------------------------------------------- /packages/components/popconfirm/index.ts: -------------------------------------------------------------------------------- 1 | import _Popconfirm from './Popconfirm'; 2 | 3 | import './style/index.js'; 4 | 5 | export type { PopconfirmProps } from './Popconfirm'; 6 | export * from './type'; 7 | 8 | export const Popconfirm = _Popconfirm; 9 | export default Popconfirm; 10 | -------------------------------------------------------------------------------- /packages/components/popconfirm/style/css.js: -------------------------------------------------------------------------------- 1 | import './index.css'; 2 | -------------------------------------------------------------------------------- /packages/components/popconfirm/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../../common/style/web/components/popconfirm/_index.less'; 2 | -------------------------------------------------------------------------------- /packages/components/popup/_example/base.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Button, Popup } from 'tdesign-react'; 3 | 4 | export default function BasicUsage() { 5 | return ( 6 | 7 | 8 | 9 | ); 10 | } 11 | -------------------------------------------------------------------------------- /packages/components/popup/_example/destroy.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Button, Popup } from 'tdesign-react'; 3 | 4 | export default function Destroy() { 5 | return ( 6 | 7 | 8 | 9 | ); 10 | } 11 | -------------------------------------------------------------------------------- /packages/components/popup/_example/disabled.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Button, Popup } from 'tdesign-react'; 3 | 4 | export default function Disabled() { 5 | return ( 6 | 7 | 8 | 9 | ); 10 | } 11 | -------------------------------------------------------------------------------- /packages/components/popup/_example/trigger-element.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Button, Popup, Space } from 'tdesign-react'; 3 | 4 | export default function TriggerElement() { 5 | return ( 6 | 7 | 8 | 9 | 10 | 使用 triggerElement 元素触发} showArrow content="这是一个弹出框"> 11 | 12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /packages/components/popup/_example/visible.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { Button, Popup } from 'tdesign-react'; 3 | 4 | export default function Controlled() { 5 | const [visible, setVisible] = useState(false); 6 | 7 | return ( 8 | 9 | {/* 当visible=true，trigger节点无法获取元素位置，会导致popup定位异常 */} 10 | 11 | 12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /packages/components/popup/defaultProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC 3 | * */ 4 | 5 | import { TdPopupProps } from './type'; 6 | 7 | export const popupDefaultProps: TdPopupProps = { 8 | destroyOnClose: false, 9 | hideEmptyPopup: false, 10 | placement: 'top', 11 | showArrow: false, 12 | trigger: 'hover', 13 | }; 14 | -------------------------------------------------------------------------------- /packages/components/popup/index.ts: -------------------------------------------------------------------------------- 1 | import _Popup from './Popup'; 2 | import _PopupPlugin from './PopupPlugin'; 3 | 4 | import './style/index.js'; 5 | 6 | export type { PopupProps, PopupRef } from './Popup'; 7 | export * from './type'; 8 | 9 | export const Popup = _Popup; 10 | export const PopupPlugin = _PopupPlugin; 11 | export default Popup; 12 | -------------------------------------------------------------------------------- /packages/components/popup/style/css.js: -------------------------------------------------------------------------------- 1 | import './index.css'; 2 | -------------------------------------------------------------------------------- /packages/components/popup/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../../common/style/web/components/popup/_index.less'; 2 | -------------------------------------------------------------------------------- /packages/components/progress/_usage/props.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "name": "label", 4 | "type": "Boolean", 5 | "defaultValue": true, 6 | "options": [] 7 | }, 8 | { 9 | "name": "theme", 10 | "type": "enum", 11 | "defaultValue": "line", 12 | "options": [ 13 | { 14 | "label": "line", 15 | "value": "line" 16 | }, 17 | { 18 | "label": "plump", 19 | "value": "plump" 20 | }, 21 | { 22 | "label": "circle", 23 | "value": "circle" 24 | } 25 | ] 26 | } 27 | ] -------------------------------------------------------------------------------- /packages/components/progress/defaultProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC 3 | * */ 4 | 5 | import { TdProgressProps } from './type'; 6 | 7 | export const progressDefaultProps: TdProgressProps = { label: true, percentage: 0, size: 'medium', theme: 'line' }; 8 | -------------------------------------------------------------------------------- /packages/components/progress/index.ts: -------------------------------------------------------------------------------- 1 | import _Progress from './Progress'; 2 | 3 | import './style/index.js'; 4 | 5 | export type { ProgressProps } from './Progress'; 6 | export * from './type'; 7 | 8 | export const Progress = _Progress; 9 | export default Progress; 10 | -------------------------------------------------------------------------------- /packages/components/progress/style/css.js: -------------------------------------------------------------------------------- 1 | import './index.css'; 2 | -------------------------------------------------------------------------------- /packages/components/progress/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../../common/style/web/components/progress/_index.less'; 2 | -------------------------------------------------------------------------------- /packages/components/radio/_example/base.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Radio, Space } from 'tdesign-react'; 3 | 4 | export default function RadioControlledExample() { 5 | return ( 6 | 7 | 未选中 8 | 取消选中 9 | 已选中 10 | 11 | 禁用未选中 12 | 13 | 14 | 禁用已选中 15 | 16 | 17 | ); 18 | } 19 | -------------------------------------------------------------------------------- /packages/components/radio/_usage/props.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "name": "allowUncheck", 4 | "type": "Boolean", 5 | "defaultValue": false, 6 | "options": [] 7 | }, 8 | { 9 | "name": "checked", 10 | "type": "Boolean", 11 | "defaultValue": false, 12 | "options": [] 13 | }, 14 | { 15 | "name": "disabled", 16 | "type": "Boolean", 17 | "defaultValue": false, 18 | "options": [] 19 | }, 20 | { 21 | "name": "readonly", 22 | "type": "Boolean", 23 | "defaultValue": false, 24 | "options": [] 25 | } 26 | ] -------------------------------------------------------------------------------- /packages/components/radio/defaultProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC 3 | * */ 4 | 5 | import { TdRadioProps, TdRadioGroupProps } from './type'; 6 | 7 | export const radioDefaultProps: TdRadioProps = { 8 | allowUncheck: false, 9 | defaultChecked: false, 10 | disabled: undefined, 11 | readonly: undefined, 12 | value: undefined, 13 | }; 14 | 15 | export const radioGroupDefaultProps: TdRadioGroupProps = { 16 | allowUncheck: false, 17 | disabled: undefined, 18 | readonly: undefined, 19 | size: 'medium', 20 | variant: 'outline', 21 | theme: 'radio', 22 | }; 23 | -------------------------------------------------------------------------------- /packages/components/radio/index.ts: -------------------------------------------------------------------------------- 1 | import _Radio from './Radio'; 2 | 3 | import './style/index.js'; 4 | 5 | export type { RadioProps } from './Radio'; 6 | export type { RadioGroupProps } from './RadioGroup'; 7 | export * from './type'; 8 | 9 | export const Radio = _Radio; 10 | export const RadioGroup = _Radio.Group; 11 | 12 | export default Radio; 13 | -------------------------------------------------------------------------------- /packages/components/radio/style/css.js: -------------------------------------------------------------------------------- 1 | import './index.css'; 2 | -------------------------------------------------------------------------------- /packages/components/radio/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../../common/style/web/components/radio/_index.less'; 2 | -------------------------------------------------------------------------------- /packages/components/range-input/_example/base.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { RangeInput } from 'tdesign-react'; 3 | 4 | export default function BaseExample() { 5 | return ; 6 | } 7 | -------------------------------------------------------------------------------- /packages/components/range-input/_example/popup.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { RangeInputPopup } from 'tdesign-react'; 3 | 4 | export default function BaseExample() { 5 | return hello world} />; 6 | } 7 | -------------------------------------------------------------------------------- /packages/components/range-input/_example/size.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { RangeInput, Space } from 'tdesign-react'; 3 | 4 | export default function BaseExample() { 5 | return ( 6 | 7 | 8 | 9 | 10 | 11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /packages/components/range-input/_example/status.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { RangeInput, Space } from 'tdesign-react'; 3 | 4 | export default function BaseExample() { 5 | return ( 6 | 7 | 8 | 9 | 10 | 11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /packages/components/range-input/defaultProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC 3 | * */ 4 | 5 | import { TdRangeInputProps, TdRangeInputPopupProps } from './type'; 6 | 7 | export const rangeInputDefaultProps: TdRangeInputProps = { 8 | borderless: false, 9 | clearable: false, 10 | readonly: false, 11 | separator: '-', 12 | showClearIconOnEmpty: false, 13 | size: 'medium', 14 | status: 'default', 15 | defaultValue: [], 16 | }; 17 | 18 | export const rangeInputPopupDefaultProps: TdRangeInputPopupProps = { 19 | autoWidth: false, 20 | readonly: false, 21 | status: 'default', 22 | }; 23 | -------------------------------------------------------------------------------- /packages/components/range-input/index.ts: -------------------------------------------------------------------------------- 1 | import _RangeInput from './RangeInput'; 2 | import _RangeInputPopup from './RangeInputPopup'; 3 | 4 | import './style/index.js'; 5 | 6 | export type { RangeInputProps, RangeInputRefInterface } from './RangeInput'; 7 | export type { RangeInputPopupProps } from './RangeInputPopup'; 8 | export * from './type'; 9 | 10 | export const RangeInput = _RangeInput; 11 | export const RangeInputPopup = _RangeInputPopup; 12 | export default RangeInput; 13 | -------------------------------------------------------------------------------- /packages/components/range-input/style/css.js: -------------------------------------------------------------------------------- 1 | import './index.css'; 2 | -------------------------------------------------------------------------------- /packages/components/range-input/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../../common/style/web/components/range-input/_index.less'; 2 | -------------------------------------------------------------------------------- /packages/components/rate/_example/base.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Rate } from 'tdesign-react'; 3 | 4 | export default function BasicRate() { 5 | return ; 6 | } 7 | -------------------------------------------------------------------------------- /packages/components/rate/_example/clearable.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Rate, Space } from 'tdesign-react'; 3 | 4 | export default function BasicRate() { 5 | return ( 6 | 7 |

clearable: true

8 | 9 |

clearable: false

10 | 11 | 12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /packages/components/rate/_example/custom.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Rate } from 'tdesign-react'; 3 | 4 | export default function BasicRate() { 5 | return ; 6 | } 7 | -------------------------------------------------------------------------------- /packages/components/rate/_example/icon.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Rate, Space } from 'tdesign-react'; 3 | import { StarIcon, LogoGithubIcon, HeartFilledIcon } from 'tdesign-icons-react'; 4 | 5 | export default function BasicRate() { 6 | return ( 7 | 8 | } /> 9 | } /> 10 | } color={'var(--td-error-color-7)'} /> 11 | 12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /packages/components/rate/_example/size.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Space, Rate } from 'tdesign-react'; 3 | 4 | export default function BasicRate() { 5 | return ( 6 | 7 |

16px

8 | 9 | 10 |

24px

11 | 12 | 13 | ); 14 | } 15 | -------------------------------------------------------------------------------- /packages/components/rate/_example/status.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Space, Rate } from 'tdesign-react'; 3 | 4 | export default function BasicRate() { 5 | return ( 6 | 7 |

未评分状态

8 | 9 | 10 |

满分状态

11 | 12 | 13 |

半星状态

14 | 15 | 16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /packages/components/rate/_example/texts.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Rate } from 'tdesign-react'; 3 | 4 | export default function BasicRate() { 5 | return ; 6 | } 7 | -------------------------------------------------------------------------------- /packages/components/rate/_usage/props.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "name": "allowHalf", 4 | "type": "Boolean", 5 | "defaultValue": false, 6 | "options": [] 7 | }, 8 | { 9 | "name": "disabled", 10 | "type": "Boolean", 11 | "defaultValue": false, 12 | "options": [] 13 | }, 14 | { 15 | "name": "showText", 16 | "type": "Boolean", 17 | "defaultValue": false, 18 | "options": [] 19 | } 20 | ] -------------------------------------------------------------------------------- /packages/components/rate/defaultProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC 3 | * */ 4 | 5 | import { TdRateProps } from './type'; 6 | 7 | export const rateDefaultProps: TdRateProps = { 8 | allowHalf: false, 9 | clearable: false, 10 | color: '#ED7B2F', 11 | count: 5, 12 | disabled: undefined, 13 | gap: 4, 14 | showText: false, 15 | size: '24px', 16 | texts: [], 17 | defaultValue: 0, 18 | }; 19 | -------------------------------------------------------------------------------- /packages/components/rate/index.ts: -------------------------------------------------------------------------------- 1 | import _Rate from './Rate'; 2 | 3 | import './style/index.js'; 4 | 5 | export type { RateProps } from './Rate'; 6 | export * from './type'; 7 | 8 | export const Rate = _Rate; 9 | export default Rate; 10 | -------------------------------------------------------------------------------- /packages/components/rate/style/css.js: -------------------------------------------------------------------------------- 1 | import './index.css'; 2 | -------------------------------------------------------------------------------- /packages/components/rate/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../../common/style/web/components/rate/_index.less'; 2 | -------------------------------------------------------------------------------- /packages/components/search/defaultProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC 3 | * */ 4 | 5 | import { TdSearchProps } from './type'; 6 | 7 | export const searchDefaultProps: TdSearchProps = { 8 | autofocus: false, 9 | autoWidth: false, 10 | borderless: true, 11 | clearable: true, 12 | multiline: false, 13 | readonly: false, 14 | defaultValue: '', 15 | }; 16 | -------------------------------------------------------------------------------- /packages/components/select-input/defaultProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC 3 | * */ 4 | 5 | import { TdSelectInputProps } from './type'; 6 | 7 | export const selectInputDefaultProps: TdSelectInputProps = { 8 | allowInput: false, 9 | autoWidth: false, 10 | autofocus: false, 11 | borderless: false, 12 | clearable: false, 13 | loading: false, 14 | minCollapsedNum: 0, 15 | multiple: false, 16 | readonly: false, 17 | reserveKeyword: false, 18 | status: 'default', 19 | }; 20 | -------------------------------------------------------------------------------- /packages/components/select-input/index.ts: -------------------------------------------------------------------------------- 1 | import _SelectInput from './SelectInput'; 2 | 3 | import './style/index.js'; 4 | 5 | export type { SelectInputProps } from './SelectInput'; 6 | export * from './type'; 7 | 8 | export const SelectInput = _SelectInput; 9 | export default SelectInput; 10 | -------------------------------------------------------------------------------- /packages/components/select-input/style/css.js: -------------------------------------------------------------------------------- 1 | import './index.css'; 2 | -------------------------------------------------------------------------------- /packages/components/select-input/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../../common/style/web/components/select-input/_index.less'; 2 | -------------------------------------------------------------------------------- /packages/components/select/_example/disabled.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Select } from 'tdesign-react'; 3 | 4 | const { Option } = Select; 5 | 6 | const DisabledSelect = () => ( 7 | 10 | ); 11 | 12 | export default DisabledSelect; 13 | -------------------------------------------------------------------------------- /packages/components/select/base/style/css.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.css'; 2 | -------------------------------------------------------------------------------- /packages/components/select/base/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.js'; 2 | -------------------------------------------------------------------------------- /packages/components/select/index.ts: -------------------------------------------------------------------------------- 1 | import _Select from './base/Select'; 2 | 3 | import './style/index.js'; 4 | 5 | export type { SelectProps } from './base/Select'; 6 | export * from './type'; 7 | 8 | export const Select = _Select; 9 | export default Select; 10 | -------------------------------------------------------------------------------- /packages/components/select/style/css.js: -------------------------------------------------------------------------------- 1 | import './index.css'; 2 | -------------------------------------------------------------------------------- /packages/components/select/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../../common/style/web/components/select/_index.less'; 2 | -------------------------------------------------------------------------------- /packages/components/skeleton/__tests__/skeleton.test.tsx: -------------------------------------------------------------------------------- 1 | // import { render } from '@test/utils'; 2 | // import React from 'react'; 3 | // import Skeleton from '../index'; 4 | 5 | // TODO 6 | describe('Skeleton 组件测试', () => { 7 | test('dom', () => { 8 | expect(true).toBe(true); 9 | }); 10 | }); 11 | -------------------------------------------------------------------------------- /packages/components/skeleton/defaultProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC 3 | * */ 4 | 5 | import { TdSkeletonProps } from './type'; 6 | 7 | export const skeletonDefaultProps: TdSkeletonProps = { animation: 'none', delay: 0, loading: true, theme: 'text' }; 8 | -------------------------------------------------------------------------------- /packages/components/skeleton/index.ts: -------------------------------------------------------------------------------- 1 | import _Skeleton from './Skeleton'; 2 | 3 | import './style/index.js'; 4 | 5 | export type { SkeletonProps } from './Skeleton'; 6 | export * from './type'; 7 | 8 | export const Skeleton = _Skeleton; 9 | export default Skeleton; 10 | -------------------------------------------------------------------------------- /packages/components/skeleton/style/css.js: -------------------------------------------------------------------------------- 1 | import './index.css'; 2 | -------------------------------------------------------------------------------- /packages/components/skeleton/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../../common/style/web/components/skeleton/_index.less'; 2 | -------------------------------------------------------------------------------- /packages/components/slider/_example/disabled.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Slider } from 'tdesign-react'; 3 | 4 | const DisabledSlider = () => ; 5 | 6 | export default DisabledSlider; 7 | -------------------------------------------------------------------------------- /packages/components/slider/defaultProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC 3 | * */ 4 | 5 | import { TdSliderProps } from './type'; 6 | 7 | export const sliderDefaultProps: TdSliderProps = { 8 | inputNumberProps: false, 9 | label: true, 10 | layout: 'horizontal', 11 | max: 100, 12 | min: 0, 13 | range: false, 14 | step: 1, 15 | }; 16 | -------------------------------------------------------------------------------- /packages/components/slider/index.ts: -------------------------------------------------------------------------------- 1 | import _Slider from './Slider'; 2 | 3 | import './style/index.js'; 4 | 5 | export type { SliderProps } from './Slider'; 6 | export * from './type'; 7 | 8 | export const Slider = _Slider; 9 | export default Slider; 10 | -------------------------------------------------------------------------------- /packages/components/slider/style/css.js: -------------------------------------------------------------------------------- 1 | import './index.css'; 2 | -------------------------------------------------------------------------------- /packages/components/slider/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../../common/style/web/components/slider/_index.less'; 2 | -------------------------------------------------------------------------------- /packages/components/slider/utils/handleNumber.ts: -------------------------------------------------------------------------------- 1 | export const numberToPercent = (number: number) => `${number * 100}%`; 2 | -------------------------------------------------------------------------------- /packages/components/space/__tests__/mount.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from '@test/utils'; 3 | import { Button } from '../../button'; 4 | 5 | export function getSpaceDefaultMount(Space, props, events) { 6 | return render( 7 | 8 | 9 | 10 | 11 | 12 | ); 13 | } 14 | 15 | export default getSpaceDefaultMount; 16 | -------------------------------------------------------------------------------- /packages/components/space/_example/base.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Space, Button } from 'tdesign-react'; 3 | 4 | const BaseSpace = () => ( 5 | 6 | 7 | 8 | 9 | 10 | ); 11 | 12 | export default BaseSpace; 13 | -------------------------------------------------------------------------------- /packages/components/space/_example/break-line.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Space, Button } from 'tdesign-react'; 3 | 4 | const BaseSpace = () => ( 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | ); 18 | 19 | export default BaseSpace; 20 | -------------------------------------------------------------------------------- /packages/components/space/_example/separator.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Space, Button, Divider } from 'tdesign-react'; 3 | 4 | const BaseSpace = () => ( 5 | }> 6 | 7 | 8 | 9 | 10 | ); 11 | 12 | export default BaseSpace; 13 | -------------------------------------------------------------------------------- /packages/components/space/defaultProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC 3 | * */ 4 | 5 | import { TdSpaceProps } from './type'; 6 | 7 | export const spaceDefaultProps: TdSpaceProps = { breakLine: false, direction: 'horizontal', size: 'medium' }; 8 | -------------------------------------------------------------------------------- /packages/components/space/index.ts: -------------------------------------------------------------------------------- 1 | import _Space from './Space'; 2 | 3 | import './style/index.js'; 4 | 5 | export type { SpaceProps } from './Space'; 6 | export * from './type'; 7 | 8 | export const Space = _Space; 9 | export default Space; 10 | -------------------------------------------------------------------------------- /packages/components/space/style/css.js: -------------------------------------------------------------------------------- 1 | import './index.css'; 2 | -------------------------------------------------------------------------------- /packages/components/space/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../../common/style/web/components/space/_index.less'; 2 | -------------------------------------------------------------------------------- /packages/components/statistic/_example/base.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Space, Statistic } from 'tdesign-react'; 3 | 4 | const BaseStatistic = () => ( 5 | 6 | 7 | 8 | 9 | ); 10 | 11 | export default BaseStatistic; 12 | -------------------------------------------------------------------------------- /packages/components/statistic/_example/loading.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Space, Switch, Statistic } from 'tdesign-react'; 3 | 4 | const LoadingStatistic = () => { 5 | const [loading, setLoading] = React.useState(true); 6 | return ( 7 | 8 | setLoading(value)} size="large" /> 9 | 10 | 11 | ); 12 | }; 13 | 14 | export default LoadingStatistic; 15 | -------------------------------------------------------------------------------- /packages/components/statistic/_example/trend.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Space, Statistic } from 'tdesign-react'; 3 | 4 | const TrendStatistic = () => ( 5 | 6 | 7 | 8 | 9 | 10 | ); 11 | 12 | export default TrendStatistic; 13 | -------------------------------------------------------------------------------- /packages/components/statistic/defaultProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC 3 | * */ 4 | 5 | import { TdStatisticProps } from './type'; 6 | 7 | export const statisticDefaultProps: TdStatisticProps = { 8 | animationStart: false, 9 | loading: false, 10 | separator: ',', 11 | trendPlacement: 'left', 12 | }; 13 | -------------------------------------------------------------------------------- /packages/components/statistic/index.ts: -------------------------------------------------------------------------------- 1 | import _Statistic from './Statistic'; 2 | import './style/index.js'; 3 | 4 | export type { StatisticProps, StatisticRef } from './Statistic'; 5 | export * from './type'; 6 | 7 | export const Statistic = _Statistic; 8 | export default Statistic; 9 | -------------------------------------------------------------------------------- /packages/components/statistic/style/css.js: -------------------------------------------------------------------------------- 1 | import './index.css'; 2 | -------------------------------------------------------------------------------- /packages/components/statistic/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../../common/style/web/components/statistic/_index.less'; 2 | -------------------------------------------------------------------------------- /packages/components/steps/StepsContext.ts: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { TdStepsProps } from './type'; 3 | 4 | const StepsContext = React.createContext<{ 5 | current: TdStepsProps['current']; 6 | theme: TdStepsProps['theme']; 7 | readonly: TdStepsProps['readonly']; 8 | onChange: TdStepsProps['onChange']; 9 | }>({ 10 | current: 0, 11 | theme: 'default', 12 | readonly: false, 13 | onChange: null, 14 | }); 15 | 16 | export default StepsContext; 17 | -------------------------------------------------------------------------------- /packages/components/steps/_example/no-sequence.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Steps } from 'tdesign-react'; 3 | 4 | const { StepItem } = Steps; 5 | 6 | export default function HorizontalStepsWithNumbers() { 7 | return ( 8 | 9 | 10 | 11 | 12 | 13 | 14 | ); 15 | } 16 | -------------------------------------------------------------------------------- /packages/components/steps/defaultProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC 3 | * */ 4 | 5 | import { TdStepItemProps, TdStepsProps } from './type'; 6 | 7 | export const stepItemDefaultProps: TdStepItemProps = { icon: true, status: 'default' }; 8 | 9 | export const stepsDefaultProps: TdStepsProps = { 10 | layout: 'horizontal', 11 | readonly: false, 12 | separator: 'line', 13 | sequence: 'positive', 14 | theme: 'default', 15 | }; 16 | -------------------------------------------------------------------------------- /packages/components/steps/index.ts: -------------------------------------------------------------------------------- 1 | import _Steps from './Steps'; 2 | 3 | import './style/index.js'; 4 | 5 | export type { StepsProps } from './Steps'; 6 | export type { StepItemProps } from './StepItem'; 7 | export * from './type'; 8 | 9 | export const Steps = _Steps; 10 | export default Steps; 11 | -------------------------------------------------------------------------------- /packages/components/steps/style/css.js: -------------------------------------------------------------------------------- 1 | import './index.css'; 2 | -------------------------------------------------------------------------------- /packages/components/steps/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../../common/style/web/components/steps/_index.less'; 2 | -------------------------------------------------------------------------------- /packages/components/sticky-tool/defaultProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC 3 | * */ 4 | 5 | import { TdStickyToolProps, TdStickyItemProps } from './type'; 6 | 7 | export const stickyToolDefaultProps: TdStickyToolProps = { 8 | list: [], 9 | placement: 'right-bottom', 10 | shape: 'square', 11 | type: 'normal', 12 | }; 13 | 14 | export const stickyItemDefaultProps: TdStickyItemProps = { trigger: 'hover' }; 15 | -------------------------------------------------------------------------------- /packages/components/sticky-tool/index.ts: -------------------------------------------------------------------------------- 1 | import _StickyTool from './StickyTool'; 2 | 3 | import './style/index.js'; 4 | 5 | export type { StickyToolProps } from './StickyTool'; 6 | export type { StickyItemProps } from './StickyItem'; 7 | export * from './type'; 8 | 9 | export const StickyTool = _StickyTool; 10 | export default StickyTool; 11 | -------------------------------------------------------------------------------- /packages/components/sticky-tool/style/css.js: -------------------------------------------------------------------------------- 1 | import './index.css'; 2 | -------------------------------------------------------------------------------- /packages/components/sticky-tool/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../../common/style/web/components/sticky-tool/_index.less'; 2 | -------------------------------------------------------------------------------- /packages/components/style/css.js: -------------------------------------------------------------------------------- 1 | import './index.css'; 2 | -------------------------------------------------------------------------------- /packages/components/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../common/style/web/_global.less'; 2 | import '../../common/style/web/theme/_index.less'; 3 | -------------------------------------------------------------------------------- /packages/components/swiper/defaultProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC 3 | * */ 4 | 5 | import { TdSwiperProps } from './type'; 6 | 7 | export const swiperDefaultProps: TdSwiperProps = { 8 | animation: 'slide', 9 | autoplay: true, 10 | defaultCurrent: 0, 11 | direction: 'horizontal', 12 | duration: 300, 13 | interval: 5000, 14 | loop: true, 15 | stopOnHover: true, 16 | theme: 'light', 17 | trigger: 'hover', 18 | type: 'default', 19 | }; 20 | -------------------------------------------------------------------------------- /packages/components/swiper/index.ts: -------------------------------------------------------------------------------- 1 | import _Swiper from './Swiper'; 2 | 3 | import './style/index.js'; 4 | 5 | export type { SwiperProps } from './Swiper'; 6 | export type { SwiperItemProps } from './SwiperItem'; 7 | export * from './type'; 8 | 9 | export const Swiper = _Swiper; 10 | 11 | export default Swiper; 12 | -------------------------------------------------------------------------------- /packages/components/swiper/style/css.js: -------------------------------------------------------------------------------- 1 | import './index.css'; 2 | -------------------------------------------------------------------------------- /packages/components/swiper/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../../common/style/web/components/swiper/_index.less'; 2 | -------------------------------------------------------------------------------- /packages/components/switch/_example/base.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { Switch, Space } from 'tdesign-react'; 3 | 4 | export default function SwitchBasic() { 5 | const [checked, setChecked] = useState(true); 6 | 7 | const onChange = (value: boolean) => { 8 | console.log('value', value); 9 | setChecked(value); 10 | }; 11 | 12 | return ( 13 | 14 | 15 | 16 | 17 | ); 18 | } 19 | -------------------------------------------------------------------------------- /packages/components/switch/_example/size.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Switch, Space } from 'tdesign-react'; 3 | 4 | export default function SwitchBasic() { 5 | return ( 6 | 7 | 8 | 9 | 10 | 11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /packages/components/switch/_example/status.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Switch, Space } from 'tdesign-react'; 3 | 4 | export default function SwitchBasic() { 5 | return ( 6 | 7 | 8 | 9 | 10 | 11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /packages/components/switch/defaultProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC 3 | * */ 4 | 5 | import { TdSwitchProps } from './type'; 6 | 7 | export const switchDefaultProps: TdSwitchProps = { label: [], loading: false, size: 'medium' }; 8 | -------------------------------------------------------------------------------- /packages/components/switch/index.ts: -------------------------------------------------------------------------------- 1 | import _Switch from './Switch'; 2 | 3 | import './style/index.js'; 4 | 5 | export type { SwitchProps } from './Switch'; 6 | export * from './type'; 7 | 8 | export const Switch = _Switch; 9 | export default Switch; 10 | -------------------------------------------------------------------------------- /packages/components/switch/style/css.js: -------------------------------------------------------------------------------- 1 | import './index.css'; 2 | -------------------------------------------------------------------------------- /packages/components/switch/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../../common/style/web/components/switch/_index.less'; 2 | -------------------------------------------------------------------------------- /packages/components/table/_usage/enhanced-table-props.json: -------------------------------------------------------------------------------- 1 | [] -------------------------------------------------------------------------------- /packages/components/table/hooks/style/css.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.css'; 2 | -------------------------------------------------------------------------------- /packages/components/table/hooks/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.js'; 2 | -------------------------------------------------------------------------------- /packages/components/table/style/css.js: -------------------------------------------------------------------------------- 1 | import './index.css'; 2 | -------------------------------------------------------------------------------- /packages/components/table/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../../common/style/web/components/table/_index.less'; 2 | -------------------------------------------------------------------------------- /packages/components/tabs/defaultProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC 3 | * */ 4 | 5 | import { TdTabsProps, TdTabPanelProps } from './type'; 6 | 7 | export const tabsDefaultProps: TdTabsProps = { 8 | addable: false, 9 | disabled: false, 10 | dragSort: false, 11 | placement: 'top', 12 | scrollPosition: 'auto', 13 | size: 'medium', 14 | theme: 'normal', 15 | }; 16 | 17 | export const tabPanelDefaultProps: TdTabPanelProps = { 18 | destroyOnHide: true, 19 | disabled: false, 20 | draggable: true, 21 | lazy: false, 22 | removable: false, 23 | }; 24 | -------------------------------------------------------------------------------- /packages/components/tabs/index.ts: -------------------------------------------------------------------------------- 1 | import _Tabs from './Tabs'; 2 | 3 | import './style/index.js'; 4 | 5 | export type { TabsProps } from './Tabs'; 6 | export type { TabPanelProps } from './TabPanel'; 7 | export * from './type'; 8 | 9 | export const Tabs = _Tabs; 10 | export default Tabs; 11 | -------------------------------------------------------------------------------- /packages/components/tabs/style/css.js: -------------------------------------------------------------------------------- 1 | import './index.css'; 2 | -------------------------------------------------------------------------------- /packages/components/tabs/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../../common/style/web/components/tabs/_index.less'; 2 | -------------------------------------------------------------------------------- /packages/components/tag-input/_example/auto-width.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { TagInput } from 'tdesign-react'; 3 | 4 | const TagInputAutoWidth = () => { 5 | const [tags, setTags] = useState(['Vue', 'React']); 6 | 7 | const onChange = (val: string[]) => { 8 | setTags(val); 9 | }; 10 | return ; 11 | }; 12 | 13 | TagInputAutoWidth.displayName = 'TagInputAutoWidth'; 14 | 15 | export default TagInputAutoWidth; 16 | -------------------------------------------------------------------------------- /packages/components/tag-input/defaultProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC 3 | * */ 4 | 5 | import { TdTagInputProps } from './type'; 6 | 7 | export const tagInputDefaultProps: TdTagInputProps = { 8 | autoWidth: false, 9 | borderless: false, 10 | clearable: false, 11 | dragSort: false, 12 | excessTagsDisplayType: 'break-line', 13 | defaultInputValue: '', 14 | minCollapsedNum: 0, 15 | placeholder: undefined, 16 | readonly: false, 17 | size: 'medium', 18 | defaultValue: [], 19 | }; 20 | -------------------------------------------------------------------------------- /packages/components/tag-input/index.ts: -------------------------------------------------------------------------------- 1 | import _TagInput from './TagInput'; 2 | 3 | import './style/index.js'; 4 | 5 | export type { TagInputProps } from './TagInput'; 6 | export * from './type'; 7 | 8 | export const TagInput = _TagInput; 9 | export default TagInput; 10 | -------------------------------------------------------------------------------- /packages/components/tag-input/style/css.js: -------------------------------------------------------------------------------- 1 | import './index.css'; 2 | -------------------------------------------------------------------------------- /packages/components/tag-input/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../../common/style/web/components/tag-input/_index.less'; 2 | -------------------------------------------------------------------------------- /packages/components/tag/_example/icon.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Tag } from 'tdesign-react'; 3 | import { DiscountIcon } from 'tdesign-icons-react'; 4 | 5 | export default function ThemeTagExample() { 6 | return ( 7 | } theme="default"> 8 | 默认标签 9 | 10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /packages/components/tag/_example/long-text.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Tag } from 'tdesign-react'; 3 | 4 | export default function LongText() { 5 | return 默认超八个字超长文本标签超长省略文本标签; 6 | } 7 | -------------------------------------------------------------------------------- /packages/components/tag/defaultProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC 3 | * */ 4 | 5 | import { TdTagProps, TdCheckTagProps, TdCheckTagGroupProps } from './type'; 6 | 7 | export const tagDefaultProps: TdTagProps = { 8 | closable: false, 9 | disabled: false, 10 | icon: undefined, 11 | shape: 'square', 12 | size: 'medium', 13 | theme: 'default', 14 | variant: 'dark', 15 | }; 16 | 17 | export const checkTagDefaultProps: TdCheckTagProps = { disabled: false, size: 'medium' }; 18 | 19 | export const checkTagGroupDefaultProps: TdCheckTagGroupProps = { multiple: false, defaultValue: [] }; 20 | -------------------------------------------------------------------------------- /packages/components/tag/style/css.js: -------------------------------------------------------------------------------- 1 | import './index.css'; 2 | -------------------------------------------------------------------------------- /packages/components/tag/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../../common/style/web/components/tag/_index.less'; 2 | -------------------------------------------------------------------------------- /packages/components/textarea/_usage/props.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "name": "autofocus", 4 | "type": "Boolean", 5 | "defaultValue": false, 6 | "options": [] 7 | }, 8 | { 9 | "name": "autosize", 10 | "type": "Boolean", 11 | "defaultValue": false, 12 | "options": [] 13 | }, 14 | { 15 | "name": "disabled", 16 | "type": "Boolean", 17 | "defaultValue": false, 18 | "options": [] 19 | }, 20 | { 21 | "name": "readonly", 22 | "type": "Boolean", 23 | "defaultValue": false, 24 | "options": [] 25 | } 26 | ] -------------------------------------------------------------------------------- /packages/components/textarea/defaultProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC 3 | * */ 4 | 5 | import { TdTextareaProps } from './type'; 6 | 7 | export const textareaDefaultProps: TdTextareaProps = { 8 | allowInputOverMax: false, 9 | autofocus: false, 10 | autosize: false, 11 | placeholder: undefined, 12 | readonly: false, 13 | }; 14 | -------------------------------------------------------------------------------- /packages/components/textarea/index.tsx: -------------------------------------------------------------------------------- 1 | import _Textarea from './Textarea'; 2 | 3 | import './style/index.js'; 4 | 5 | export type { TextareaProps } from './Textarea'; 6 | export * from './type'; 7 | 8 | export const Textarea = _Textarea; 9 | export default Textarea; 10 | -------------------------------------------------------------------------------- /packages/components/textarea/style/css.js: -------------------------------------------------------------------------------- 1 | import './index.css'; 2 | -------------------------------------------------------------------------------- /packages/components/textarea/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../../common/style/web/components/textarea/_index.less'; 2 | -------------------------------------------------------------------------------- /packages/components/time-picker/_example/hide-clear-button.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { TimePicker, Space } from 'tdesign-react'; 3 | 4 | export default function HmTimePicker() { 5 | return ( 6 | 7 |

禁止清空

8 | 9 |

允许清空

10 | 11 | 12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /packages/components/time-picker/_example/hm.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { TimePicker, Space } from 'tdesign-react'; 3 | 4 | export default function HmTimePicker() { 5 | return ( 6 | 7 |

时分选择

8 | 9 |

毫秒选择

10 | 11 | 12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /packages/components/time-picker/_example/panel.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { TimePicker } from 'tdesign-react'; 3 | 4 | const { TimePickerPanel } = TimePicker; 5 | 6 | function Panel() { 7 | const [value, setValue] = useState(''); 8 | 9 | return ; 10 | } 11 | 12 | export default Panel; 13 | -------------------------------------------------------------------------------- /packages/components/time-picker/_example/range.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { TimePicker } from 'tdesign-react'; 3 | 4 | const { TimeRangePicker } = TimePicker; 5 | 6 | export default function RangeTimePicker() { 7 | return ( 8 | 15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /packages/components/time-picker/_example/show-steps.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { TimePicker } from 'tdesign-react'; 3 | 4 | export default function ShowStepsTimePicker() { 5 | return ; 6 | } 7 | -------------------------------------------------------------------------------- /packages/components/time-picker/_example/twelve-hour-meridian.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { TimePicker } from 'tdesign-react'; 3 | 4 | export default function TwelveHourTimePicker() { 5 | const [value, setValue] = useState(null); 6 | const handleValueChange = (v: string) => { 7 | setValue(v); 8 | }; 9 | return ; 10 | } 11 | -------------------------------------------------------------------------------- /packages/components/time-picker/hooks/useTimePickerTextConfig.ts: -------------------------------------------------------------------------------- 1 | import { useLocaleReceiver } from '../../locale/LocalReceiver'; 2 | 3 | export const useTimePickerTextConfig = () => { 4 | const [local, t] = useLocaleReceiver('timePicker'); 5 | return { 6 | nowTime: t(local.now), 7 | confirm: t(local.confirm), 8 | am: t(local.anteMeridiem), 9 | pm: t(local.postMeridiem), 10 | placeholder: t(local.placeholder), 11 | rangePlaceholder: [t(local.placeholder), t(local.placeholder)], 12 | }; 13 | }; 14 | -------------------------------------------------------------------------------- /packages/components/time-picker/index.ts: -------------------------------------------------------------------------------- 1 | import _TimePicker from './TimePicker'; 2 | import _TimeRangePicker from './TimeRangePicker'; 3 | import _TimePickerPanel from './panel/TimePickerPanel'; 4 | 5 | import './style/index.js'; 6 | 7 | export type { TimePickerProps } from './TimePicker'; 8 | export type { TimeRangePickerProps } from './TimeRangePicker'; 9 | export * from './type'; 10 | 11 | export const TimePicker = _TimePicker; 12 | export const TimeRangePicker = _TimeRangePicker; 13 | export const TimePickerPanel = _TimePickerPanel; 14 | 15 | export default TimePicker; 16 | -------------------------------------------------------------------------------- /packages/components/time-picker/panel/style/css.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.css'; 2 | -------------------------------------------------------------------------------- /packages/components/time-picker/panel/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.js'; 2 | -------------------------------------------------------------------------------- /packages/components/time-picker/style/css.js: -------------------------------------------------------------------------------- 1 | import './index.css'; 2 | -------------------------------------------------------------------------------- /packages/components/time-picker/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../../common/style/web/components/time-picker/_index.less'; 2 | -------------------------------------------------------------------------------- /packages/components/timeline/TimelineContext.ts: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { TdTimelineProps } from './type'; 3 | 4 | const StepsContext = React.createContext<{ 5 | theme: TdTimelineProps['theme']; 6 | reverse: TdTimelineProps['reverse']; 7 | itemsStatus: string[]; 8 | layout: TdTimelineProps['layout']; 9 | globalAlign?: TdTimelineProps['labelAlign']; 10 | mode?: TdTimelineProps['mode']; 11 | }>({ 12 | theme: 'default', 13 | reverse: false, 14 | itemsStatus: [], 15 | layout: 'vertical', 16 | mode: 'alternate', 17 | }); 18 | 19 | export default StepsContext; 20 | -------------------------------------------------------------------------------- /packages/components/timeline/defaultProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC 3 | * */ 4 | 5 | import { TdTimelineProps, TdTimelineItemProps } from './type'; 6 | 7 | export const timelineDefaultProps: TdTimelineProps = { 8 | labelAlign: 'left', 9 | layout: 'vertical', 10 | mode: 'alternate', 11 | reverse: false, 12 | theme: 'default', 13 | }; 14 | 15 | export const timelineItemDefaultProps: TdTimelineItemProps = { dotColor: 'primary' }; 16 | -------------------------------------------------------------------------------- /packages/components/timeline/index.ts: -------------------------------------------------------------------------------- 1 | import _Timeline from './Timeline'; 2 | import _TimelineItem from './TimelineItem'; 3 | 4 | import './style/index.js'; 5 | 6 | export type { TimelineProps } from './Timeline'; 7 | export type { TimelineItemProps } from './TimelineItem'; 8 | 9 | export const Timeline = _Timeline; 10 | export const TimelineItem = _TimelineItem; 11 | 12 | export default Timeline; 13 | -------------------------------------------------------------------------------- /packages/components/timeline/style/css.js: -------------------------------------------------------------------------------- 1 | import './index.css'; 2 | -------------------------------------------------------------------------------- /packages/components/timeline/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../../common/style/web/components/timeline/_index.less'; 2 | -------------------------------------------------------------------------------- /packages/components/tooltip/_example/arrow.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Button, Tooltip } from 'tdesign-react'; 3 | 4 | export default function BasicUsage() { 5 | return ( 6 | 13 | 14 | 15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /packages/components/tooltip/_example/mouse.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { TooltipLite } from 'tdesign-react'; 3 | 4 | export default function MouseTitle() { 5 | return ( 6 | 7 | 8 | 文案比较长... 9 | 10 | 11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /packages/components/tooltip/_example/no-arrow.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Button, Tooltip } from 'tdesign-react'; 3 | 4 | export default function BasicUsage() { 5 | return ( 6 | 7 | 8 | 9 | ); 10 | } 11 | -------------------------------------------------------------------------------- /packages/components/tooltip/defaultProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC 3 | * */ 4 | 5 | import { TdTooltipProps, TdTooltipLiteProps } from './type'; 6 | 7 | export const tooltipDefaultProps: TdTooltipProps = { 8 | destroyOnClose: true, 9 | placement: 'top', 10 | showArrow: true, 11 | theme: 'default', 12 | duration: 0, 13 | }; 14 | 15 | export const tooltipLiteDefaultProps: TdTooltipLiteProps = { 16 | placement: 'top', 17 | showArrow: true, 18 | showShadow: true, 19 | theme: 'default', 20 | }; 21 | -------------------------------------------------------------------------------- /packages/components/tooltip/index.ts: -------------------------------------------------------------------------------- 1 | import _Tooltip from './Tooltip'; 2 | import _TooltipLite from './TooltipLite'; 3 | 4 | import './style/index.js'; 5 | 6 | export type { TooltipLiteProps } from './TooltipLite'; 7 | export type { TooltipProps } from './Tooltip'; 8 | export * from './type'; 9 | 10 | export const Tooltip = _Tooltip; 11 | export const TooltipLite = _TooltipLite; 12 | export default Tooltip; 13 | -------------------------------------------------------------------------------- /packages/components/tooltip/style/css.js: -------------------------------------------------------------------------------- 1 | import './index.css'; 2 | -------------------------------------------------------------------------------- /packages/components/tooltip/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../../common/style/web/components/tooltip/_index.less'; 2 | -------------------------------------------------------------------------------- /packages/components/transfer/_example/base.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { Transfer } from 'tdesign-react'; 3 | 4 | import type { TransferProps } from 'tdesign-react'; 5 | 6 | const list: TransferProps['data'] = []; 7 | for (let i = 0; i < 20; i++) { 8 | list.push({ 9 | value: i.toString(), 10 | label: `内容${i + 1}`, 11 | disabled: i % 4 < 1, 12 | }); 13 | } 14 | 15 | export default function BaseExample() { 16 | const [value, setValue] = useState(['2']); 17 | 18 | return setValue(v)}>; 19 | } 20 | -------------------------------------------------------------------------------- /packages/components/transfer/_example/empty.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Transfer } from 'tdesign-react'; 3 | 4 | export default function BaseExample() { 5 | return ( 6 |
7 |

默认暂无数据

8 | 9 |

自定义暂无数据

10 | 14 | No Target 15 |
, 16 | ]} 17 | > 18 | 19 | ); 20 | } 21 | -------------------------------------------------------------------------------- /packages/components/transfer/_example/search.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Transfer } from 'tdesign-react'; 3 | 4 | import type { TransferProps } from 'tdesign-react'; 5 | 6 | const list: TransferProps['data'] = []; 7 | for (let i = 0; i < 20; i++) { 8 | list.push({ 9 | value: i.toString(), 10 | label: `内容${i + 1}`, 11 | disabled: i % 4 < 1, 12 | }); 13 | } 14 | 15 | export default function SearchExample() { 16 | return ; 17 | } 18 | -------------------------------------------------------------------------------- /packages/components/transfer/defaultProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC 3 | * */ 4 | 5 | import { TdTransferProps } from './type'; 6 | 7 | export const transferDefaultProps: TdTransferProps = { 8 | defaultChecked: [], 9 | data: [], 10 | direction: 'both', 11 | search: false, 12 | showCheckAll: true, 13 | targetSort: 'original', 14 | title: [], 15 | defaultValue: [], 16 | }; 17 | -------------------------------------------------------------------------------- /packages/components/transfer/index.ts: -------------------------------------------------------------------------------- 1 | import _Transfer from './Transfer'; 2 | 3 | import './style/index.js'; 4 | 5 | export type { TransferProps } from './Transfer'; 6 | export * from './type'; 7 | 8 | export const Transfer = _Transfer; 9 | export default Transfer; 10 | -------------------------------------------------------------------------------- /packages/components/transfer/style/css.js: -------------------------------------------------------------------------------- 1 | import './index.css'; 2 | -------------------------------------------------------------------------------- /packages/components/transfer/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../../common/style/web/components/transfer/_index.less'; 2 | -------------------------------------------------------------------------------- /packages/components/tree-select/index.ts: -------------------------------------------------------------------------------- 1 | import _TreeSelect from './TreeSelect'; 2 | 3 | import './style/index.js'; 4 | 5 | export type { TreeSelectProps } from './TreeSelect'; 6 | export * from './type'; 7 | 8 | export const TreeSelect = _TreeSelect; 9 | export default TreeSelect; 10 | -------------------------------------------------------------------------------- /packages/components/tree-select/style/css.js: -------------------------------------------------------------------------------- 1 | import './index.css'; 2 | -------------------------------------------------------------------------------- /packages/components/tree-select/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../../common/style/web/components/tree-select/_index.less'; 2 | -------------------------------------------------------------------------------- /packages/components/tree/_example/empty.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Tree, Space } from 'tdesign-react'; 3 | import type { TreeProps } from 'tdesign-react'; 4 | 5 | export default () => { 6 | const empty: TreeProps['empty'] =
😊 空数据（ empty props ）
; 7 | 8 | return ( 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | ); 17 | }; 18 | -------------------------------------------------------------------------------- /packages/components/tree/hooks/style/css.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.css'; 2 | -------------------------------------------------------------------------------- /packages/components/tree/hooks/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.js'; 2 | -------------------------------------------------------------------------------- /packages/components/tree/index.ts: -------------------------------------------------------------------------------- 1 | import _Tree from './Tree'; 2 | 3 | import './style/index.js'; 4 | 5 | export type { TreeProps } from './Tree'; 6 | export * from './type'; 7 | 8 | export const Tree = _Tree; 9 | export default Tree; 10 | -------------------------------------------------------------------------------- /packages/components/tree/style/css.js: -------------------------------------------------------------------------------- 1 | import './index.css'; 2 | -------------------------------------------------------------------------------- /packages/components/tree/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../../common/style/web/components/tree/_index.less'; 2 | -------------------------------------------------------------------------------- /packages/components/typography/Typography.tsx: -------------------------------------------------------------------------------- 1 | import Text from './Text'; 2 | import Title from './Title'; 3 | import Paragraph from './Paragraph'; 4 | 5 | const Typography: { 6 | Text: typeof Text; 7 | Title: typeof Title; 8 | Paragraph: typeof Paragraph; 9 | } = () => null; 10 | 11 | Typography.Text = Text; 12 | Typography.Title = Title; 13 | Typography.Paragraph = Paragraph; 14 | 15 | Text.displayName = 'Text'; 16 | Paragraph.displayName = 'Paragraph'; 17 | Title.displayName = 'Title'; 18 | 19 | export default Typography; 20 | -------------------------------------------------------------------------------- /packages/components/typography/_example/title.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Typography } from 'tdesign-react'; 3 | 4 | const { Title } = Typography; 5 | 6 | const TitleExample = () => ( 7 | <> 8 | H1. TDesign 9 | H2. TDesign 10 | H3. TDesign 11 | H4. TDesign 12 | H5. TDesign 13 | H6. TDesign 14 | 15 | ); 16 | 17 | export default TitleExample; 18 | -------------------------------------------------------------------------------- /packages/components/typography/ellipsis/style/css.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.css'; 2 | -------------------------------------------------------------------------------- /packages/components/typography/ellipsis/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.js'; 2 | -------------------------------------------------------------------------------- /packages/components/typography/index.ts: -------------------------------------------------------------------------------- 1 | import _Typography from './Typography'; 2 | 3 | import './style/index.js'; 4 | 5 | export * from './type'; 6 | 7 | export const Typography = _Typography; 8 | export default Typography; 9 | -------------------------------------------------------------------------------- /packages/components/typography/style/css.js: -------------------------------------------------------------------------------- 1 | import './index.css'; 2 | -------------------------------------------------------------------------------- /packages/components/typography/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../../common/style/web/components/typography/_index.less'; 2 | -------------------------------------------------------------------------------- /packages/components/upload/index.tsx: -------------------------------------------------------------------------------- 1 | import _Upload from './upload'; 2 | import type { TdUploadProps as UploadProps } from './type'; 3 | import './style/index.js'; 4 | 5 | export const Upload = _Upload; 6 | 7 | export type { UploadProps }; 8 | export * from './type'; 9 | 10 | export default Upload; 11 | -------------------------------------------------------------------------------- /packages/components/upload/style/css.js: -------------------------------------------------------------------------------- 1 | import './index.css'; 2 | -------------------------------------------------------------------------------- /packages/components/upload/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../../common/style/web/components/upload/_index.less'; 2 | -------------------------------------------------------------------------------- /packages/components/upload/themes/README.md: -------------------------------------------------------------------------------- 1 | - CustomFile 自定义文件上传 2 | - NormalFile 普通文件上传，支持单文件和多文件（不带拖拽） 3 | - ImageCard 普通图片上传，支持单文件和多文件（不带拖拽） 4 | - DraggerFile 单文件或图片拖拽上传 5 | - MultipleFlowList 批量图片/文件上传（带拖拽） -------------------------------------------------------------------------------- /packages/components/watermark/_example/base.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Watermark } from 'tdesign-react'; 3 | 4 | export default function BaseWatermark() { 5 | return ( 6 | 7 |
8 | 9 | ); 10 | } 11 | -------------------------------------------------------------------------------- /packages/components/watermark/_example/graylevel.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Watermark } from 'tdesign-react'; 3 | 4 | export default function GrayscaleWatermark() { 5 | return ( 6 | 17 |
18 | 19 | ); 20 | } 21 | -------------------------------------------------------------------------------- /packages/components/watermark/_example/image.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Watermark } from 'tdesign-react'; 3 | 4 | export default function ImageWatermark() { 5 | return ( 6 | 16 |
17 | 18 | ); 19 | } 20 | -------------------------------------------------------------------------------- /packages/components/watermark/_example/movingImage.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Watermark } from 'tdesign-react'; 3 | 4 | export default function MovingImageWatermark() { 5 | return ( 6 | 14 |
15 | 16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /packages/components/watermark/_example/movingText.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Watermark } from 'tdesign-react'; 3 | 4 | export default function MovingTextWatermark() { 5 | return ( 6 | 7 |
8 | 9 | ); 10 | } 11 | -------------------------------------------------------------------------------- /packages/components/watermark/_example/multiline.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Watermark } from 'tdesign-react'; 3 | 4 | export default function MultilineWatermark() { 5 | return ( 6 | 18 |
19 | 20 | ); 21 | } 22 | -------------------------------------------------------------------------------- /packages/components/watermark/defaultProps.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC 3 | * */ 4 | 5 | import { TdWatermarkProps } from './type'; 6 | 7 | export const watermarkDefaultProps: TdWatermarkProps = { 8 | alpha: 1, 9 | isRepeat: true, 10 | lineSpace: 16, 11 | movable: false, 12 | moveInterval: 3000, 13 | removable: false, 14 | rotate: -22, 15 | }; 16 | -------------------------------------------------------------------------------- /packages/components/watermark/index.ts: -------------------------------------------------------------------------------- 1 | import _Watermark from './Watermark'; 2 | 3 | import './style/index.js'; 4 | 5 | export type { WatermarkProps } from './Watermark'; 6 | 7 | export * from './type'; 8 | 9 | export const Watermark = _Watermark; 10 | export default Watermark; 11 | -------------------------------------------------------------------------------- /packages/components/watermark/style/css.js: -------------------------------------------------------------------------------- 1 | import './index.css'; 2 | -------------------------------------------------------------------------------- /packages/components/watermark/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../../common/style/web/components/watermark/_index.less'; 2 | -------------------------------------------------------------------------------- /packages/components/watermark/utils.ts: -------------------------------------------------------------------------------- 1 | const toLowercaseSeparator = (key: string) => key.replace(/([A-Z])/g, '-$1').toLowerCase(); 2 | 3 | // style对象转字符串 4 | export const getStyleStr = (style: React.CSSProperties): string => 5 | Object.keys(style) 6 | .map((key: keyof React.CSSProperties) => `${toLowercaseSeparator(key)}: ${style[key]};`) 7 | .join(' '); 8 | -------------------------------------------------------------------------------- /packages/tdesign-react/site/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | dist-ssr 5 | *.local 6 | package-lock.json -------------------------------------------------------------------------------- /packages/tdesign-react/site/README.md: -------------------------------------------------------------------------------- 1 | # tdesign-react 2 | 3 | - 为开发者提供组件文档 4 | - 支持本地组件开发 5 | -------------------------------------------------------------------------------- /packages/tdesign-react/site/babel.config.demo.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['@babel/preset-typescript'], 3 | }; 4 | -------------------------------------------------------------------------------- /packages/tdesign-react/site/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript'], 3 | plugins: ['@babel/plugin-transform-runtime'], 4 | }; 5 | -------------------------------------------------------------------------------- /packages/tdesign-react/site/playground.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | TDesign Web React Playground 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /packages/tdesign-react/site/public/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tdesign-react/59c4545edfe6b8e7177da3ef17f0da35c8a0c48e/packages/tdesign-react/site/public/apple-touch-icon.png -------------------------------------------------------------------------------- /packages/tdesign-react/site/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tdesign-react/59c4545edfe6b8e7177da3ef17f0da35c8a0c48e/packages/tdesign-react/site/public/favicon.ico -------------------------------------------------------------------------------- /packages/tdesign-react/site/public/pwa-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tdesign-react/59c4545edfe6b8e7177da3ef17f0da35c8a0c48e/packages/tdesign-react/site/public/pwa-192x192.png -------------------------------------------------------------------------------- /packages/tdesign-react/site/public/pwa-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tdesign-react/59c4545edfe6b8e7177da3ef17f0da35c8a0c48e/packages/tdesign-react/site/public/pwa-512x512.png -------------------------------------------------------------------------------- /packages/tdesign-react/site/public/sw.js: -------------------------------------------------------------------------------- 1 | import { precacheAndRoute } from 'workbox-precaching' 2 | 3 | precacheAndRoute(self.__WB_MANIFEST) 4 | 5 | self.addEventListener('message', (event) => { 6 | if (event.data && event.data.type === 'SKIP_WAITING') 7 | self.skipWaiting() 8 | }); 9 | -------------------------------------------------------------------------------- /packages/tdesign-react/site/src/pwa.js: -------------------------------------------------------------------------------- 1 | import { registerSW } from 'virtual:pwa-register'; 2 | 3 | const updateSW = registerSW({ 4 | onNeedRefresh() { 5 | console.log('onNeedRefresh'); 6 | }, 7 | onOfflineReady() { 8 | console.log('onOfflineReady'); 9 | }, 10 | }); 11 | -------------------------------------------------------------------------------- /packages/tdesign-react/site/src/styles/Codesandbox.less: -------------------------------------------------------------------------------- 1 | div[slot='action'] { 2 | display: inline-flex; 3 | column-gap: 8px; 4 | } 5 | 6 | .action-online { 7 | width: 32px; 8 | height: 32px; 9 | box-sizing: border-box; 10 | display: inline-flex; 11 | align-items: center; 12 | justify-content: center; 13 | padding: 8px; 14 | transition: all 0.2s linear; 15 | cursor: pointer; 16 | border-radius: 3px; 17 | color: var(--text-secondary); 18 | 19 | &:hover { 20 | color: var(--text-primary); 21 | background-color: var(--bg-color-demo-hover, rgb(243, 243, 243)); 22 | } 23 | } 24 | 25 | -------------------------------------------------------------------------------- /packages/tdesign-react/site/src/sw.js: -------------------------------------------------------------------------------- 1 | import { precacheAndRoute } from 'workbox-precaching' 2 | 3 | precacheAndRoute(self.__WB_MANIFEST) 4 | 5 | self.addEventListener('message', (event) => { 6 | if (event.data && event.data.type === 'SKIP_WAITING') 7 | self.skipWaiting() 8 | }); 9 | -------------------------------------------------------------------------------- /pnpm-workspace.yaml: -------------------------------------------------------------------------------- 1 | packages: 2 | - 'packages/**' 3 | - 'site' 4 | - 'test' -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | const plugins = [ 2 | require('autoprefixer') 3 | ]; 4 | 5 | module.exports = { 6 | plugins, 7 | }; 8 | -------------------------------------------------------------------------------- /script/init-component/tpl/component.tsx.tpl: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import type { Td<%= PascalCaseComponent %>Props } from './type'; 3 | 4 | export type <%= PascalCaseComponent %>Props = Td<%= PascalCaseComponent %>Props; 5 | 6 | 7 | const <%= PascalCaseComponent %> = (props: <%= PascalCaseComponent %>Props) => { 8 | 9 | return ( 10 |
11 | ); 12 | }; 13 | 14 | <%= PascalCaseComponent %>.displayName = '<%= PascalCaseComponent %>'; 15 | 16 | export default <%= PascalCaseComponent %>; 17 | -------------------------------------------------------------------------------- /script/init-component/tpl/example.base.jsx.tpl: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { <%= PascalCaseComponent %> } from 'tdesign-react'; 3 | 4 | export default function Basic<%= PascalCaseComponent %>() { 5 | return ( 6 | <<%= PascalCaseComponent %> /> 7 | ); 8 | } 9 | -------------------------------------------------------------------------------- /script/init-component/tpl/index.test.tsx.tpl: -------------------------------------------------------------------------------- 1 | import { testExamples } from '@test/utils'; 2 | 3 | // 测试组件代码 Example 快照 4 | testExamples(__dirname); 5 | -------------------------------------------------------------------------------- /script/init-component/tpl/index.tsx.tpl: -------------------------------------------------------------------------------- 1 | import _<%= PascalCaseComponent %> from './<%= PascalCaseComponent %>'; 2 | 3 | import './style/index.js'; 4 | 5 | export type { <%= PascalCaseComponent %>Props } from './<%= PascalCaseComponent %>'; 6 | 7 | export const <%= PascalCaseComponent %> = _<%= PascalCaseComponent %>; 8 | 9 | export default <%= PascalCaseComponent %>; 10 | -------------------------------------------------------------------------------- /script/init-component/tpl/style.css.js.tpl: -------------------------------------------------------------------------------- 1 | import './index.css'; 2 | -------------------------------------------------------------------------------- /script/init-component/tpl/style.index.js.tpl: -------------------------------------------------------------------------------- 1 | import '../../../common/style/web/components/<%= component %>/_index.less'; 2 | -------------------------------------------------------------------------------- /script/pnpm-dev-preinstall.js: -------------------------------------------------------------------------------- 1 | const child_process = require('child_process'); 2 | 3 | function initSubmodule() { 4 | if (process.env.CI) { 5 | return; 6 | } 7 | try { 8 | child_process.execSync('git submodule update --init', { stdio: 'inherit' }); 9 | console.log('子模块初始化成功'); 10 | } catch (error) { 11 | console.error(`子模块初始化失败: ${error.message}`); 12 | } 13 | } 14 | 15 | initSubmodule(); 16 | -------------------------------------------------------------------------------- /test/config/index.d.ts: -------------------------------------------------------------------------------- 1 | // fix spec/test.tsx cy ts error 2 | /// 3 | -------------------------------------------------------------------------------- /test/config/jest.ssr.conf.js: -------------------------------------------------------------------------------- 1 | const baseConfig = require('./jest.base.conf.js'); 2 | 3 | module.exports = { 4 | ...baseConfig, 5 | testEnvironment: 'node', 6 | coverageDirectory: '/test/ssr/coverage', 7 | modulePathIgnorePatterns: ['/test/ssr/coverage/'], 8 | testRegex: 'test/ssr/.*\\.test\\.js$', 9 | }; 10 | -------------------------------------------------------------------------------- /test/scripts/cypress/fixtures/example.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Using fixtures to represent data", 3 | "email": "hello@ttt.i", 4 | "body": "Fixtures are a great way to mock data for responses to routes" 5 | } -------------------------------------------------------------------------------- /test/scripts/setup-framework.js: -------------------------------------------------------------------------------- 1 | // setup file 2 | import 'babel-polyfill'; 3 | import '@testing-library/jest-dom/extend-expect'; 4 | import ResizeObserver from 'resize-observer-polyfill'; 5 | 6 | global.ResizeObserver = ResizeObserver; 7 | 8 | jest.useFakeTimers(); 9 | -------------------------------------------------------------------------------- /tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig", 3 | "include": ["packages/components"], 4 | "exclude": [ 5 | "**/**/__tests__/*", 6 | "**/**/_example-js/*", 7 | "**/**/_example/*", 8 | "**/**/_usage/*", 9 | "node_modules", 10 | "dist", 11 | "lib", 12 | "esm", 13 | "cjs", 14 | "es" 15 | ], 16 | "compilerOptions": { 17 | "emitDeclarationOnly": true, 18 | "rootDir": "packages/components" 19 | }, 20 | } 21 | -------------------------------------------------------------------------------- /tsconfig.dev.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig", 3 | "include": [ 4 | "./packages/components", 5 | ], 6 | "exclude": [ 7 | "**/**/__tests__/*", 8 | "**/**/_example-js/*", 9 | "**/config-provider/_example/*", 10 | "**/**/_usage/*", 11 | "node_modules", 12 | "dist", 13 | "lib", 14 | "esm", 15 | "cjs", 16 | "es" 17 | ], 18 | "compilerOptions": { 19 | "declaration": false, 20 | "paths": { 21 | "tdesign-react": ["packages/components"], 22 | "@test/utils": ["test/utils"], 23 | "@common/*": ["packages/common/*"] 24 | }, 25 | } 26 | } --------------------------------------------------------------------------------