From 845dee21a0f9effd44edb3485d92ee7680fa21f2 Mon Sep 17 00:00:00 2001 From: pengjiyuan Date: Mon, 25 Oct 2021 12:28:50 +0800 Subject: [PATCH] first commit for open source --- .config/docgen.config.js | 6 + .config/jest.config.js | 27 + .config/style.config.js | 13 + .config/webpack.config.js | 90 + .editorconfig | 10 + .eslintignore | 8 + .eslintrc | 131 + .github/ISSUE_TEMPLATE/config.yml | 5 + .github/PULL_REQUEST_TEMPLATE.md | 52 + .gitignore | 75 + .prettierignore | 3 + .prettierrc | 11 + .storybook/main.js | 59 + .storybook/preview.js | 3 + .stylelintignore | 2 + .stylelintrc | 13 + CODE_OF_CONDUCT.md | 47 + CONTRIBUTING.md | 141 + CONTRIBUTING.zh-CN.md | 142 + LICENSE | 21 + README.md | 107 + README.zh-CN.md | 106 + components/Affix/README.en-US.md | 25 + components/Affix/README.zh-CN.md | 25 + components/Affix/__changelog__/index.en-US.md | 27 + components/Affix/__changelog__/index.zh-CN.md | 35 + components/Affix/__demo__/basic.md | 25 + components/Affix/__demo__/bottom.md | 25 + components/Affix/__demo__/container.md | 63 + components/Affix/__demo__/fixChange.md | 30 + components/Affix/__demo__/top.md | 25 + components/Affix/__template__/index.en-US.md | 17 + components/Affix/__template__/index.zh-CN.md | 17 + .../__test__/__snapshots__/demo.test.ts.snap | 107 + .../__snapshots__/index.test.tsx.snap | 37 + components/Affix/__test__/demo.test.ts | 3 + components/Affix/__test__/index.test.tsx | 106 + components/Affix/index.tsx | 191 + components/Affix/interface.ts | 53 + components/Affix/style/index.less | 8 + components/Affix/style/index.ts | 2 + components/Alert/README.en-US.md | 29 + components/Alert/README.zh-CN.md | 29 + components/Alert/__changelog__/index.en-US.md | 16 + components/Alert/__changelog__/index.zh-CN.md | 16 + components/Alert/__demo__/action.md | 47 + components/Alert/__demo__/banner.md | 49 + components/Alert/__demo__/basic.md | 20 + components/Alert/__demo__/closable.md | 53 + components/Alert/__demo__/closeElement.md | 45 + components/Alert/__demo__/type.md | 36 + components/Alert/__demo__/with-title.md | 46 + components/Alert/__demo__/without-icon.md | 56 + components/Alert/__template__/index.en-US.md | 17 + components/Alert/__template__/index.zh-CN.md | 17 + .../__test__/__snapshots__/demo.test.ts.snap | 1183 ++ .../__snapshots__/index.test.tsx.snap | 94 + components/Alert/__test__/demo.test.ts | 3 + components/Alert/__test__/index.test.tsx | 41 + components/Alert/index.tsx | 108 + components/Alert/interface.ts | 67 + components/Alert/style/index.less | 179 + components/Alert/style/index.ts | 2 + components/Alert/style/token.less | 56 + components/Anchor/README.en-US.md | 39 + components/Anchor/README.zh-CN.md | 39 + .../Anchor/__changelog__/index.en-US.md | 24 + .../Anchor/__changelog__/index.zh-CN.md | 35 + components/Anchor/__demo__/affix.md | 39 + components/Anchor/__demo__/basic.md | 34 + components/Anchor/__demo__/boundary.md | 32 + components/Anchor/__demo__/hash.md | 32 + components/Anchor/__demo__/lineless.md | 32 + components/Anchor/__demo__/static.md | 32 + components/Anchor/__template__/index.en-US.md | 17 + components/Anchor/__template__/index.zh-CN.md | 17 + .../__test__/__snapshots__/demo.test.ts.snap | 517 + .../__snapshots__/index.test.tsx.snap | 55 + components/Anchor/__test__/demo.test.ts | 3 + components/Anchor/__test__/index.test.tsx | 313 + components/Anchor/anchor.tsx | 266 + components/Anchor/context.ts | 15 + components/Anchor/index.tsx | 6 + components/Anchor/interface.ts | 100 + components/Anchor/link.tsx | 90 + components/Anchor/style/index.less | 87 + components/Anchor/style/index.ts | 3 + components/Anchor/style/token.less | 30 + components/Anchor/utils.ts | 46 + components/AutoComplete/README.en-US.md | 50 + components/AutoComplete/README.zh-CN.md | 50 + .../AutoComplete/__changelog__/index.en-US.md | 35 + .../AutoComplete/__changelog__/index.zh-CN.md | 55 + components/AutoComplete/__demo__/advance.md | 48 + components/AutoComplete/__demo__/basic.md | 37 + .../AutoComplete/__demo__/custom-input.md | 44 + components/AutoComplete/__demo__/options.md | 42 + components/AutoComplete/__demo__/strict.md | 32 + .../AutoComplete/__demo__/with-group.md | 59 + .../AutoComplete/__demo__/without-group.md | 56 + .../AutoComplete/__template__/index.en-US.md | 25 + .../AutoComplete/__template__/index.zh-CN.md | 25 + .../__test__/__snapshots__/demo.test.ts.snap | 203 + .../__snapshots__/index.test.tsx.snap | 76 + components/AutoComplete/__test__/demo.test.ts | 3 + .../AutoComplete/__test__/index.test.tsx | 122 + components/AutoComplete/index.tsx | 209 + components/AutoComplete/interface.ts | 121 + components/AutoComplete/style/index.less | 44 + components/AutoComplete/style/index.ts | 4 + components/AutoComplete/style/token.less | 29 + components/Avatar/README.en-US.md | 39 + components/Avatar/README.zh-CN.md | 39 + .../Avatar/__changelog__/index.en-US.md | 22 + .../Avatar/__changelog__/index.zh-CN.md | 68 + components/Avatar/__demo__/autoFixFontSize.md | 39 + components/Avatar/__demo__/basic.md | 36 + components/Avatar/__demo__/group.md | 41 + components/Avatar/__demo__/size.md | 52 + components/Avatar/__demo__/triggerIcon.md | 55 + components/Avatar/__template__/index.en-US.md | 17 + components/Avatar/__template__/index.zh-CN.md | 17 + .../__test__/__snapshots__/demo.test.ts.snap | 558 + .../__snapshots__/index.test.tsx.snap | 52 + components/Avatar/__test__/demo.test.ts | 3 + components/Avatar/__test__/index.test.tsx | 94 + components/Avatar/avatar.tsx | 123 + components/Avatar/context.ts | 4 + components/Avatar/group.tsx | 90 + components/Avatar/index.tsx | 13 + components/Avatar/interface.ts | 97 + components/Avatar/style/index.less | 131 + components/Avatar/style/index.ts | 3 + components/Avatar/style/token.less | 25 + components/BackTop/README.en-US.md | 23 + components/BackTop/README.zh-CN.md | 23 + .../BackTop/__changelog__/index.zh-CN.md | 8 + components/BackTop/__demo__/basic.md | 53 + components/BackTop/__demo__/custom_button.md | 58 + components/BackTop/__demo__/easing.md | 130 + .../BackTop/__template__/index.en-US.md | 17 + .../BackTop/__template__/index.zh-CN.md | 17 + .../__test__/__snapshots__/demo.test.ts.snap | 421 + .../__snapshots__/index.test.tsx.snap | 19 + components/BackTop/__test__/demo.test.ts | 3 + components/BackTop/__test__/index.test.tsx | 34 + components/BackTop/index.tsx | 94 + components/BackTop/interface.ts | 38 + components/BackTop/style/index.less | 33 + components/BackTop/style/index.ts | 2 + components/BackTop/style/token.less | 12 + components/Badge/README.en-US.md | 32 + components/Badge/README.zh-CN.md | 32 + components/Badge/__changelog__/index.en-US.md | 10 + components/Badge/__changelog__/index.zh-CN.md | 18 + components/Badge/__demo__/animate.md | 50 + components/Badge/__demo__/basic.md | 37 + components/Badge/__demo__/color.md | 70 + components/Badge/__demo__/dot.md | 31 + components/Badge/__demo__/max_count.md | 46 + components/Badge/__demo__/no-children.md | 27 + components/Badge/__demo__/status.md | 40 + components/Badge/__demo__/text.md | 38 + components/Badge/__template__/index.en-US.md | 22 + components/Badge/__template__/index.zh-CN.md | 22 + .../__test__/__snapshots__/demo.test.ts.snap | 1243 ++ .../__test__/__snapshots__/index.test.ts.snap | 19 + components/Badge/__test__/demo.test.ts | 3 + components/Badge/__test__/index.test.ts | 6 + components/Badge/count.tsx | 30 + components/Badge/index.tsx | 155 + components/Badge/interface.ts | 71 + components/Badge/style/index.less | 159 + components/Badge/style/index.ts | 2 + components/Badge/style/token.less | 30 + components/Badge/usage/index.en-US.md | 90 + components/Badge/usage/index.zh-CN.md | 88 + components/Breadcrumb/README.en-US.md | 31 + components/Breadcrumb/README.zh-CN.md | 31 + .../Breadcrumb/__changelog__/index.en-US.md | 16 + .../Breadcrumb/__changelog__/index.zh-CN.md | 16 + components/Breadcrumb/__demo__/basic.md | 31 + components/Breadcrumb/__demo__/max-count.md | 33 + components/Breadcrumb/__demo__/separator.md | 42 + components/Breadcrumb/__demo__/size.md | 36 + .../Breadcrumb/__demo__/with-dropdown.md | 66 + components/Breadcrumb/__demo__/with-icon.md | 41 + .../Breadcrumb/__template__/index.en-US.md | 17 + .../Breadcrumb/__template__/index.zh-CN.md | 17 + .../__test__/__snapshots__/demo.test.ts.snap | 736 + .../__snapshots__/index.test.tsx.snap | 19 + components/Breadcrumb/__test__/demo.test.ts | 3 + components/Breadcrumb/__test__/index.test.tsx | 146 + components/Breadcrumb/index.tsx | 125 + components/Breadcrumb/interface.ts | 59 + components/Breadcrumb/item.tsx | 56 + components/Breadcrumb/style/index.less | 76 + components/Breadcrumb/style/index.ts | 3 + components/Breadcrumb/style/token.less | 22 + components/Button/README.en-US.md | 32 + components/Button/README.zh-CN.md | 32 + .../Button/__changelog__/index.en-US.md | 28 + .../Button/__changelog__/index.zh-CN.md | 54 + components/Button/__demo__/basic.md | 37 + components/Button/__demo__/button-group.md | 56 + components/Button/__demo__/disabled.md | 84 + components/Button/__demo__/icon.md | 27 + components/Button/__demo__/loading.md | 84 + components/Button/__demo__/long.md | 39 + components/Button/__demo__/shape.md | 31 + components/Button/__demo__/size.md | 36 + components/Button/__demo__/status.md | 43 + components/Button/__template__/index.en-US.md | 17 + components/Button/__template__/index.zh-CN.md | 17 + .../__test__/__snapshots__/demo.test.ts.snap | 1237 ++ .../__snapshots__/index.test.tsx.snap | 22 + components/Button/__test__/demo.test.ts | 3 + components/Button/__test__/index.test.tsx | 73 + components/Button/group.tsx | 25 + components/Button/index.tsx | 166 + components/Button/interface.ts | 107 + components/Button/style/index.less | 270 + components/Button/style/index.ts | 2 + components/Button/style/token.less | 315 + components/Calendar/README.en-US.md | 36 + components/Calendar/README.zh-CN.md | 36 + .../Calendar/__changelog__/index.en-US.md | 10 + .../Calendar/__changelog__/index.zh-CN.md | 10 + components/Calendar/__demo__/basic.md | 25 + components/Calendar/__demo__/date-content.md | 50 + components/Calendar/__demo__/panel.md | 27 + components/Calendar/__demo__/select-header.md | 25 + .../Calendar/__template__/index.en-US.md | 17 + .../Calendar/__template__/index.zh-CN.md | 17 + .../__test__/__snapshots__/demo.test.ts.snap | 4193 +++++ .../__snapshots__/index.test.tsx.snap | 3037 ++++ components/Calendar/__test__/demo.test.ts | 3 + components/Calendar/__test__/index.test.tsx | 205 + components/Calendar/header/header.tsx | 113 + components/Calendar/header/panel-header.tsx | 64 + components/Calendar/hooks/useCellClassName.ts | 80 + components/Calendar/index.tsx | 215 + components/Calendar/interface.ts | 124 + components/Calendar/month.tsx | 197 + components/Calendar/style/index.less | 435 + components/Calendar/style/index.ts | 4 + components/Calendar/style/token.less | 39 + components/Calendar/week-list.tsx | 35 + components/Calendar/year.tsx | 110 + components/Card/README.en-US.md | 46 + components/Card/README.zh-CN.md | 46 + components/Card/__changelog__/index.en-US.md | 10 + components/Card/__changelog__/index.zh-CN.md | 10 + components/Card/__demo__/basic.md | 29 + components/Card/__demo__/card-grid.md | 52 + components/Card/__demo__/hoverable.md | 53 + components/Card/__demo__/inner-card.md | 30 + components/Card/__demo__/meta.md | 51 + components/Card/__demo__/no-border.md | 48 + components/Card/__demo__/only-content.md | 67 + components/Card/__demo__/with-actions.md | 83 + components/Card/__demo__/with-row.md | 57 + components/Card/__demo__/with-skeleton.md | 127 + components/Card/__demo__/with-tab.md | 41 + components/Card/__template__/index.en-US.md | 17 + components/Card/__template__/index.zh-CN.md | 17 + .../__test__/__snapshots__/demo.test.ts.snap | 1390 ++ .../__snapshots__/index.test.tsx.snap | 31 + components/Card/__test__/demo.test.ts | 3 + components/Card/__test__/index.test.tsx | 58 + components/Card/grid.tsx | 27 + components/Card/index.tsx | 115 + components/Card/interface.ts | 103 + components/Card/meta.tsx | 38 + components/Card/style/index.less | 216 + components/Card/style/index.ts | 3 + components/Card/style/token.less | 36 + components/Carousel/README.en-US.md | 33 + components/Carousel/README.zh-CN.md | 33 + .../Carousel/__changelog__/index.en-US.md | 58 + .../Carousel/__changelog__/index.zh-CN.md | 76 + .../Carousel/__demo__/animation-card.md | 53 + .../Carousel/__demo__/animation-fade.md | 52 + components/Carousel/__demo__/auto.md | 51 + components/Carousel/__demo__/basic.md | 46 + components/Carousel/__demo__/indicator.md | 89 + components/Carousel/__demo__/selfComponent.md | 58 + components/Carousel/__demo__/vertical.md | 49 + .../Carousel/__template__/index.en-US.md | 17 + .../Carousel/__template__/index.zh-CN.md | 17 + .../__test__/__snapshots__/demo.test.ts.snap | 697 + .../__snapshots__/index.test.tsx.snap | 31 + components/Carousel/__test__/demo.test.ts | 3 + components/Carousel/__test__/index.test.tsx | 339 + components/Carousel/arrow.tsx | 47 + components/Carousel/index.tsx | 348 + components/Carousel/indicator.tsx | 71 + components/Carousel/interface.ts | 139 + components/Carousel/style/index.less | 399 + components/Carousel/style/index.ts | 2 + components/Carousel/style/slide.less | 169 + components/Carousel/style/token.less | 33 + components/Cascader/README.en-US.md | 104 + components/Cascader/README.zh-CN.md | 105 + .../Cascader/__changelog__/index.en-US.md | 92 + .../Cascader/__changelog__/index.zh-CN.md | 137 + components/Cascader/__demo__/basic.md | 72 + .../Cascader/__demo__/change_on_select.md | 83 + components/Cascader/__demo__/clear.md | 73 + components/Cascader/__demo__/control.md | 119 + .../Cascader/__demo__/custom_children.md | 102 + components/Cascader/__demo__/disabled.md | 108 + components/Cascader/__demo__/dropdown.md | 92 + components/Cascader/__demo__/filedNames.md | 118 + components/Cascader/__demo__/filter_option.md | 124 + components/Cascader/__demo__/footer.md | 142 + components/Cascader/__demo__/format.md | 71 + components/Cascader/__demo__/loadmore.md | 88 + components/Cascader/__demo__/multiple.md | 83 + components/Cascader/__demo__/onSearch.md | 64 + components/Cascader/__demo__/render_option.md | 123 + components/Cascader/__demo__/search.md | 131 + .../Cascader/__demo__/showEmptyChildren.md | 87 + components/Cascader/__demo__/size.md | 121 + components/Cascader/__demo__/visible.md | 140 + .../Cascader/__template__/index.en-US.md | 62 + .../Cascader/__template__/index.zh-CN.md | 63 + .../__test__/__snapshots__/demo.test.ts.snap | 2070 +++ .../__snapshots__/index.test.tsx.snap | 130 + components/Cascader/__test__/demo.test.ts | 3 + components/Cascader/__test__/index.test.tsx | 433 + components/Cascader/__test__/search.test.tsx | 63 + components/Cascader/base/node.ts | 255 + components/Cascader/base/store.ts | 161 + components/Cascader/cascader.tsx | 404 + components/Cascader/hook/useRefCurrent.ts | 21 + components/Cascader/index.tsx | 8 + components/Cascader/interface.ts | 198 + components/Cascader/panel/list.tsx | 391 + components/Cascader/panel/option.tsx | 55 + components/Cascader/panel/search-panel.tsx | 247 + components/Cascader/style/index.less | 206 + components/Cascader/style/index.ts | 6 + components/Cascader/style/token.less | 24 + components/Checkbox/README.en-US.md | 62 + components/Checkbox/README.zh-CN.md | 61 + .../Checkbox/__changelog__/index.en-US.md | 18 + .../Checkbox/__changelog__/index.zh-CN.md | 36 + components/Checkbox/__demo__/basic.md | 26 + components/Checkbox/__demo__/check_all.md | 65 + components/Checkbox/__demo__/control.md | 42 + components/Checkbox/__demo__/disabled.md | 24 + components/Checkbox/__demo__/group.md | 62 + components/Checkbox/__demo__/group_jsx.md | 49 + components/Checkbox/__demo__/useCheckbox.md | 173 + .../Checkbox/__template__/index.en-US.md | 39 + .../Checkbox/__template__/index.zh-CN.md | 38 + .../__test__/__snapshots__/demo.test.ts.snap | 1624 ++ .../__snapshots__/index.test.tsx.snap | 91 + components/Checkbox/__test__/demo.test.ts | 3 + components/Checkbox/__test__/group.test.tsx | 264 + components/Checkbox/__test__/index.test.tsx | 78 + .../Checkbox/__test__/usecheckbox.test.ts | 101 + components/Checkbox/checkbox.tsx | 115 + components/Checkbox/group.tsx | 115 + components/Checkbox/icon-check.tsx | 12 + components/Checkbox/index.tsx | 5 + components/Checkbox/interface.ts | 90 + components/Checkbox/style/index.less | 181 + components/Checkbox/style/index.ts | 2 + components/Checkbox/style/token.less | 37 + components/Checkbox/useCheckbox.ts | 108 + components/Collapse/README.en-US.md | 42 + components/Collapse/README.zh-CN.md | 42 + .../Collapse/__changelog__/index.en-US.md | 8 + .../Collapse/__changelog__/index.zh-CN.md | 8 + components/Collapse/__demo__/accordion.md | 35 + components/Collapse/__demo__/basic.md | 47 + components/Collapse/__demo__/borderless.md | 47 + components/Collapse/__demo__/customStyle.md | 54 + components/Collapse/__demo__/destoryOnHide.md | 43 + components/Collapse/__demo__/extra.md | 56 + components/Collapse/__demo__/iconPosition.md | 72 + components/Collapse/__demo__/inline.md | 42 + components/Collapse/__demo__/lazyload.md | 43 + .../Collapse/__template__/index.en-US.md | 17 + .../Collapse/__template__/index.zh-CN.md | 17 + .../__test__/__snapshots__/demo.test.ts.snap | 1460 ++ .../__snapshots__/index.test.tsx.snap | 19 + components/Collapse/__test__/demo.test.ts | 3 + components/Collapse/__test__/index.test.tsx | 284 + components/Collapse/collapse.tsx | 130 + components/Collapse/index.tsx | 5 + components/Collapse/interface.ts | 107 + components/Collapse/item.tsx | 136 + components/Collapse/style/index.less | 165 + components/Collapse/style/index.ts | 2 + components/Collapse/style/token.less | 34 + components/Comment/README.en-US.md | 24 + components/Comment/README.zh-CN.md | 24 + components/Comment/__demo__/align.md | 85 + components/Comment/__demo__/basic.md | 84 + components/Comment/__demo__/editor.md | 71 + components/Comment/__demo__/inline.md | 90 + components/Comment/__demo__/list.md | 115 + .../Comment/__template__/index.en-US.md | 17 + .../Comment/__template__/index.zh-CN.md | 17 + .../__test__/__snapshots__/demo.test.ts.snap | 852 + .../__snapshots__/index.test.tsx.snap | 43 + components/Comment/__test__/demo.test.ts | 3 + components/Comment/__test__/index.test.tsx | 87 + components/Comment/index.tsx | 72 + components/Comment/interface.ts | 45 + components/Comment/style/index.less | 66 + components/Comment/style/index.ts | 2 + components/Comment/style/token.less | 17 + components/ConfigProvider/README.en-US.md | 27 + components/ConfigProvider/README.zh-CN.md | 27 + .../__changelog__/index.en-US.md | 20 + .../__changelog__/index.zh-CN.md | 49 + components/ConfigProvider/__demo__/basic.md | 91 + .../__demo__/component-config.md | 109 + .../ConfigProvider/__demo__/renderEmpty.md | 63 + .../__demo__/tablePagination.md | 78 + components/ConfigProvider/__demo__/theme.md | 52 + .../__template__/index.en-US.md | 17 + .../__template__/index.zh-CN.md | 17 + .../__test__/__snapshots__/demo.test.ts.snap | 1731 ++ .../ConfigProvider/__test__/demo.test.ts | 3 + .../ConfigProvider/__test__/locale.test.tsx | 31 + .../ConfigProvider/__test__/theme.test.tsx | 34 + components/ConfigProvider/index.tsx | 131 + components/ConfigProvider/interface.ts | 226 + components/ConfigProvider/style/index.ts | 1 + components/ConfigProvider/util.ts | 134 + components/DatePicker/README.en-US.md | 127 + components/DatePicker/README.zh-CN.md | 127 + .../DatePicker/__changelog__/index.en-US.md | 207 + .../DatePicker/__changelog__/index.zh-CN.md | 284 + components/DatePicker/__demo__/basic.md | 20 + components/DatePicker/__demo__/control.md | 43 + components/DatePicker/__demo__/dateRender.md | 44 + .../DatePicker/__demo__/defaultValue.md | 63 + .../__demo__/disabled-date-advance.md | 50 + .../DatePicker/__demo__/disabled-date.md | 71 + components/DatePicker/__demo__/disabled.md | 41 + components/DatePicker/__demo__/extra.md | 27 + components/DatePicker/__demo__/month.md | 22 + components/DatePicker/__demo__/panel.md | 50 + components/DatePicker/__demo__/quarter.md | 20 + components/DatePicker/__demo__/range.md | 56 + .../__demo__/shortcuts-placement-left.md | 82 + components/DatePicker/__demo__/shortcuts.md | 89 + components/DatePicker/__demo__/showtime.md | 64 + components/DatePicker/__demo__/size.md | 62 + .../DatePicker/__demo__/triggerElement.md | 43 + components/DatePicker/__demo__/week.md | 22 + components/DatePicker/__demo__/year.md | 22 + .../DatePicker/__template__/index.en-US.md | 27 + .../DatePicker/__template__/index.zh-CN.md | 27 + .../__test__/__snapshots__/date.test.tsx.snap | 112 + .../__test__/__snapshots__/demo.test.ts.snap | 4168 +++++ components/DatePicker/__test__/date.test.tsx | 337 + components/DatePicker/__test__/demo.test.ts | 3 + .../DatePicker/__test__/format.test.tsx | 164 + components/DatePicker/__test__/month.test.tsx | 42 + components/DatePicker/__test__/panel.test.tsx | 195 + .../DatePicker/__test__/quarter.test.tsx | 42 + .../DatePicker/__test__/range.hover.test.tsx | 71 + .../DatePicker/__test__/range.panel.test.tsx | 189 + components/DatePicker/__test__/range.test.tsx | 340 + components/DatePicker/__test__/utils.ts | 11 + components/DatePicker/__test__/week.test.tsx | 90 + components/DatePicker/__test__/year.test.tsx | 42 + .../DatePicker/hooks/useCellClassName.ts | 133 + components/DatePicker/index.tsx | 50 + components/DatePicker/interface.tsx | 496 + components/DatePicker/panels/body.tsx | 118 + components/DatePicker/panels/date/index.tsx | 272 + components/DatePicker/panels/footer.tsx | 83 + components/DatePicker/panels/header.tsx | 104 + components/DatePicker/panels/month/index.tsx | 149 + .../DatePicker/panels/quarter/index.tsx | 128 + components/DatePicker/panels/range/index.tsx | 309 + components/DatePicker/panels/shortcuts.tsx | 59 + components/DatePicker/panels/week-list.tsx | 30 + components/DatePicker/panels/week/index.tsx | 59 + components/DatePicker/panels/year/index.tsx | 109 + components/DatePicker/picker-range.tsx | 812 + components/DatePicker/picker.tsx | 529 + components/DatePicker/style/date.less | 102 + components/DatePicker/style/index.less | 305 + components/DatePicker/style/index.ts | 7 + components/DatePicker/style/month.less | 26 + components/DatePicker/style/quarter.less | 8 + components/DatePicker/style/range.less | 9 + components/DatePicker/style/shortcuts.less | 25 + components/DatePicker/style/token.less | 60 + components/DatePicker/style/week.less | 68 + components/DatePicker/style/year.less | 8 + components/DatePicker/util.ts | 29 + components/Descriptions/README.en-US.md | 28 + components/Descriptions/README.zh-CN.md | 28 + .../Descriptions/__changelog__/index.zh-CN.md | 16 + components/Descriptions/__demo__/align.md | 43 + components/Descriptions/__demo__/basic.md | 40 + components/Descriptions/__demo__/border.md | 44 + components/Descriptions/__demo__/layout.md | 82 + .../Descriptions/__demo__/responsive.md | 46 + components/Descriptions/__demo__/single.md | 54 + components/Descriptions/__demo__/size.md | 60 + .../Descriptions/__template__/index.en-US.md | 17 + .../Descriptions/__template__/index.zh-CN.md | 17 + .../__test__/__snapshots__/demo.test.ts.snap | 1444 ++ .../__snapshots__/index.test.tsx.snap | 58 + components/Descriptions/__test__/demo.test.ts | 3 + .../Descriptions/__test__/index.test.tsx | 89 + components/Descriptions/index.tsx | 221 + components/Descriptions/interface.ts | 70 + components/Descriptions/style/index.less | 145 + components/Descriptions/style/index.ts | 2 + components/Descriptions/style/token.less | 45 + components/Divider/README.en-US.md | 20 + components/Divider/README.zh-CN.md | 20 + components/Divider/__demo__/basic.md | 113 + components/Divider/__demo__/vertical.md | 40 + components/Divider/__demo__/with-text.md | 43 + .../Divider/__template__/index.en-US.md | 17 + .../Divider/__template__/index.zh-CN.md | 17 + .../__test__/__snapshots__/demo.test.ts.snap | 227 + .../__snapshots__/index.test.tsx.snap | 19 + components/Divider/__test__/demo.test.ts | 3 + components/Divider/__test__/index.test.tsx | 30 + components/Divider/index.tsx | 42 + components/Divider/interface.ts | 22 + components/Divider/style/index.less | 56 + components/Divider/style/index.ts | 2 + components/Divider/style/token.less | 15 + components/Drawer/README.en-US.md | 45 + components/Drawer/README.zh-CN.md | 44 + .../Drawer/__changelog__/index.en-US.md | 46 + .../Drawer/__changelog__/index.zh-CN.md | 78 + components/Drawer/__demo__/basic.md | 53 + components/Drawer/__demo__/container.md | 58 + components/Drawer/__demo__/drawer_form.md | 104 + components/Drawer/__demo__/nest.md | 74 + components/Drawer/__demo__/nofooter.md | 83 + components/Drawer/__demo__/position.md | 66 + components/Drawer/__demo__/preview.md | 75 + components/Drawer/__template__/index.en-US.md | 17 + components/Drawer/__template__/index.zh-CN.md | 16 + .../__test__/__snapshots__/demo.test.ts.snap | 285 + components/Drawer/__test__/demo.test.ts | 3 + components/Drawer/__test__/index.test.tsx | 129 + components/Drawer/index.tsx | 286 + components/Drawer/interface.ts | 159 + components/Drawer/style/index.less | 123 + components/Drawer/style/index.ts | 3 + components/Drawer/style/token.less | 16 + components/Dropdown/README.en-US.md | 45 + components/Dropdown/README.zh-CN.md | 45 + .../Dropdown/__changelog__/index.en-US.md | 24 + .../Dropdown/__changelog__/index.zh-CN.md | 24 + components/Dropdown/__demo__/basic.md | 58 + components/Dropdown/__demo__/callback.md | 52 + components/Dropdown/__demo__/control.md | 73 + .../Dropdown/__demo__/dropdown-button.md | 66 + components/Dropdown/__demo__/extra-element.md | 56 + components/Dropdown/__demo__/group.md | 63 + components/Dropdown/__demo__/item-icon.md | 67 + components/Dropdown/__demo__/position.md | 55 + components/Dropdown/__demo__/right-click.md | 51 + components/Dropdown/__demo__/sub-menu.md | 76 + components/Dropdown/__demo__/trigger.md | 59 + .../Dropdown/__template__/index.en-US.md | 17 + .../Dropdown/__template__/index.zh-CN.md | 17 + .../__test__/__snapshots__/demo.test.ts.snap | 544 + .../__snapshots__/index.test.tsx.snap | 103 + components/Dropdown/__test__/demo.test.ts | 3 + components/Dropdown/__test__/index.test.tsx | 84 + components/Dropdown/button.tsx | 85 + components/Dropdown/index.tsx | 133 + components/Dropdown/interface.ts | 139 + components/Dropdown/style/index.less | 144 + components/Dropdown/style/index.ts | 4 + components/Dropdown/style/token.less | 57 + components/Empty/README.en-US.md | 21 + components/Empty/README.zh-CN.md | 21 + components/Empty/__demo__/basic.md | 20 + components/Empty/__demo__/custom_icon.md | 41 + components/Empty/__demo__/image.md | 26 + components/Empty/__template__/index.en-US.md | 17 + components/Empty/__template__/index.zh-CN.md | 17 + .../__test__/__snapshots__/demo.test.ts.snap | 115 + .../__test__/__snapshots__/index.test.ts.snap | 100 + components/Empty/__test__/demo.test.ts | 3 + components/Empty/__test__/index.test.ts | 6 + components/Empty/index.tsx | 36 + components/Empty/interface.ts | 24 + components/Empty/style/index.less | 32 + components/Empty/style/index.ts | 2 + components/Empty/style/token.less | 7 + components/Form/README.en-US.md | 195 + components/Form/README.zh-CN.md | 199 + components/Form/__changelog__/index.en-US.md | 213 + components/Form/__changelog__/index.zh-CN.md | 274 + components/Form/__demo__/basic.md | 42 + components/Form/__demo__/control-below.md | 92 + components/Form/__demo__/control.md | 375 + components/Form/__demo__/custom.md | 96 + components/Form/__demo__/disabled.md | 339 + components/Form/__demo__/layout.md | 60 + components/Form/__demo__/list.md | 129 + components/Form/__demo__/methods.md | 95 + components/Form/__demo__/nest.md | 67 + components/Form/__demo__/normalize.md | 83 + components/Form/__demo__/register.md | 62 + components/Form/__demo__/scrollToField.md | 49 + components/Form/__demo__/shouldUpdate.md | 94 + components/Form/__demo__/update.md | 75 + components/Form/__demo__/validate-status.md | 89 + components/Form/__template__/index.en-US.md | 140 + components/Form/__template__/index.zh-CN.md | 144 + .../__test__/__snapshots__/demo.test.ts.snap | 6078 +++++++ components/Form/__test__/case.test.tsx | 196 + components/Form/__test__/demo.test.ts | 3 + components/Form/__test__/dym.test.tsx | 137 + components/Form/__test__/form.test.tsx | 589 + components/Form/__test__/index.test.tsx | 172 + components/Form/__test__/list.test.tsx | 503 + .../Form/__test__/shouldUpdate.test.tsx | 114 + components/Form/__test__/useform.test.tsx | 572 + .../Form/__test__/validateStaus.test.tsx | 102 + components/Form/context.ts | 43 + components/Form/control.tsx | 353 + components/Form/form-item.tsx | 338 + components/Form/form-list.tsx | 139 + components/Form/form.tsx | 178 + components/Form/index.tsx | 30 + components/Form/interface.tsx | 498 + components/Form/promisify.ts | 39 + components/Form/store.tsx | 431 + components/Form/style/index.less | 205 + components/Form/style/index.ts | 3 + components/Form/style/status.less | 184 + components/Form/style/token.less | 69 + components/Form/useForm.ts | 60 + components/Form/utils.tsx | 40 + components/Grid/README.en-US.md | 40 + components/Grid/README.zh-CN.md | 40 + components/Grid/__changelog__/index.en-US.md | 26 + components/Grid/__changelog__/index.zh-CN.md | 34 + components/Grid/__demo__/adaptation.md | 53 + components/Grid/__demo__/adaptation_object.md | 57 + components/Grid/__demo__/basic.md | 154 + components/Grid/__demo__/flex-align.md | 98 + components/Grid/__demo__/flex-justify.md | 132 + components/Grid/__demo__/gutter.md | 100 + components/Grid/__demo__/offset.md | 63 + components/Grid/__demo__/order.md | 58 + components/Grid/__demo__/push_pull.md | 52 + components/Grid/__template__/index.en-US.md | 17 + components/Grid/__template__/index.zh-CN.md | 17 + .../__test__/__snapshots__/demo.test.ts.snap | 824 + .../__snapshots__/index.test.tsx.snap | 37 + components/Grid/__test__/demo.test.ts | 3 + components/Grid/__test__/index.test.tsx | 32 + components/Grid/col.tsx | 105 + components/Grid/index.tsx | 9 + components/Grid/interface.ts | 108 + components/Grid/row.tsx | 126 + components/Grid/style/col.less | 142 + components/Grid/style/index.less | 2 + components/Grid/style/index.ts | 2 + components/Grid/style/row.less | 40 + components/Icon/addFromIconFontCn.tsx | 60 + components/Icon/index.tsx | 56 + components/Icon/style/index.ts | 0 components/Image/README.en-US.md | 89 + components/Image/README.zh-CN.md | 89 + components/Image/__changelog__/index.en-US.md | 76 + components/Image/__changelog__/index.zh-CN.md | 96 + components/Image/__demo__/basic.md | 30 + components/Image/__demo__/caption.md | 46 + .../Image/__demo__/component-preview-group.md | 44 + .../Image/__demo__/component-preview.md | 38 + .../Image/__demo__/custom-preview-actions.md | 51 + components/Image/__demo__/error.md | 39 + components/Image/__demo__/extra-actions.md | 87 + components/Image/__demo__/loader.md | 79 + .../__demo__/preview-get-popup-container.md | 46 + components/Image/__demo__/preview-group.md | 44 + .../Image/__demo__/progressive-loader.md | 49 + components/Image/__template__/index.en-US.md | 21 + components/Image/__template__/index.zh-CN.md | 21 + .../__test__/__snapshots__/demo.test.ts.snap | 348 + .../__snapshots__/index.test.tsx.snap | 40 + components/Image/__test__/demo.test.ts | 3 + components/Image/__test__/index.test.tsx | 82 + components/Image/__test__/preview.test.tsx | 240 + .../Image/__test__/previewGroup.test.tsx | 131 + components/Image/image-footer.tsx | 81 + components/Image/image-preview-arrow.tsx | 52 + components/Image/image-preview-group.tsx | 145 + components/Image/image-preview-toolbar.tsx | 126 + components/Image/image-preview.tsx | 463 + components/Image/image.tsx | 211 + components/Image/index.tsx | 10 + components/Image/interface.ts | 213 + components/Image/previewGroupContext.ts | 40 + components/Image/style/image.less | 207 + components/Image/style/index.less | 5 + components/Image/style/index.ts | 2 + components/Image/style/preview.less | 246 + components/Image/style/token.less | 119 + components/Image/style/trigger.less | 13 + components/Image/trigger-for-toolbar.tsx | 20 + components/Image/utils/getFixTranslate.ts | 43 + components/Image/utils/getScale.ts | 57 + .../Image/utils/hooks/useImageStatus.ts | 19 + components/Image/utils/hooks/useShowFooter.ts | 15 + components/Input/README.en-US.md | 104 + components/Input/README.zh-CN.md | 104 + components/Input/__changelog__/index.en-US.md | 112 + components/Input/__changelog__/index.zh-CN.md | 167 + components/Input/__demo__/addon.md | 55 + components/Input/__demo__/basic.md | 27 + components/Input/__demo__/group.md | 86 + components/Input/__demo__/max-length.md | 65 + components/Input/__demo__/password.md | 34 + components/Input/__demo__/prefix_suffix.md | 55 + components/Input/__demo__/search.md | 43 + components/Input/__demo__/search_loading.md | 45 + components/Input/__demo__/size.md | 148 + components/Input/__demo__/status.md | 30 + components/Input/__demo__/textarea.md | 31 + .../Input/__demo__/textarea_autosize.md | 38 + components/Input/__template__/index.en-US.md | 33 + components/Input/__template__/index.zh-CN.md | 33 + .../__test__/__snapshots__/demo.test.ts.snap | 1718 ++ .../__snapshots__/index.test.tsx.snap | 22 + components/Input/__test__/autoSize.test.ts | 21 + components/Input/__test__/demo.test.ts | 3 + components/Input/__test__/index.test.tsx | 233 + components/Input/autoSizeTextAreaHeight.tsx | 127 + components/Input/group.tsx | 32 + components/Input/index.tsx | 9 + components/Input/input-element.tsx | 208 + components/Input/input.tsx | 224 + components/Input/interface.tsx | 280 + components/Input/password.tsx | 74 + components/Input/search.tsx | 84 + components/Input/style/index.less | 385 + components/Input/style/index.ts | 3 + components/Input/style/password.less | 9 + components/Input/style/search.less | 45 + components/Input/style/size.less | 200 + components/Input/style/textarea.less | 42 + components/Input/style/token.less | 119 + components/Input/textarea.tsx | 209 + components/InputNumber/README.en-US.md | 47 + components/InputNumber/README.zh-CN.md | 47 + .../InputNumber/__changelog__/index.en-US.md | 66 + .../InputNumber/__changelog__/index.zh-CN.md | 85 + components/InputNumber/__demo__/basic.md | 31 + components/InputNumber/__demo__/format.md | 38 + components/InputNumber/__demo__/mode.md | 35 + components/InputNumber/__demo__/precision.md | 40 + components/InputNumber/__demo__/size.md | 59 + components/InputNumber/__demo__/suffix.md | 49 + .../InputNumber/__template__/index.en-US.md | 24 + .../InputNumber/__template__/index.zh-CN.md | 24 + .../__test__/__snapshots__/demo.test.ts.snap | 848 + .../__snapshots__/index.test.tsx.snap | 184 + components/InputNumber/__test__/demo.test.ts | 3 + .../InputNumber/__test__/index.test.tsx | 278 + components/InputNumber/index.tsx | 331 + components/InputNumber/interface.ts | 131 + components/InputNumber/style/index.less | 164 + components/InputNumber/style/index.ts | 3 + components/InputNumber/style/token.less | 21 + components/InputTag/README.en-US.md | 44 + components/InputTag/README.zh-CN.md | 44 + .../InputTag/__changelog__/index.en-US.md | 26 + .../InputTag/__changelog__/index.zh-CN.md | 26 + components/InputTag/__demo__/basic.md | 41 + components/InputTag/__demo__/labelInValue.md | 34 + components/InputTag/__demo__/render-tag.md | 51 + components/InputTag/__demo__/size.md | 50 + components/InputTag/__demo__/validate.md | 36 + .../InputTag/__template__/index.en-US.md | 17 + .../InputTag/__template__/index.zh-CN.md | 17 + .../__test__/__snapshots__/demo.test.ts.snap | 492 + .../__snapshots__/index.test.tsx.snap | 67 + components/InputTag/__test__/demo.test.ts | 3 + components/InputTag/__test__/index.test.tsx | 95 + components/InputTag/index.tsx | 4 + components/InputTag/input-tag.tsx | 350 + components/InputTag/interface.ts | 161 + components/InputTag/style/index.less | 237 + components/InputTag/style/index.ts | 3 + components/InputTag/style/token.less | 83 + components/Layout/README.en-US.md | 59 + components/Layout/README.zh-CN.md | 59 + .../Layout/__changelog__/index.zh-CN.md | 22 + components/Layout/__demo__/basic.md | 93 + components/Layout/__demo__/breakpoint.md | 189 + components/Layout/__demo__/collapsed.md | 177 + components/Layout/__demo__/customIcon.md | 175 + components/Layout/__demo__/resize.md | 70 + components/Layout/__template__/index.en-US.md | 17 + components/Layout/__template__/index.zh-CN.md | 17 + .../__test__/__snapshots__/demo.test.ts.snap | 1908 ++ .../__snapshots__/index.test.tsx.snap | 19 + components/Layout/__test__/demo.test.ts | 3 + components/Layout/__test__/index.test.tsx | 51 + components/Layout/content.tsx | 22 + components/Layout/footer.tsx | 22 + components/Layout/header.tsx | 22 + components/Layout/index.tsx | 64 + components/Layout/interface.ts | 134 + components/Layout/sider.tsx | 185 + components/Layout/style/index.less | 101 + components/Layout/style/index.ts | 4 + components/Layout/style/token.less | 13 + components/Link/README.en-US.md | 22 + components/Link/README.zh-CN.md | 22 + components/Link/__changelog__/index.en-US.md | 19 + components/Link/__changelog__/index.zh-CN.md | 27 + components/Link/__demo__/basic.md | 25 + components/Link/__demo__/dropdown.md | 49 + components/Link/__demo__/hoverable.md | 27 + components/Link/__demo__/icon.md | 40 + components/Link/__demo__/status.md | 47 + components/Link/__template__/index.en-US.md | 17 + components/Link/__template__/index.zh-CN.md | 17 + .../__test__/__snapshots__/demo.test.ts.snap | 276 + .../__snapshots__/index.test.tsx.snap | 19 + components/Link/__test__/demo.test.ts | 3 + components/Link/__test__/index.test.tsx | 64 + components/Link/index.tsx | 59 + components/Link/interface.ts | 31 + components/Link/style/index.less | 102 + components/Link/style/index.ts | 2 + components/Link/style/token.less | 32 + components/List/README.en-US.md | 82 + components/List/README.zh-CN.md | 82 + components/List/__changelog__/index.en-US.md | 93 + components/List/__changelog__/index.zh-CN.md | 111 + components/List/__demo__/action-layout.md | 110 + components/List/__demo__/actions.md | 134 + components/List/__demo__/basic.md | 35 + components/List/__demo__/grid.md | 59 + components/List/__demo__/meta.md | 42 + components/List/__demo__/responsive-grid.md | 81 + components/List/__demo__/scrollLoad.md | 65 + components/List/__demo__/size.md | 56 + components/List/__demo__/virtual-list.md | 55 + components/List/__template__/index.en-US.md | 38 + components/List/__template__/index.zh-CN.md | 38 + .../__test__/__snapshots__/demo.test.ts.snap | 2573 +++ .../__snapshots__/index.test.tsx.snap | 211 + components/List/__test__/demo.test.ts | 3 + components/List/__test__/index.test.tsx | 218 + components/List/index.tsx | 339 + components/List/interface.ts | 202 + components/List/item.tsx | 74 + components/List/meta.tsx | 31 + components/List/style/index.less | 174 + components/List/style/index.ts | 6 + components/List/style/token.less | 50 + components/Mentions/README.en-US.md | 42 + components/Mentions/README.zh-CN.md | 42 + .../Mentions/__changelog__/index.en-US.md | 8 + .../Mentions/__changelog__/index.zh-CN.md | 8 + components/Mentions/__demo__/basic.md | 27 + components/Mentions/__demo__/control.md | 60 + components/Mentions/__demo__/prefix.md | 41 + components/Mentions/__demo__/status.md | 36 + .../Mentions/__template__/index.en-US.md | 18 + .../Mentions/__template__/index.zh-CN.md | 18 + .../__test__/__snapshots__/demo.test.ts.snap | 255 + .../__snapshots__/index.test.tsx.snap | 34 + components/Mentions/__test__/demo.test.ts | 3 + components/Mentions/__test__/index.test.tsx | 120 + components/Mentions/index.tsx | 191 + components/Mentions/interface.ts | 93 + components/Mentions/style/index.less | 35 + components/Mentions/style/index.ts | 2 + components/Mentions/style/token.less | 6 + components/Mentions/utils.ts | 30 + components/Menu/README.en-US.md | 68 + components/Menu/README.zh-CN.md | 68 + components/Menu/__changelog__/index.en-US.md | 115 + components/Menu/__changelog__/index.zh-CN.md | 150 + components/Menu/__demo__/button.md | 130 + components/Menu/__demo__/collapse-control.md | 104 + components/Menu/__demo__/dark-horizontal.md | 59 + components/Menu/__demo__/horizontal.md | 60 + components/Menu/__demo__/pop.md | 127 + components/Menu/__demo__/size.md | 104 + components/Menu/__demo__/sub-menu.md | 97 + components/Menu/__template__/index.en-US.md | 17 + components/Menu/__template__/index.zh-CN.md | 17 + .../__test__/__snapshots__/demo.test.ts.snap | 1404 ++ .../__snapshots__/index.test.tsx.snap | 151 + components/Menu/__test__/demo.test.ts | 3 + components/Menu/__test__/index.test.tsx | 338 + components/Menu/context.ts | 37 + components/Menu/hotkey.ts | 167 + components/Menu/indent.tsx | 19 + components/Menu/index.tsx | 241 + components/Menu/interface.tsx | 217 + components/Menu/item-group.tsx | 39 + components/Menu/item.tsx | 144 + components/Menu/overflow-wrap.tsx | 150 + components/Menu/style/index.less | 399 + components/Menu/style/index.ts | 4 + components/Menu/style/token.less | 99 + components/Menu/sub-menu/index.tsx | 32 + components/Menu/sub-menu/inline.tsx | 99 + components/Menu/sub-menu/pop.tsx | 119 + components/Menu/util.ts | 136 + components/Message/README.en-US.md | 48 + components/Message/README.zh-CN.md | 49 + .../Message/__changelog__/index.en-US.md | 18 + .../Message/__changelog__/index.zh-CN.md | 36 + components/Message/__demo__/basic.md | 30 + components/Message/__demo__/closable.md | 30 + components/Message/__demo__/hide.md | 32 + components/Message/__demo__/icon.md | 60 + components/Message/__demo__/position.md | 40 + components/Message/__demo__/type.md | 52 + .../Message/__demo__/update_duration.md | 40 + components/Message/__demo__/update_message.md | 38 + .../Message/__template__/index.en-US.md | 38 + .../Message/__template__/index.zh-CN.md | 39 + .../__test__/__snapshots__/demo.test.ts.snap | 230 + .../__snapshots__/index.test.tsx.snap | 185 + components/Message/__test__/demo.test.ts | 3 + components/Message/__test__/index.test.tsx | 67 + components/Message/index.tsx | 182 + components/Message/interface.ts | 57 + components/Message/style/index.less | 182 + components/Message/style/index.ts | 2 + components/Message/style/token.less | 54 + components/Modal/README.en-US.md | 107 + components/Modal/README.zh-CN.md | 105 + components/Modal/__changelog__/index.en-US.md | 161 + components/Modal/__changelog__/index.zh-CN.md | 236 + components/Modal/__demo__/async_close.md | 78 + components/Modal/__demo__/basic.md | 45 + components/Modal/__demo__/confirm.md | 42 + components/Modal/__demo__/confirm_type.md | 61 + .../Modal/__demo__/custom_button_text.md | 63 + components/Modal/__demo__/footer.md | 99 + components/Modal/__demo__/header.md | 64 + components/Modal/__demo__/load_data.md | 124 + components/Modal/__demo__/modal_render.md | 53 + components/Modal/__demo__/position.md | 61 + components/Modal/__demo__/update.md | 61 + components/Modal/__demo__/useModal.md | 58 + components/Modal/__demo__/with_alert.md | 99 + components/Modal/__demo__/with_step.md | 117 + components/Modal/__template__/index.en-US.md | 77 + components/Modal/__template__/index.zh-CN.md | 75 + .../__test__/__snapshots__/demo.test.ts.snap | 353 + .../__snapshots__/index.test.tsx.snap | 3 + components/Modal/__test__/api.test.tsx | 110 + components/Modal/__test__/config.test.tsx | 33 + components/Modal/__test__/confirm.test.tsx | 174 + components/Modal/__test__/demo.test.ts | 3 + components/Modal/__test__/index.test.tsx | 123 + components/Modal/__test__/popup.test.tsx | 69 + components/Modal/__test__/useModal.test.tsx | 35 + components/Modal/config.ts | 21 + components/Modal/confirm.tsx | 163 + components/Modal/index.tsx | 3 + components/Modal/interface.ts | 177 + components/Modal/locale.tsx | 23 + components/Modal/modal.tsx | 454 + components/Modal/style/index.less | 219 + components/Modal/style/index.ts | 3 + components/Modal/style/token.less | 34 + components/Modal/useModal/contextHolder.tsx | 27 + components/Modal/useModal/hookModal.tsx | 58 + components/Modal/useModal/index.tsx | 80 + components/Notification/README.en-US.md | 49 + components/Notification/README.zh-CN.md | 49 + .../Notification/__changelog__/index.zh-CN.md | 8 + components/Notification/__demo__/basic.md | 28 + components/Notification/__demo__/btn.md | 43 + components/Notification/__demo__/icon.md | 65 + components/Notification/__demo__/position.md | 76 + components/Notification/__demo__/style.md | 28 + components/Notification/__demo__/type.md | 57 + .../Notification/__demo__/update_duration.md | 42 + .../__demo__/update_notification.md | 40 + .../Notification/__template__/index.en-US.md | 38 + .../Notification/__template__/index.zh-CN.md | 38 + .../__test__/__snapshots__/demo.test.ts.snap | 261 + .../__snapshots__/index.test.tsx.snap | 188 + components/Notification/__test__/demo.test.ts | 3 + .../Notification/__test__/index.test.tsx | 100 + components/Notification/index.tsx | 177 + components/Notification/interface.ts | 62 + components/Notification/style/index.less | 219 + components/Notification/style/index.ts | 2 + components/Notification/style/token.less | 58 + components/PageHeader/README.en-US.md | 25 + components/PageHeader/README.zh-CN.md | 26 + .../PageHeader/__changelog__/index.zh-CN.md | 8 + components/PageHeader/__demo__/background.md | 45 + components/PageHeader/__demo__/basic.md | 38 + components/PageHeader/__demo__/breadcrumb.md | 54 + components/PageHeader/__demo__/conplex.md | 79 + .../PageHeader/__template__/index.en-US.md | 17 + .../PageHeader/__template__/index.zh-CN.md | 18 + .../__test__/__snapshots__/demo.test.ts.snap | 510 + .../__test__/__snapshots__/index.test.ts.snap | 55 + components/PageHeader/__test__/demo.test.ts | 3 + components/PageHeader/__test__/index.test.ts | 6 + components/PageHeader/index.tsx | 89 + components/PageHeader/interface.ts | 45 + components/PageHeader/style/index.less | 128 + components/PageHeader/style/index.ts | 3 + components/PageHeader/style/token.less | 30 + components/Pagination/README.en-US.md | 40 + components/Pagination/README.zh-CN.md | 40 + .../Pagination/__changelog__/index.en-US.md | 26 + .../Pagination/__changelog__/index.zh-CN.md | 34 + components/Pagination/__demo__/all-options.md | 26 + components/Pagination/__demo__/basic.md | 20 + components/Pagination/__demo__/change-size.md | 24 + components/Pagination/__demo__/count-more.md | 24 + components/Pagination/__demo__/itemRender.md | 33 + components/Pagination/__demo__/jumper.md | 23 + components/Pagination/__demo__/show-more.md | 56 + components/Pagination/__demo__/show-total.md | 26 + components/Pagination/__demo__/simple.md | 20 + components/Pagination/__demo__/size.md | 41 + components/Pagination/__demo__/style.md | 36 + .../Pagination/__template__/index.en-US.md | 17 + .../Pagination/__template__/index.zh-CN.md | 17 + .../__test__/__snapshots__/demo.test.ts.snap | 1727 ++ .../__snapshots__/index.test.tsx.snap | 136 + components/Pagination/__test__/demo.test.ts | 3 + components/Pagination/__test__/index.test.tsx | 117 + components/Pagination/index.tsx | 5 + components/Pagination/interface.ts | 132 + components/Pagination/page-item.tsx | 196 + components/Pagination/page-jumper.tsx | 93 + components/Pagination/page-options.tsx | 61 + components/Pagination/pagination.tsx | 319 + components/Pagination/style/index.less | 272 + components/Pagination/style/index.ts | 4 + components/Pagination/style/token.less | 72 + components/Popconfirm/README.en-US.md | 38 + components/Popconfirm/README.zh-CN.md | 38 + .../Popconfirm/__changelog__/index.en-US.md | 16 + .../Popconfirm/__changelog__/index.zh-CN.md | 16 + components/Popconfirm/__demo__/basic.md | 35 + components/Popconfirm/__demo__/icon.md | 49 + components/Popconfirm/__demo__/loading.md | 44 + components/Popconfirm/__demo__/position.md | 70 + components/Popconfirm/__demo__/text.md | 37 + .../Popconfirm/__template__/index.en-US.md | 17 + .../Popconfirm/__template__/index.zh-CN.md | 17 + .../__test__/__snapshots__/demo.test.ts.snap | 176 + components/Popconfirm/__test__/demo.test.ts | 3 + components/Popconfirm/__test__/index.test.tsx | 104 + components/Popconfirm/index.tsx | 178 + components/Popconfirm/interface.ts | 132 + components/Popconfirm/style/index.less | 39 + components/Popconfirm/style/index.ts | 5 + components/Popconfirm/style/token.less | 10 + components/Popover/README.en-US.md | 33 + components/Popover/README.zh-CN.md | 33 + .../Popover/__changelog__/index.en-US.md | 24 + .../Popover/__changelog__/index.zh-CN.md | 24 + components/Popover/__demo__/basic.md | 37 + components/Popover/__demo__/popupVisible.md | 74 + components/Popover/__demo__/position.md | 76 + components/Popover/__demo__/trigger.md | 62 + .../Popover/__template__/index.en-US.md | 17 + .../Popover/__template__/index.zh-CN.md | 17 + .../__test__/__snapshots__/demo.test.ts.snap | 181 + components/Popover/__test__/demo.test.ts | 3 + components/Popover/__test__/index.test.tsx | 28 + components/Popover/index.tsx | 75 + components/Popover/interface.ts | 21 + components/Popover/style/index.less | 47 + components/Popover/style/index.ts | 3 + components/Popover/style/token.less | 13 + components/Portal/Portal.tsx | 52 + components/Portal/__test__/index.test.tsx | 37 + components/Portal/index.tsx | 33 + components/Progress/README.en-US.md | 31 + components/Progress/README.zh-CN.md | 31 + .../Progress/__changelog__/index.en-US.md | 33 + .../Progress/__changelog__/index.zh-CN.md | 41 + components/Progress/__demo__/animate.md | 27 + components/Progress/__demo__/basic.md | 24 + components/Progress/__demo__/circle.md | 36 + components/Progress/__demo__/line-gradient.md | 65 + components/Progress/__demo__/mini.md | 39 + components/Progress/__demo__/size.md | 86 + components/Progress/__demo__/status.md | 58 + components/Progress/__demo__/steps.md | 30 + .../Progress/__template__/index.en-US.md | 17 + .../Progress/__template__/index.zh-CN.md | 17 + .../__test__/__snapshots__/demo.test.ts.snap | 1420 ++ .../__snapshots__/index.test.tsx.snap | 76 + components/Progress/__test__/demo.test.ts | 3 + components/Progress/__test__/index.test.tsx | 43 + components/Progress/circle-progress.tsx | 131 + components/Progress/index.tsx | 83 + components/Progress/interface.ts | 81 + components/Progress/line-progess.tsx | 98 + components/Progress/steps-progress.tsx | 60 + components/Progress/style/index.less | 360 + components/Progress/style/index.ts | 3 + components/Progress/style/token.less | 59 + components/Radio/README.en-US.md | 38 + components/Radio/README.zh-CN.md | 38 + components/Radio/__changelog__/index.zh-CN.md | 8 + components/Radio/__demo__/basic.md | 25 + components/Radio/__demo__/direction.md | 37 + components/Radio/__demo__/icon.md | 48 + components/Radio/__demo__/radio_button.md | 39 + components/Radio/__demo__/radio_group.md | 46 + components/Radio/__demo__/size.md | 81 + components/Radio/__template__/index.en-US.md | 17 + components/Radio/__template__/index.zh-CN.md | 17 + .../__test__/__snapshots__/demo.test.ts.snap | 808 + .../__snapshots__/group.test.tsx.snap | 19 + .../__snapshots__/index.test.tsx.snap | 55 + components/Radio/__test__/demo.test.ts | 3 + components/Radio/__test__/group.test.tsx | 165 + components/Radio/__test__/index.test.tsx | 69 + components/Radio/group.tsx | 106 + components/Radio/index.tsx | 6 + components/Radio/interface.ts | 87 + components/Radio/radio.tsx | 96 + components/Radio/style/index.less | 295 + components/Radio/style/index.ts | 2 + components/Radio/style/token.less | 55 + components/Rate/README.en-US.md | 30 + components/Rate/README.zh-CN.md | 30 + components/Rate/__changelog__/index.zh-CN.md | 16 + components/Rate/__demo__/allow-clear.md | 34 + components/Rate/__demo__/allowHalf.md | 20 + components/Rate/__demo__/basic.md | 20 + components/Rate/__demo__/character.md | 63 + components/Rate/__demo__/count.md | 20 + components/Rate/__demo__/grading.md | 25 + components/Rate/__demo__/readonly.md | 20 + components/Rate/__demo__/tooltips.md | 25 + components/Rate/__demo__/with-description.md | 32 + components/Rate/__template__/index.en-US.md | 17 + components/Rate/__template__/index.zh-CN.md | 17 + .../__test__/__snapshots__/demo.test.ts.snap | 2884 +++ .../__snapshots__/index.test.tsx.snap | 664 + components/Rate/__test__/demo.test.ts | 3 + components/Rate/__test__/index.test.tsx | 99 + components/Rate/index.tsx | 170 + components/Rate/interface.ts | 71 + components/Rate/style/index.less | 91 + components/Rate/style/index.ts | 3 + components/Rate/style/token.less | 13 + components/ResizeBox/README.en-US.md | 46 + components/ResizeBox/README.zh-CN.md | 46 + .../ResizeBox/__changelog__/index.en-US.md | 24 + .../ResizeBox/__changelog__/index.zh-CN.md | 11 + components/ResizeBox/__demo__/basic.md | 39 + components/ResizeBox/__demo__/control.md | 53 + .../ResizeBox/__demo__/custom-triggers.md | 90 + components/ResizeBox/__demo__/layout.md | 39 + components/ResizeBox/__demo__/nested_split.md | 46 + components/ResizeBox/__demo__/split.md | 32 + .../ResizeBox/__template__/index.en-US.md | 17 + .../ResizeBox/__template__/index.zh-CN.md | 17 + .../__test__/__snapshots__/demo.test.ts.snap | 493 + .../__snapshots__/index.test.tsx.snap | 112 + components/ResizeBox/__test__/demo.test.ts | 3 + components/ResizeBox/__test__/index.test.tsx | 223 + components/ResizeBox/index.tsx | 242 + components/ResizeBox/interface.ts | 143 + components/ResizeBox/resize-trigger.tsx | 49 + components/ResizeBox/split.tsx | 189 + components/ResizeBox/style/index.less | 95 + components/ResizeBox/style/index.ts | 2 + components/ResizeBox/style/token.less | 4 + components/Result/403.tsx | 617 + components/Result/404.tsx | 448 + components/Result/500.tsx | 505 + components/Result/README.en-US.md | 23 + components/Result/README.zh-CN.md | 23 + .../Result/__changelog__/index.en-US.md | 14 + .../Result/__changelog__/index.zh-CN.md | 23 + components/Result/__demo__/403.md | 27 + components/Result/__demo__/404.md | 31 + components/Result/__demo__/500.md | 28 + components/Result/__demo__/all.md | 39 + components/Result/__demo__/basic.md | 33 + components/Result/__demo__/error.md | 33 + components/Result/__demo__/icon.md | 32 + components/Result/__demo__/info.md | 27 + components/Result/__demo__/warning.md | 28 + components/Result/__template__/index.en-US.md | 17 + components/Result/__template__/index.zh-CN.md | 17 + .../__test__/__snapshots__/demo.test.ts.snap | 2478 +++ .../__snapshots__/index.test.tsx.snap | 136 + components/Result/__test__/demo.test.ts | 3 + components/Result/__test__/index.test.tsx | 31 + components/Result/index.tsx | 90 + components/Result/interface.ts | 37 + components/Result/style/index.less | 96 + components/Result/style/index.ts | 2 + components/Result/style/token.less | 30 + components/Select/README.en-US.md | 105 + components/Select/README.zh-CN.md | 105 + .../Select/__changelog__/index.en-US.md | 303 + .../Select/__changelog__/index.zh-CN.md | 443 + components/Select/__demo__/allow-create.md | 55 + components/Select/__demo__/async-data.md | 82 + components/Select/__demo__/basic.md | 51 + components/Select/__demo__/clear.md | 36 + .../Select/__demo__/custom-popup-width.md | 64 + components/Select/__demo__/dropdown-render.md | 73 + components/Select/__demo__/group.md | 49 + .../Select/__demo__/hide-selected-option.md | 51 + components/Select/__demo__/multiple.md | 88 + components/Select/__demo__/no-border.md | 53 + components/Select/__demo__/on-popup-scroll.md | 97 + components/Select/__demo__/options.md | 40 + components/Select/__demo__/relative.md | 73 + components/Select/__demo__/render-format.md | 79 + components/Select/__demo__/render-tag.md | 64 + components/Select/__demo__/self-input.md | 51 + components/Select/__demo__/show-search.md | 90 + components/Select/__demo__/size.md | 80 + .../Select/__demo__/token-separators.md | 39 + components/Select/__demo__/virtual-list.md | 39 + components/Select/__template__/index.en-US.md | 25 + components/Select/__template__/index.zh-CN.md | 25 + .../__test__/__snapshots__/demo.test.ts.snap | 2179 +++ .../__snapshots__/index.test.tsx.snap | 130 + components/Select/__test__/demo.test.ts | 3 + components/Select/__test__/index.test.tsx | 365 + components/Select/index.tsx | 5 + components/Select/interface.tsx | 295 + components/Select/opt-group.tsx | 25 + components/Select/option.tsx | 85 + components/Select/select.tsx | 702 + components/Select/style/index.less | 387 + components/Select/style/index.ts | 6 + components/Select/style/token.less | 112 + components/Select/utils.tsx | 243 + components/Skeleton/README.en-US.md | 22 + components/Skeleton/README.zh-CN.md | 22 + components/Skeleton/__demo__/animate.md | 69 + components/Skeleton/__demo__/basic.md | 20 + components/Skeleton/__demo__/rows.md | 23 + .../Skeleton/__template__/index.en-US.md | 17 + .../Skeleton/__template__/index.zh-CN.md | 17 + .../__test__/__snapshots__/demo.test.ts.snap | 113 + .../__snapshots__/index.test.tsx.snap | 76 + components/Skeleton/__test__/demo.test.ts | 3 + components/Skeleton/__test__/index.test.tsx | 59 + components/Skeleton/image.tsx | 17 + components/Skeleton/index.tsx | 80 + components/Skeleton/interface.tsx | 53 + components/Skeleton/style/index.less | 85 + components/Skeleton/style/index.ts | 2 + components/Skeleton/style/token.less | 13 + components/Skeleton/text.tsx | 32 + components/Slider/README.en-US.md | 37 + components/Slider/README.zh-CN.md | 37 + .../Slider/__changelog__/index.en-US.md | 24 + .../Slider/__changelog__/index.zh-CN.md | 32 + components/Slider/__demo__/basic.md | 26 + components/Slider/__demo__/direction.md | 51 + components/Slider/__demo__/fixed.md | 27 + components/Slider/__demo__/format-tooltip.md | 36 + components/Slider/__demo__/icon.md | 46 + components/Slider/__demo__/input.md | 27 + components/Slider/__demo__/marks.md | 52 + components/Slider/__demo__/range.md | 30 + components/Slider/__demo__/reversed.md | 48 + components/Slider/__demo__/set-range.md | 45 + components/Slider/__demo__/status.md | 29 + components/Slider/__demo__/step.md | 52 + components/Slider/__demo__/tooltip.md | 37 + components/Slider/__template__/index.en-US.md | 17 + components/Slider/__template__/index.zh-CN.md | 17 + .../__test__/__snapshots__/demo.test.ts.snap | 1230 ++ .../__snapshots__/index.test.tsx.snap | 70 + components/Slider/__test__/demo.test.ts | 3 + components/Slider/__test__/index.test.tsx | 337 + components/Slider/button.tsx | 214 + components/Slider/dots.tsx | 63 + components/Slider/hooks/useLegalValue.ts | 69 + components/Slider/index.tsx | 365 + components/Slider/input.tsx | 58 + components/Slider/interface.tsx | 135 + components/Slider/marks.tsx | 60 + components/Slider/style/index.less | 322 + components/Slider/style/index.ts | 5 + components/Slider/style/token.less | 50 + components/Slider/ticks.tsx | 44 + components/Slider/utils.ts | 27 + components/Space/README.en-US.md | 23 + components/Space/README.zh-CN.md | 23 + components/Space/__changelog__/index.en-US.md | 18 + components/Space/__changelog__/index.zh-CN.md | 30 + components/Space/__demo__/align.md | 46 + components/Space/__demo__/basic.md | 29 + components/Space/__demo__/size.md | 44 + components/Space/__demo__/split.md | 27 + components/Space/__demo__/vertical.md | 27 + components/Space/__demo__/wrap.md | 44 + components/Space/__template__/index.en-US.md | 17 + components/Space/__template__/index.zh-CN.md | 17 + .../__test__/__snapshots__/demo.test.ts.snap | 652 + .../__snapshots__/index.test.tsx.snap | 19 + components/Space/__test__/demo.test.ts | 3 + components/Space/__test__/index.test.tsx | 104 + components/Space/index.tsx | 111 + components/Space/interface.ts | 40 + components/Space/style/index.less | 31 + components/Space/style/index.ts | 2 + components/Spin/README.en-US.md | 25 + components/Spin/README.zh-CN.md | 24 + components/Spin/__changelog__/index.en-US.md | 8 + components/Spin/__changelog__/index.zh-CN.md | 17 + components/Spin/__demo__/basic.md | 20 + components/Spin/__demo__/custom-icon.md | 39 + components/Spin/__demo__/delay.md | 48 + components/Spin/__demo__/dot.md | 20 + components/Spin/__demo__/size.md | 27 + components/Spin/__demo__/spin-component.md | 72 + components/Spin/__demo__/tip.md | 38 + components/Spin/__template__/index.en-US.md | 17 + components/Spin/__template__/index.zh-CN.md | 16 + .../__test__/__snapshots__/demo.test.ts.snap | 539 + .../__snapshots__/index.test.tsx.snap | 73 + components/Spin/__test__/demo.test.ts | 3 + components/Spin/__test__/index.test.tsx | 54 + components/Spin/dot-loading.tsx | 34 + components/Spin/index.tsx | 94 + components/Spin/interface.ts | 45 + components/Spin/style/index.less | 124 + components/Spin/style/index.ts | 2 + components/Spin/style/token.less | 16 + components/Statistic/README.en-US.md | 45 + components/Statistic/README.zh-CN.md | 44 + .../Statistic/__changelog__/index.en-US.md | 34 + .../Statistic/__changelog__/index.zh-CN.md | 50 + components/Statistic/__demo__/basic.md | 26 + components/Statistic/__demo__/countUp.md | 79 + components/Statistic/__demo__/countdown.md | 77 + components/Statistic/__demo__/loading.md | 34 + .../Statistic/__demo__/prefix_suffix.md | 46 + components/Statistic/__demo__/time.md | 26 + .../Statistic/__template__/index.en-US.md | 17 + .../Statistic/__template__/index.zh-CN.md | 16 + .../__test__/__snapshots__/demo.test.ts.snap | 596 + .../__snapshots__/index.test.tsx.snap | 43 + .../Statistic/__test__/countdown.test.tsx | 60 + components/Statistic/__test__/demo.test.ts | 3 + components/Statistic/__test__/index.test.tsx | 134 + components/Statistic/countdown.tsx | 78 + components/Statistic/index.tsx | 159 + components/Statistic/interface.ts | 124 + components/Statistic/style/index.less | 46 + components/Statistic/style/index.ts | 3 + components/Statistic/style/token.less | 14 + components/Statistic/util.ts | 27 + components/Steps/README.en-US.md | 39 + components/Steps/README.zh-CN.md | 39 + components/Steps/__changelog__/index.en-US.md | 47 + components/Steps/__changelog__/index.zh-CN.md | 55 + components/Steps/__demo__/arrow-mini.md | 36 + components/Steps/__demo__/arrow.md | 29 + components/Steps/__demo__/basic.md | 35 + components/Steps/__demo__/change_step.md | 64 + components/Steps/__demo__/customDot.md | 58 + components/Steps/__demo__/description.md | 29 + components/Steps/__demo__/dot.md | 38 + components/Steps/__demo__/error.md | 29 + components/Steps/__demo__/icon.md | 30 + components/Steps/__demo__/label-placement.md | 35 + components/Steps/__demo__/lineless.md | 30 + components/Steps/__demo__/mini.md | 33 + components/Steps/__demo__/navigation.md | 47 + components/Steps/__demo__/onchange.md | 44 + components/Steps/__demo__/vertical.md | 68 + components/Steps/__template__/index.en-US.md | 17 + components/Steps/__template__/index.zh-CN.md | 17 + .../__test__/__snapshots__/demo.test.ts.snap | 1905 ++ .../__snapshots__/index.test.tsx.snap | 19 + components/Steps/__test__/arrow.test.tsx | 47 + components/Steps/__test__/circle.test.tsx | 89 + components/Steps/__test__/demo.test.ts | 3 + components/Steps/__test__/dot.test.tsx | 68 + components/Steps/__test__/index.test.tsx | 47 + components/Steps/index.tsx | 109 + components/Steps/interface.ts | 121 + components/Steps/step.tsx | 109 + components/Steps/style/arrow.less | 201 + components/Steps/style/circle.less | 263 + components/Steps/style/dot.less | 206 + components/Steps/style/index.less | 75 + components/Steps/style/index.ts | 2 + components/Steps/style/navigation.less | 59 + components/Steps/style/token.less | 137 + components/Switch/README.en-US.md | 29 + components/Switch/README.zh-CN.md | 29 + .../Switch/__changelog__/index.zh-CN.md | 24 + components/Switch/__demo__/basic.md | 20 + components/Switch/__demo__/checked_text.md | 28 + components/Switch/__demo__/disabled.md | 30 + components/Switch/__demo__/icon.md | 28 + components/Switch/__demo__/loading.md | 40 + components/Switch/__demo__/size.md | 30 + components/Switch/__demo__/type.md | 27 + components/Switch/__template__/index.en-US.md | 17 + components/Switch/__template__/index.zh-CN.md | 17 + .../__test__/__snapshots__/demo.test.ts.snap | 823 + .../__snapshots__/index.test.tsx.snap | 34 + components/Switch/__test__/demo.test.ts | 3 + components/Switch/__test__/index.test.tsx | 74 + components/Switch/index.tsx | 142 + components/Switch/interface.ts | 66 + components/Switch/style/index.less | 306 + components/Switch/style/index.ts | 2 + components/Switch/style/token.less | 48 + components/Table/README.en-US.md | 154 + components/Table/README.zh-CN.md | 154 + components/Table/__changelog__/index.en-US.md | 363 + components/Table/__changelog__/index.zh-CN.md | 452 + components/Table/__demo__/attribution.md | 222 + components/Table/__demo__/basic.md | 77 + components/Table/__demo__/data-children.md | 108 + components/Table/__demo__/drag-handle.md | 180 + components/Table/__demo__/drag.md | 136 + components/Table/__demo__/expand-sub-table.md | 75 + components/Table/__demo__/expandable.md | 96 + components/Table/__demo__/expandprops.md | 108 + components/Table/__demo__/filter-dropdown.md | 117 + components/Table/__demo__/fixed-column.md | 107 + components/Table/__demo__/group-columns.md | 140 + components/Table/__demo__/header-sticky.md | 110 + components/Table/__demo__/operations.md | 145 + components/Table/__demo__/pagination.md | 106 + components/Table/__demo__/render.md | 74 + components/Table/__demo__/resizable.md | 165 + components/Table/__demo__/rowspan.md | 112 + components/Table/__demo__/selection.md | 116 + components/Table/__demo__/sorter.md | 116 + components/Table/__demo__/style.md | 86 + components/Table/__demo__/summary.md | 161 + components/Table/__demo__/table-edit.md | 277 + components/Table/__demo__/virtualized.md | 72 + components/Table/__template__/index.en-US.md | 49 + components/Table/__template__/index.zh-CN.md | 49 + .../__test__/__snapshots__/demo.test.ts.snap | 14879 ++++++++++++++++ .../__snapshots__/index.test.tsx.snap | 421 + components/Table/__test__/columns.test.tsx | 157 + components/Table/__test__/common/columns.tsx | 180 + components/Table/__test__/common/data.ts | 102 + components/Table/__test__/components.test.tsx | 175 + components/Table/__test__/demo.test.ts | 3 + components/Table/__test__/expand.test.tsx | 202 + components/Table/__test__/filter.test.tsx | 140 + .../Table/__test__/fixed-columns.test.tsx | 188 + .../Table/__test__/group-columns.test.tsx | 85 + components/Table/__test__/index.test.tsx | 118 + components/Table/__test__/pagination.test.tsx | 46 + components/Table/__test__/selection.test.tsx | 386 + components/Table/__test__/sorter.test.tsx | 157 + components/Table/__test__/summary.test.tsx | 104 + .../Table/__test__/virtualized.test.tsx | 19 + components/Table/colgroup.tsx | 50 + components/Table/constant.ts | 2 + components/Table/hooks/useColumns.tsx | 193 + components/Table/hooks/useComponent.tsx | 65 + components/Table/hooks/useExpand.tsx | 63 + components/Table/hooks/useRowSelection.tsx | 157 + components/Table/hooks/useStickyClassNames.ts | 45 + components/Table/hooks/useStickyOffsets.ts | 47 + components/Table/index.tsx | 10 + components/Table/interface.tsx | 668 + components/Table/style/filters-popup.less | 45 + components/Table/style/index.less | 705 + components/Table/style/index.ts | 10 + components/Table/style/token.less | 96 + components/Table/summary/cell.tsx | 20 + components/Table/summary/context.ts | 11 + components/Table/summary/index.tsx | 13 + components/Table/summary/row.tsx | 54 + components/Table/table.tsx | 892 + components/Table/tbody/index.tsx | 186 + components/Table/tbody/td.tsx | 194 + components/Table/tbody/tr.tsx | 254 + components/Table/tfoot/index.tsx | 17 + components/Table/thead/column.tsx | 338 + components/Table/thead/index.tsx | 173 + components/Table/utils.tsx | 13 + components/Tabs/README.en-US.md | 53 + components/Tabs/README.zh-CN.md | 53 + components/Tabs/__changelog__/index.en-US.md | 84 + components/Tabs/__changelog__/index.zh-CN.md | 110 + components/Tabs/__demo__/basic.md | 37 + components/Tabs/__demo__/controled.md | 42 + components/Tabs/__demo__/delete.md | 79 + components/Tabs/__demo__/drag.md | 115 + components/Tabs/__demo__/extra.md | 44 + components/Tabs/__demo__/icon.md | 38 + components/Tabs/__demo__/inline.md | 50 + components/Tabs/__demo__/position.md | 56 + components/Tabs/__demo__/renderTabbar.md | 47 + components/Tabs/__demo__/scroll.md | 60 + components/Tabs/__demo__/size.md | 67 + components/Tabs/__demo__/type.md | 58 + components/Tabs/__template__/index.en-US.md | 17 + components/Tabs/__template__/index.zh-CN.md | 17 + .../__test__/__snapshots__/demo.test.ts.snap | 2107 +++ .../__snapshots__/index.test.tsx.snap | 82 + components/Tabs/__test__/demo.test.ts | 3 + components/Tabs/__test__/index.test.tsx | 163 + components/Tabs/__test__/lazyload.test.tsx | 68 + components/Tabs/hook/useDomSize.ts | 31 + components/Tabs/hook/useHeaderScroll.ts | 113 + components/Tabs/index.tsx | 6 + components/Tabs/interface.ts | 186 + components/Tabs/style/index.less | 666 + components/Tabs/style/index.ts | 3 + components/Tabs/style/token.less | 125 + components/Tabs/style/vertical.less | 159 + components/Tabs/tab-content.tsx | 66 + components/Tabs/tab-header/dropdown-icon.tsx | 81 + components/Tabs/tab-header/index.tsx | 369 + components/Tabs/tab-header/tab-ink.tsx | 77 + components/Tabs/tab-header/tab-nav-icon.tsx | 127 + components/Tabs/tab-header/tab-title.tsx | 66 + components/Tabs/tab-pane.tsx | 43 + components/Tabs/tabs.tsx | 191 + components/Tabs/utils.tsx | 13 + components/Tag/README.en-US.md | 29 + components/Tag/README.zh-CN.md | 29 + components/Tag/__changelog__/index.en-US.md | 18 + components/Tag/__changelog__/index.zh-CN.md | 18 + components/Tag/__demo__/active.md | 83 + components/Tag/__demo__/basic.md | 29 + components/Tag/__demo__/check.md | 33 + components/Tag/__demo__/close-async.md | 34 + components/Tag/__demo__/close.md | 50 + components/Tag/__demo__/color.md | 59 + components/Tag/__demo__/icon.md | 29 + components/Tag/__demo__/size.md | 37 + components/Tag/__template__/index.en-US.md | 17 + components/Tag/__template__/index.zh-CN.md | 17 + .../__test__/__snapshots__/demo.test.ts.snap | 1140 ++ .../__snapshots__/index.test.tsx.snap | 19 + components/Tag/__test__/demo.test.ts | 3 + components/Tag/__test__/index.test.tsx | 93 + components/Tag/index.tsx | 145 + components/Tag/interface.ts | 66 + components/Tag/style/index.less | 140 + components/Tag/style/index.ts | 2 + components/Tag/style/token.less | 135 + components/TimePicker/README.en-US.md | 64 + components/TimePicker/README.zh-CN.md | 64 + .../TimePicker/__changelog__/index.en-US.md | 73 + .../TimePicker/__changelog__/index.zh-CN.md | 90 + components/TimePicker/__demo__/basic.md | 20 + components/TimePicker/__demo__/control.md | 33 + .../TimePicker/__demo__/defaultValue.md | 34 + .../TimePicker/__demo__/disableConfirm.md | 41 + components/TimePicker/__demo__/disabled.md | 27 + .../TimePicker/__demo__/disabledTime.md | 38 + components/TimePicker/__demo__/extra.md | 24 + components/TimePicker/__demo__/format.md | 28 + components/TimePicker/__demo__/rangepicker.md | 27 + components/TimePicker/__demo__/size.md | 44 + components/TimePicker/__demo__/step.md | 31 + .../TimePicker/__demo__/use-12-hours.md | 55 + .../TimePicker/__template__/index.en-US.md | 17 + .../TimePicker/__template__/index.zh-CN.md | 17 + .../__test__/__snapshots__/demo.test.ts.snap | 984 + .../__snapshots__/index.test.tsx.snap | 112 + components/TimePicker/__test__/demo.test.ts | 3 + components/TimePicker/__test__/index.test.tsx | 217 + components/TimePicker/__test__/range.test.tsx | 64 + components/TimePicker/index.tsx | 30 + components/TimePicker/interface.tsx | 216 + components/TimePicker/picker.tsx | 296 + components/TimePicker/range-picker.tsx | 73 + components/TimePicker/style/index.less | 95 + components/TimePicker/style/index.ts | 5 + components/TimePicker/style/token.less | 24 + components/TimePicker/time-column.tsx | 98 + components/TimePicker/time-picker.tsx | 277 + components/TimePicker/util.ts | 47 + components/Timeline/README.en-US.md | 41 + components/Timeline/README.zh-CN.md | 41 + .../Timeline/__changelog__/index.en-US.md | 8 + .../Timeline/__changelog__/index.zh-CN.md | 8 + components/Timeline/__demo__/basic.md | 52 + components/Timeline/__demo__/direction.md | 85 + components/Timeline/__demo__/dot.md | 79 + components/Timeline/__demo__/icon.md | 33 + components/Timeline/__demo__/labelPosition.md | 67 + components/Timeline/__demo__/mode.md | 40 + components/Timeline/__demo__/pending.md | 84 + components/Timeline/__demo__/type.md | 49 + components/Timeline/__demo__/vertical.md | 76 + .../Timeline/__template__/index.en-US.md | 19 + .../Timeline/__template__/index.zh-CN.md | 19 + .../__test__/__snapshots__/demo.test.ts.snap | 2102 +++ .../__snapshots__/index.test.tsx.snap | 19 + components/Timeline/__test__/demo.test.ts | 3 + components/Timeline/__test__/index.test.tsx | 73 + components/Timeline/index.tsx | 5 + components/Timeline/interface.ts | 97 + components/Timeline/item.tsx | 103 + components/Timeline/style/horizontal.less | 82 + components/Timeline/style/index.less | 254 + components/Timeline/style/index.ts | 2 + components/Timeline/style/token.less | 25 + components/Timeline/timeline.tsx | 121 + components/Tooltip/README.en-US.md | 33 + components/Tooltip/README.zh-CN.md | 33 + .../Tooltip/__changelog__/index.en-US.md | 67 + .../Tooltip/__changelog__/index.zh-CN.md | 74 + components/Tooltip/__demo__/basic.md | 32 + components/Tooltip/__demo__/color.md | 35 + components/Tooltip/__demo__/control.md | 48 + components/Tooltip/__demo__/mini.md | 27 + components/Tooltip/__demo__/position.md | 69 + .../Tooltip/__template__/index.en-US.md | 17 + .../Tooltip/__template__/index.zh-CN.md | 17 + .../__test__/__snapshots__/demo.test.ts.snap | 201 + components/Tooltip/__test__/demo.test.ts | 3 + .../Tooltip/__test__/hideempty.test.tsx | 49 + components/Tooltip/__test__/index.test.tsx | 121 + components/Tooltip/index.tsx | 166 + components/Tooltip/interface.ts | 104 + components/Tooltip/style/index.less | 32 + components/Tooltip/style/index.ts | 3 + components/Tooltip/style/token.less | 14 + components/Transfer/README.en-US.md | 55 + components/Transfer/README.zh-CN.md | 55 + .../Transfer/__changelog__/index.en-US.md | 45 + .../Transfer/__changelog__/index.zh-CN.md | 45 + components/Transfer/__demo__/basic.md | 36 + components/Transfer/__demo__/custom-header.md | 56 + components/Transfer/__demo__/drag-sort.md | 51 + components/Transfer/__demo__/more.md | 39 + components/Transfer/__demo__/one-way.md | 38 + components/Transfer/__demo__/pagination.md | 37 + components/Transfer/__demo__/render.md | 45 + components/Transfer/__demo__/show-search.md | 38 + components/Transfer/__demo__/simple.md | 36 + components/Transfer/__demo__/with-table.md | 132 + components/Transfer/__demo__/with-tree.md | 117 + .../Transfer/__template__/index.en-US.md | 25 + .../Transfer/__template__/index.zh-CN.md | 25 + .../__test__/__snapshots__/demo.test.ts.snap | 6508 +++++++ .../__snapshots__/index.test.tsx.snap | 977 + components/Transfer/__test__/demo.test.ts | 3 + components/Transfer/__test__/index.test.tsx | 360 + components/Transfer/index.tsx | 262 + components/Transfer/interface.tsx | 256 + components/Transfer/item.tsx | 154 + components/Transfer/list.tsx | 212 + components/Transfer/style/index.less | 253 + components/Transfer/style/index.ts | 6 + components/Transfer/style/token.less | 48 + components/Tree/README.en-US.md | 91 + components/Tree/README.zh-CN.md | 91 + components/Tree/__changelog__/index.en-US.md | 128 + components/Tree/__changelog__/index.zh-CN.md | 185 + components/Tree/__demo__/basic.md | 44 + components/Tree/__demo__/blocknode.md | 34 + components/Tree/__demo__/checkboxTree.md | 103 + components/Tree/__demo__/checkedStrategy.md | 110 + components/Tree/__demo__/controled.md | 111 + components/Tree/__demo__/drag.md | 150 + components/Tree/__demo__/fieldnames.md | 91 + components/Tree/__demo__/icon.md | 41 + components/Tree/__demo__/icons.md | 48 + components/Tree/__demo__/line.md | 100 + components/Tree/__demo__/loadmore.md | 73 + components/Tree/__demo__/multiple.md | 105 + components/Tree/__demo__/renderTreeNode.md | 119 + components/Tree/__demo__/search.md | 131 + components/Tree/__demo__/size.md | 46 + components/Tree/__demo__/treeData.md | 79 + components/Tree/__demo__/virtual.md | 67 + components/Tree/__template__/index.en-US.md | 42 + components/Tree/__template__/index.zh-CN.md | 42 + .../__test__/__snapshots__/demo.test.ts.snap | 6704 +++++++ .../__snapshots__/index.test.tsx.snap | 19 + components/Tree/__test__/case.test.tsx | 72 + components/Tree/__test__/demo.test.ts | 3 + components/Tree/__test__/fieldname.test.tsx | 102 + components/Tree/__test__/index.test.tsx | 426 + components/Tree/animation.tsx | 129 + components/Tree/context.tsx | 30 + components/Tree/index.tsx | 739 + components/Tree/interface.ts | 335 + components/Tree/node-list.tsx | 133 + components/Tree/node.tsx | 283 + components/Tree/style/index.less | 373 + components/Tree/style/index.ts | 3 + components/Tree/style/token.less | 51 + components/Tree/util.tsx | 165 + components/TreeSelect/README.en-US.md | 59 + components/TreeSelect/README.zh-CN.md | 59 + .../TreeSelect/__changelog__/index.en-US.md | 44 + .../TreeSelect/__changelog__/index.zh-CN.md | 77 + components/TreeSelect/__demo__/basic.md | 33 + components/TreeSelect/__demo__/checkable.md | 109 + .../TreeSelect/__demo__/checkedStrategy.md | 119 + components/TreeSelect/__demo__/controled.md | 72 + .../TreeSelect/__demo__/dropdownRender.md | 104 + components/TreeSelect/__demo__/fieldnames.md | 92 + .../TreeSelect/__demo__/labelInvalue.md | 68 + components/TreeSelect/__demo__/loadmore.md | 88 + components/TreeSelect/__demo__/multiple.md | 89 + components/TreeSelect/__demo__/onSearch.md | 116 + .../TreeSelect/__demo__/popupVisible.md | 54 + components/TreeSelect/__demo__/search.md | 124 + components/TreeSelect/__demo__/self-input.md | 53 + components/TreeSelect/__demo__/size.md | 56 + components/TreeSelect/__demo__/treeData.md | 54 + components/TreeSelect/__demo__/virtual.md | 58 + .../TreeSelect/__template__/index.en-US.md | 17 + .../TreeSelect/__template__/index.zh-CN.md | 17 + .../__test__/__snapshots__/demo.test.ts.snap | 1141 ++ components/TreeSelect/__test__/demo.test.ts | 3 + components/TreeSelect/__test__/index.test.tsx | 587 + components/TreeSelect/hook/useKeyCache.ts | 79 + components/TreeSelect/hook/useStateValue.ts | 153 + components/TreeSelect/hook/useTreeData.ts | 24 + components/TreeSelect/index.tsx | 7 + components/TreeSelect/interface.ts | 171 + components/TreeSelect/style/index.less | 30 + components/TreeSelect/style/index.ts | 5 + components/TreeSelect/style/token.less | 5 + components/TreeSelect/tree-list.tsx | 179 + components/TreeSelect/tree-select.tsx | 317 + components/TreeSelect/utils.tsx | 14 + components/Trigger/README.en-US.md | 74 + components/Trigger/README.zh-CN.md | 75 + .../Trigger/__changelog__/index.en-US.md | 119 + .../Trigger/__changelog__/index.zh-CN.md | 127 + components/Trigger/__demo__/alignPoint.md | 73 + components/Trigger/__demo__/arrow.md | 59 + components/Trigger/__demo__/auto.md | 52 + components/Trigger/__demo__/basic.md | 70 + components/Trigger/__demo__/control.md | 90 + components/Trigger/__demo__/mouse.md | 62 + components/Trigger/__demo__/nest.md | 62 + components/Trigger/__demo__/popupAlign.md | 94 + components/Trigger/__demo__/triggers.md | 56 + .../Trigger/__template__/index.en-US.md | 41 + .../Trigger/__template__/index.zh-CN.md | 42 + .../__test__/__snapshots__/demo.test.ts.snap | 322 + components/Trigger/__test__/case.test.tsx | 149 + components/Trigger/__test__/demo.test.ts | 3 + components/Trigger/__test__/index.test.tsx | 216 + components/Trigger/getPopupStyle.ts | 376 + components/Trigger/index.tsx | 983 + components/Trigger/interface.ts | 217 + components/Trigger/portal.tsx | 35 + components/Trigger/style/index.less | 62 + components/Trigger/style/index.ts | 2 + components/Trigger/style/token.less | 5 + components/Typography/README.en-US.md | 85 + components/Typography/README.zh-CN.md | 85 + .../Typography/__changelog__/index.en-US.md | 73 + .../Typography/__changelog__/index.zh-CN.md | 88 + components/Typography/__demo__/basic.md | 73 + components/Typography/__demo__/ellipsis.md | 98 + components/Typography/__demo__/operations.md | 41 + components/Typography/__demo__/paragraph.md | 42 + components/Typography/__demo__/text.md | 66 + components/Typography/__demo__/title.md | 42 + .../Typography/__template__/index.en-US.md | 17 + .../Typography/__template__/index.zh-CN.md | 17 + .../__test__/__snapshots__/demo.test.ts.snap | 425 + components/Typography/__test__/demo.test.ts | 3 + components/Typography/__test__/index.test.tsx | 225 + components/Typography/base.tsx | 311 + components/Typography/edit-content.tsx | 47 + components/Typography/index.tsx | 24 + components/Typography/interface.tsx | 185 + components/Typography/operations.tsx | 96 + components/Typography/paragraph.tsx | 18 + components/Typography/style/index.less | 196 + components/Typography/style/index.ts | 2 + components/Typography/style/token.less | 54 + components/Typography/text.tsx | 11 + components/Typography/title.tsx | 12 + components/Typography/typography.tsx | 25 + components/Typography/utils.tsx | 104 + components/Upload/README.en-US.md | 100 + components/Upload/README.zh-CN.md | 100 + .../Upload/__changelog__/index.en-US.md | 74 + .../Upload/__changelog__/index.zh-CN.md | 92 + components/Upload/__demo__/avatar.md | 74 + components/Upload/__demo__/basic.md | 27 + components/Upload/__demo__/beforeUpload.md | 41 + components/Upload/__demo__/crop.md | 264 + components/Upload/__demo__/customRequest.md | 67 + components/Upload/__demo__/directory.md | 26 + components/Upload/__demo__/drag.md | 28 + components/Upload/__demo__/icon.md | 70 + components/Upload/__demo__/limit.md | 33 + components/Upload/__demo__/manully.md | 70 + components/Upload/__demo__/onRemove.md | 55 + components/Upload/__demo__/pictureList.md | 37 + components/Upload/__demo__/preview.md | 46 + components/Upload/__demo__/progress.md | 100 + .../Upload/__demo__/renderUploadList.md | 82 + components/Upload/__demo__/trigger.md | 49 + components/Upload/__demo__/uploadList.md | 50 + components/Upload/__template__/index.en-US.md | 47 + components/Upload/__template__/index.zh-CN.md | 47 + .../__test__/__snapshots__/demo.test.ts.snap | 2144 +++ .../__snapshots__/index.test.tsx.snap | 124 + components/Upload/__test__/apis.test.tsx | 219 + components/Upload/__test__/demo.test.ts | 3 + components/Upload/__test__/drop.test.tsx | 187 + components/Upload/__test__/index.test.tsx | 162 + components/Upload/__test__/list.test.tsx | 97 + components/Upload/__test__/methods.test.tsx | 109 + components/Upload/index.tsx | 13 + components/Upload/interface.tsx | 316 + components/Upload/list/index.tsx | 81 + components/Upload/list/pictureItem.tsx | 86 + components/Upload/list/textItem.tsx | 149 + components/Upload/list/uploadProgress.tsx | 92 + components/Upload/request.ts | 79 + components/Upload/style/index.less | 517 + components/Upload/style/index.ts | 5 + components/Upload/style/token.less | 97 + components/Upload/trigger-node.tsx | 168 + components/Upload/upload.tsx | 278 + components/Upload/uploader.tsx | 260 + components/_class/VirtualList/Filler.tsx | 42 + .../VirtualList/__test__/index.test.tsx | 125 + components/_class/VirtualList/index.tsx | 667 + .../_class/VirtualList/utils/algorithmUtil.ts | 87 + .../_class/VirtualList/utils/itemUtil.ts | 175 + components/_class/icon-hover.tsx | 35 + components/_class/notice.tsx | 197 + components/_class/notification.tsx | 84 + components/_class/picker/input-range.tsx | 192 + components/_class/picker/input.tsx | 141 + components/_class/picker/style/index.less | 170 + components/_class/picker/style/token.less | 45 + components/_class/select-view.tsx | 502 + components/_util/classNames.ts | 29 + components/_util/clipboard.ts | 41 + components/_util/constant.ts | 20 + components/_util/dayjs.ts | 186 + components/_util/dom.ts | 48 + components/_util/getHighlightText.tsx | 57 + components/_util/getHotkeyHandler.ts | 53 + components/_util/getStringLength.ts | 12 + components/_util/hooks/useComputedState.ts | 12 + components/_util/hooks/useForceUpdate.ts | 6 + components/_util/hooks/useInterval.ts | 36 + components/_util/hooks/useIsFirstRender.ts | 9 + .../_util/hooks/useIsomorphicLayoutEffect.ts | 8 + components/_util/hooks/useMergeProps.ts | 26 + components/_util/hooks/useMergeValue.ts | 36 + components/_util/hooks/useOverflowHidden.ts | 56 + components/_util/hooks/usePrevious.ts | 9 + components/_util/hooks/useRefs.ts | 16 + components/_util/hooks/useStateCallback.ts | 27 + components/_util/hooks/useStateWithPromise.ts | 35 + components/_util/hooks/useUpdate.ts | 13 + components/_util/hooks/useWatch.ts | 14 + components/_util/include.ts | 13 + components/_util/is.ts | 80 + components/_util/keycode.ts | 45 + components/_util/mergeProps.ts | 17 + components/_util/mergedToString.ts | 24 + components/_util/omit.ts | 15 + components/_util/pad.ts | 17 + components/_util/pick.ts | 14 + components/_util/polyfill/object-assign.ts | 36 + components/_util/raf.ts | 35 + components/_util/resizeObserver.tsx | 46 + components/_util/responsiveObserve.ts | 92 + components/_util/scrollIntoView.ts | 24 + components/_util/style.ts | 39 + components/_util/throttleByRaf.ts | 20 + components/_util/type.ts | 5 + components/_util/warning.ts | 7 + components/index.tsx | 201 + components/locale/default.tsx | 3 + components/locale/en-US.tsx | 157 + components/locale/id-ID.tsx | 157 + components/locale/interface.tsx | 33 + components/locale/ja-JP.tsx | 157 + components/locale/ko-KR.tsx | 157 + components/locale/th-TH.tsx | 157 + components/locale/zh-CN.tsx | 157 + components/locale/zh-HK.tsx | 157 + components/locale/zh-TW.tsx | 157 + components/style/animation.less | 3 + components/style/animation/fade.less | 42 + components/style/animation/slide.less | 115 + components/style/animation/zoom.less | 169 + .../fonts/nunito_for_arco-bold-webfont.woff | Bin 0 -> 26096 bytes .../fonts/nunito_for_arco-bold-webfont.woff2 | Bin 0 -> 19660 bytes .../nunito_for_arco-extralight-webfont.woff | Bin 0 -> 25272 bytes .../nunito_for_arco-extralight-webfont.woff2 | Bin 0 -> 19036 bytes .../fonts/nunito_for_arco-light-webfont.woff | Bin 0 -> 25096 bytes .../fonts/nunito_for_arco-light-webfont.woff2 | Bin 0 -> 18932 bytes .../nunito_for_arco-regular-webfont.woff | Bin 0 -> 25388 bytes .../nunito_for_arco-regular-webfont.woff2 | Bin 0 -> 19164 bytes .../nunito_for_arco-semibold-webfont.woff | Bin 0 -> 25596 bytes .../nunito_for_arco-semibold-webfont.woff2 | Bin 0 -> 19296 bytes components/style/icon.less | 94 + components/style/index.less | 50 + components/style/mixin.less | 24 + components/style/mixins/clearfix.less | 13 + components/style/mixins/index.less | 2 + components/style/normalize.less | 375 + components/style/theme/color/colors.less | 405 + .../style/theme/color/compiled-colors.less | 565 + .../style/theme/color/css-variables.less | 374 + components/style/theme/color/getRgbStr.js | 16 + components/style/theme/color/palette-dark.js | 9 + components/style/theme/color/palette.js | 9 + components/style/theme/component.less | 15 + components/style/theme/css-variables.less | 117 + components/style/theme/default.less | 46 + components/style/theme/global.less | 364 + icon/_svgs/direction/outline/arrow-down.svg | 3 + icon/_svgs/direction/outline/arrow-fall.svg | 6 + icon/_svgs/direction/outline/arrow-left.svg | 3 + icon/_svgs/direction/outline/arrow-right.svg | 3 + icon/_svgs/direction/outline/arrow-rise.svg | 6 + icon/_svgs/direction/outline/arrow-up.svg | 3 + icon/_svgs/direction/outline/caret-down.svg | 3 + icon/_svgs/direction/outline/caret-left.svg | 3 + icon/_svgs/direction/outline/caret-right.svg | 3 + icon/_svgs/direction/outline/caret-up.svg | 3 + icon/_svgs/direction/outline/double-down.svg | 3 + icon/_svgs/direction/outline/double-left.svg | 3 + icon/_svgs/direction/outline/double-right.svg | 3 + icon/_svgs/direction/outline/double-up.svg | 3 + icon/_svgs/direction/outline/down-circle.svg | 4 + icon/_svgs/direction/outline/down.svg | 3 + icon/_svgs/direction/outline/drag-arrow.svg | 8 + icon/_svgs/direction/outline/expand.svg | 3 + icon/_svgs/direction/outline/left-circle.svg | 4 + icon/_svgs/direction/outline/left.svg | 3 + icon/_svgs/direction/outline/menu-fold.svg | 6 + icon/_svgs/direction/outline/menu-unfold.svg | 6 + icon/_svgs/direction/outline/right-circle.svg | 4 + icon/_svgs/direction/outline/right.svg | 3 + icon/_svgs/direction/outline/rotate-left.svg | 5 + icon/_svgs/direction/outline/rotate-right.svg | 5 + icon/_svgs/direction/outline/shrink.svg | 3 + icon/_svgs/direction/outline/swap.svg | 4 + icon/_svgs/direction/outline/to-bottom.svg | 6 + icon/_svgs/direction/outline/to-left.svg | 6 + icon/_svgs/direction/outline/to-right.svg | 6 + icon/_svgs/direction/outline/to-top.svg | 6 + icon/_svgs/direction/outline/up-circle.svg | 4 + icon/_svgs/direction/outline/up.svg | 3 + icon/_svgs/edit/outline/align-center.svg | 3 + icon/_svgs/edit/outline/align-left.svg | 3 + icon/_svgs/edit/outline/align-right.svg | 3 + icon/_svgs/edit/outline/attachment.svg | 3 + icon/_svgs/edit/outline/bg-colors.svg | 5 + icon/_svgs/edit/outline/bold.svg | 3 + icon/_svgs/edit/outline/brush.svg | 3 + icon/_svgs/edit/outline/copy.svg | 3 + icon/_svgs/edit/outline/delete.svg | 4 + icon/_svgs/edit/outline/edit.svg | 3 + icon/_svgs/edit/outline/eraser.svg | 3 + icon/_svgs/edit/outline/filter.svg | 3 + icon/_svgs/edit/outline/find-replace.svg | 3 + icon/_svgs/edit/outline/font-colors.svg | 4 + icon/_svgs/edit/outline/formula.svg | 3 + icon/_svgs/edit/outline/h1.svg | 4 + icon/_svgs/edit/outline/h2.svg | 4 + icon/_svgs/edit/outline/h3.svg | 4 + icon/_svgs/edit/outline/h4.svg | 3 + icon/_svgs/edit/outline/h5.svg | 4 + icon/_svgs/edit/outline/h6.svg | 4 + icon/_svgs/edit/outline/h7.svg | 3 + icon/_svgs/edit/outline/highlight.svg | 3 + icon/_svgs/edit/outline/italic.svg | 3 + icon/_svgs/edit/outline/line-height.svg | 6 + icon/_svgs/edit/outline/link.svg | 3 + icon/_svgs/edit/outline/oblique-line.svg | 3 + icon/_svgs/edit/outline/ordered-list.svg | 6 + icon/_svgs/edit/outline/original-size.svg | 7 + icon/_svgs/edit/outline/paste.svg | 13 + icon/_svgs/edit/outline/quote.svg | 5 + icon/_svgs/edit/outline/redo.svg | 3 + icon/_svgs/edit/outline/scissor.svg | 3 + icon/_svgs/edit/outline/sort-ascending.svg | 3 + icon/_svgs/edit/outline/sort-descending.svg | 3 + icon/_svgs/edit/outline/sort.svg | 3 + icon/_svgs/edit/outline/strikethrough.svg | 4 + icon/_svgs/edit/outline/underline.svg | 3 + icon/_svgs/edit/outline/undo.svg | 3 + icon/_svgs/edit/outline/unordered-list.svg | 3 + icon/_svgs/edit/outline/zoom-in.svg | 3 + icon/_svgs/edit/outline/zoom-out.svg | 3 + icon/_svgs/general/fill/chinese-fill.svg | 5 + icon/_svgs/general/fill/english-fill.svg | 3 + icon/_svgs/general/fill/face-frown-fill.svg | 3 + icon/_svgs/general/fill/face-meh-fill.svg | 3 + icon/_svgs/general/fill/face-smile-fill.svg | 3 + icon/_svgs/general/fill/moon-fill.svg | 3 + icon/_svgs/general/fill/pen-fill.svg | 5 + icon/_svgs/general/fill/sun-fill.svg | 11 + icon/_svgs/general/outline/apps.svg | 6 + icon/_svgs/general/outline/archive.svg | 5 + icon/_svgs/general/outline/book.svg | 3 + icon/_svgs/general/outline/branch.svg | 6 + icon/_svgs/general/outline/bug.svg | 3 + icon/_svgs/general/outline/bulb.svg | 3 + icon/_svgs/general/outline/calendar-clock.svg | 6 + icon/_svgs/general/outline/calendar.svg | 3 + icon/_svgs/general/outline/camera.svg | 3 + icon/_svgs/general/outline/cloud.svg | 3 + icon/_svgs/general/outline/command.svg | 3 + icon/_svgs/general/outline/common.svg | 3 + icon/_svgs/general/outline/compass.svg | 4 + icon/_svgs/general/outline/copyright.svg | 3 + icon/_svgs/general/outline/dashboard.svg | 4 + icon/_svgs/general/outline/desktop.svg | 3 + icon/_svgs/general/outline/dice.svg | 13 + .../general/outline/drag-dot-vertical.svg | 14 + icon/_svgs/general/outline/drag-dot.svg | 14 + icon/_svgs/general/outline/drive-file.svg | 3 + icon/_svgs/general/outline/ear.svg | 3 + icon/_svgs/general/outline/email.svg | 4 + icon/_svgs/general/outline/empty.svg | 3 + icon/_svgs/general/outline/experiment.svg | 3 + icon/_svgs/general/outline/file-audio.svg | 5 + icon/_svgs/general/outline/file-image.svg | 3 + icon/_svgs/general/outline/file-pdf.svg | 4 + icon/_svgs/general/outline/file-video.svg | 4 + icon/_svgs/general/outline/file.svg | 3 + icon/_svgs/general/outline/fire.svg | 3 + icon/_svgs/general/outline/folder-add.svg | 3 + icon/_svgs/general/outline/folder-delete.svg | 3 + icon/_svgs/general/outline/folder.svg | 3 + icon/_svgs/general/outline/gift.svg | 3 + icon/_svgs/general/outline/idcard.svg | 5 + icon/_svgs/general/outline/image-close.svg | 8 + icon/_svgs/general/outline/image.svg | 6 + icon/_svgs/general/outline/interaction.svg | 3 + icon/_svgs/general/outline/language.svg | 7 + icon/_svgs/general/outline/layout.svg | 3 + icon/_svgs/general/outline/loading.svg | 3 + icon/_svgs/general/outline/location.svg | 4 + icon/_svgs/general/outline/lock.svg | 5 + icon/_svgs/general/outline/loop.svg | 3 + icon/_svgs/general/outline/man.svg | 4 + icon/_svgs/general/outline/menu.svg | 3 + icon/_svgs/general/outline/mind-mapping.svg | 3 + icon/_svgs/general/outline/mobile.svg | 4 + icon/_svgs/general/outline/moon.svg | 3 + icon/_svgs/general/outline/mosaic.svg | 28 + icon/_svgs/general/outline/nav.svg | 3 + .../general/outline/notification-close.svg | 3 + icon/_svgs/general/outline/notification.svg | 3 + icon/_svgs/general/outline/palette.svg | 7 + icon/_svgs/general/outline/pen.svg | 3 + icon/_svgs/general/outline/phone.svg | 3 + icon/_svgs/general/outline/printer.svg | 3 + icon/_svgs/general/outline/public.svg | 3 + icon/_svgs/general/outline/pushpin.svg | 3 + icon/_svgs/general/outline/qrcode.svg | 3 + icon/_svgs/general/outline/robot-add.svg | 3 + icon/_svgs/general/outline/robot.svg | 5 + icon/_svgs/general/outline/safe.svg | 3 + icon/_svgs/general/outline/schedule.svg | 4 + icon/_svgs/general/outline/shake.svg | 4 + icon/_svgs/general/outline/skin.svg | 3 + icon/_svgs/general/outline/stamp.svg | 4 + icon/_svgs/general/outline/storage.svg | 8 + icon/_svgs/general/outline/subscribe-add.svg | 3 + icon/_svgs/general/outline/subscribe.svg | 3 + icon/_svgs/general/outline/subscribed.svg | 3 + icon/_svgs/general/outline/sun.svg | 19 + icon/_svgs/general/outline/tag.svg | 5 + icon/_svgs/general/outline/tags.svg | 4 + icon/_svgs/general/outline/thunderbolt.svg | 3 + icon/_svgs/general/outline/tool.svg | 3 + icon/_svgs/general/outline/trophy.svg | 3 + icon/_svgs/general/outline/unlock.svg | 5 + icon/_svgs/general/outline/user-add.svg | 3 + icon/_svgs/general/outline/user-group.svg | 6 + icon/_svgs/general/outline/user.svg | 4 + icon/_svgs/general/outline/video-camera.svg | 3 + icon/_svgs/general/outline/wifi.svg | 6 + icon/_svgs/general/outline/woman.svg | 4 + .../interactive-button/fill/heart-fill.svg | 3 + .../interactive-button/fill/star-fill.svg | 3 + .../fill/thumb-down-fill.svg | 4 + .../interactive-button/fill/thumb-up-fill.svg | 4 + icon/_svgs/interactive-button/outline/at.svg | 3 + .../outline/cloud-download.svg | 3 + .../interactive-button/outline/code-block.svg | 3 + .../outline/code-square.svg | 3 + .../_svgs/interactive-button/outline/code.svg | 3 + .../outline/customer-service.svg | 3 + .../interactive-button/outline/download.svg | 3 + .../interactive-button/outline/export.svg | 3 + .../outline/eye-invisible.svg | 5 + icon/_svgs/interactive-button/outline/eye.svg | 4 + .../interactive-button/outline/heart.svg | 3 + .../interactive-button/outline/history.svg | 3 + .../_svgs/interactive-button/outline/home.svg | 4 + .../interactive-button/outline/import.svg | 3 + .../interactive-button/outline/launch.svg | 5 + .../_svgs/interactive-button/outline/list.svg | 3 + .../outline/message-banned.svg | 3 + .../interactive-button/outline/message.svg | 3 + .../outline/more-vertical.svg | 8 + .../_svgs/interactive-button/outline/more.svg | 8 + .../interactive-button/outline/poweroff.svg | 3 + .../interactive-button/outline/refresh.svg | 3 + .../interactive-button/outline/reply.svg | 3 + .../_svgs/interactive-button/outline/save.svg | 3 + .../_svgs/interactive-button/outline/scan.svg | 3 + .../interactive-button/outline/search.svg | 3 + .../interactive-button/outline/select-all.svg | 3 + .../_svgs/interactive-button/outline/send.svg | 3 + .../interactive-button/outline/settings.svg | 4 + .../interactive-button/outline/share-alt.svg | 3 + .../outline/share-external.svg | 3 + .../outline/share-internal.svg | 3 + .../_svgs/interactive-button/outline/star.svg | 3 + .../_svgs/interactive-button/outline/sync.svg | 6 + .../interactive-button/outline/thumb-down.svg | 3 + .../interactive-button/outline/thumb-up.svg | 3 + .../interactive-button/outline/translate.svg | 3 + .../interactive-button/outline/upload.svg | 3 + .../interactive-button/outline/voice.svg | 3 + icon/_svgs/logo/color/bytedance-color.svg | 1 + icon/_svgs/logo/color/lark-color.svg | 1 + icon/_svgs/logo/color/tiktok-color.svg | 1 + icon/_svgs/logo/color/xigua-color.svg | 1 + icon/_svgs/logo/fill/faceBook-circle-fill.svg | 3 + icon/_svgs/logo/fill/facebook-square-fill.svg | 3 + icon/_svgs/logo/fill/google-circle-fill.svg | 3 + icon/_svgs/logo/fill/qq-circle-fill.svg | 3 + icon/_svgs/logo/fill/twitter-circle-fill.svg | 3 + icon/_svgs/logo/fill/weibo-circle-fill.svg | 3 + icon/_svgs/logo/outline/alipay-circle.svg | 3 + icon/_svgs/logo/outline/code-sandbox.svg | 3 + icon/_svgs/logo/outline/codepen.svg | 3 + icon/_svgs/logo/outline/facebook.svg | 3 + icon/_svgs/logo/outline/github.svg | 3 + icon/_svgs/logo/outline/gitlab.svg | 3 + icon/_svgs/logo/outline/google.svg | 3 + icon/_svgs/logo/outline/qq-zone.svg | 3 + icon/_svgs/logo/outline/qq.svg | 3 + icon/_svgs/logo/outline/twitter.svg | 3 + icon/_svgs/logo/outline/wechat.svg | 3 + icon/_svgs/logo/outline/wechatpay.svg | 3 + icon/_svgs/logo/outline/weibo.svg | 3 + icon/_svgs/media/fill/mute-fill.svg | 7 + icon/_svgs/media/fill/pause-circle-fill.svg | 3 + icon/_svgs/media/fill/play-arrow-fill.svg | 3 + icon/_svgs/media/fill/play-circle-fill.svg | 3 + icon/_svgs/media/fill/skip-next-fill.svg | 4 + icon/_svgs/media/fill/skip-previous-fill.svg | 4 + icon/_svgs/media/fill/sound-fill.svg | 6 + icon/_svgs/media/outline/backward.svg | 4 + icon/_svgs/media/outline/forward.svg | 4 + icon/_svgs/media/outline/fullscreen-exit.svg | 3 + icon/_svgs/media/outline/fullscreen.svg | 3 + icon/_svgs/media/outline/live-broadcast.svg | 3 + icon/_svgs/media/outline/music.svg | 3 + icon/_svgs/media/outline/mute.svg | 3 + icon/_svgs/media/outline/pause-circle.svg | 5 + icon/_svgs/media/outline/pause.svg | 6 + icon/_svgs/media/outline/play-arrow.svg | 3 + icon/_svgs/media/outline/play-circle.svg | 4 + icon/_svgs/media/outline/record-stop.svg | 5 + icon/_svgs/media/outline/record.svg | 5 + icon/_svgs/media/outline/skip-next.svg | 4 + icon/_svgs/media/outline/skip-previous.svg | 4 + icon/_svgs/media/outline/sound.svg | 5 + icon/_svgs/tips/fill/check-circle-fill.svg | 3 + icon/_svgs/tips/fill/close-circle-fill.svg | 3 + .../tips/fill/exclamation-circle-fill.svg | 3 + .../tips/fill/exclamation-polygon-fill.svg | 3 + icon/_svgs/tips/fill/info-circle-fill.svg | 3 + icon/_svgs/tips/fill/minus-circle-fill.svg | 3 + icon/_svgs/tips/fill/plus-circle-fill.svg | 3 + icon/_svgs/tips/fill/question-circle-fill.svg | 3 + icon/_svgs/tips/outline/check-circle.svg | 3 + icon/_svgs/tips/outline/check-square.svg | 3 + icon/_svgs/tips/outline/check.svg | 3 + icon/_svgs/tips/outline/clock-circle.svg | 3 + icon/_svgs/tips/outline/close-circle.svg | 3 + icon/_svgs/tips/outline/close.svg | 3 + .../_svgs/tips/outline/exclamation-circle.svg | 3 + icon/_svgs/tips/outline/exclamation.svg | 6 + icon/_svgs/tips/outline/info-circle.svg | 3 + icon/_svgs/tips/outline/info.svg | 6 + icon/_svgs/tips/outline/minus-circle.svg | 3 + icon/_svgs/tips/outline/minus.svg | 3 + icon/_svgs/tips/outline/plus-circle.svg | 3 + icon/_svgs/tips/outline/plus.svg | 3 + icon/_svgs/tips/outline/question-circle.svg | 4 + icon/_svgs/tips/outline/question.svg | 3 + icon/_svgs/tips/outline/stop.svg | 3 + icon/build/demo.nunjucks.jsx | 206 + icon/build/genDemo.js | 25 + icon/build/genJson.js | 15 + icon/build/generate.js | 218 + icon/build/getSvgData.js | 63 + icon/build/icon.template.nunjucks | 29 + icon/build/maps.js | 20 + icon/build/new.js | 12 + icon/build/out-of-date-maps.js | 1 + icon/demo.js | 206 + icon/icons.json | 895 + icon/index.d.ts | 289 + icon/index.es.js | 282 + icon/index.js | 2263 +++ icon/package.json | 13 + package.json | 158 + scm_build.sh | 9 + scripts/compileColors.js | 54 + scripts/css-variables.js | 118 + scripts/init.sh | 7 + scripts/jest.config.js | 6 + scripts/replace-version-in-html.js | 21 + site/docs/changelog.common.en-US.md | 193 + site/docs/changelog.common.zh-CN.md | 212 + site/docs/designlab/guideline.en-US.md | 72 + site/docs/designlab/guideline.zh-CN.md | 70 + site/docs/designlab/partial-dark.en-US.md | 61 + site/docs/designlab/partial-dark.zh-CN.md | 59 + .../docs/designlab/use-theme-package.en-US.md | 64 + .../docs/designlab/use-theme-package.zh-CN.md | 62 + site/docs/i18n.en-US.md | 39 + site/docs/i18n.zh-CN.md | 39 + site/docs/material/advanced.command.en-US.md | 84 + site/docs/material/advanced.command.zn-CN.md | 82 + .../docs/material/advanced.team-site.en-US.md | 423 + .../docs/material/advanced.team-site.zh-CN.md | 421 + .../advanced.template-develop.en-US.md | 111 + .../advanced.template-develop.zh-CN.md | 109 + site/docs/material/api.group.en-US.md | 104 + site/docs/material/api.group.zh-CN.md | 102 + site/docs/material/api.material.en-US.md | 124 + site/docs/material/api.material.zh-CN.md | 122 + site/docs/material/develop.build.en-US.md | 152 + site/docs/material/develop.build.zh-CN.md | 150 + site/docs/material/develop.docgen.en-US.md | 175 + site/docs/material/develop.docgen.zh-CN.md | 173 + site/docs/material/develop.publish.en-US.md | 76 + site/docs/material/develop.publish.zh-CN.md | 74 + site/docs/material/develop.test.en-US.md | 49 + site/docs/material/develop.test.zh-CN.md | 47 + site/docs/material/init.config.en-US.md | 214 + site/docs/material/init.config.zh-CN.md | 213 + site/docs/material/init.template.en-US.md | 163 + site/docs/material/init.template.zh-CN.md | 161 + site/docs/material/start.guide.en-US.md | 306 + site/docs/material/start.guide.zh-CN.md | 304 + site/docs/material/start.qa.en-US.md | 91 + site/docs/material/start.qa.zh-CN.md | 89 + site/docs/migrate_to_v2.en-US.md | 227 + site/docs/migrate_to_v2.zh-CN.md | 237 + site/docs/pro/build.en-US.md | 29 + site/docs/pro/build.zh-CN.md | 27 + site/docs/pro/directory.en-US.md | 38 + site/docs/pro/directory.zh-CN.md | 37 + site/docs/pro/i18n.en-US.md | 40 + site/docs/pro/i18n.zh-CN.md | 38 + site/docs/pro/layout.en-US.md | 19 + site/docs/pro/layout.zh-CN.md | 17 + site/docs/pro/mock.en-US.md | 75 + site/docs/pro/mock.zh-CN.md | 73 + site/docs/pro/npm-scripts.en-US.md | 83 + site/docs/pro/npm-scripts.zh-CN.md | 81 + site/docs/pro/routes-and-menu.en-US.md | 112 + site/docs/pro/routes-and-menu.zh-CN.md | 110 + site/docs/pro/start.en-US.md | 64 + site/docs/pro/start.zh-CN.md | 62 + site/docs/pro/state-management.en-US.md | 42 + site/docs/pro/state-management.zh-CN.md | 40 + site/docs/pro/webpack-configuration.en-US.md | 110 + site/docs/pro/webpack-configuration.zh-CN.md | 108 + site/docs/question.en-US.md | 152 + site/docs/question.zh-CN.md | 156 + site/docs/start.en-US.md | 126 + site/docs/start.zh-CN.md | 136 + site/docs/theme.en-US.md | 57 + site/docs/theme.zh-CN.md | 57 + site/docs/version_v2.en-US.md | 1166 ++ site/docs/version_v2.zh-CN.md | 1932 ++ site/docs_spec/components/alert.en-US.md | 56 + site/docs_spec/components/alert.zh-CN.md | 54 + site/docs_spec/components/avatar.en-US.md | 57 + site/docs_spec/components/avatar.zh-CN.md | 55 + site/docs_spec/components/badge.en-US.md | 98 + site/docs_spec/components/badge.zh-CN.md | 96 + site/docs_spec/components/breadcrumb.en-US.md | 127 + site/docs_spec/components/breadcrumb.zh-CN.md | 124 + site/docs_spec/components/cascader.en-US.md | 85 + site/docs_spec/components/cascader.zh-CN.md | 83 + site/docs_spec/components/checkbox.en-US.md | 79 + site/docs_spec/components/checkbox.zh-CN.md | 77 + site/docs_spec/components/comment.en-US.md | 56 + site/docs_spec/components/comment.zh-CN.md | 54 + .../components/config-provider.en-US.md | 47 + .../components/config-provider.zh-CN.md | 45 + .../components/descriptions.en-US.md | 52 + .../components/descriptions.zh-CN.md | 51 + site/docs_spec/components/drawer.en-US.md | 69 + site/docs_spec/components/drawer.zh-CN.md | 67 + site/docs_spec/components/dropdown.en-US.md | 119 + site/docs_spec/components/dropdown.zh-CN.md | 117 + site/docs_spec/components/empty.en-US.md | 67 + site/docs_spec/components/empty.zh-CN.md | 65 + site/docs_spec/components/grid.en-US.md | 79 + site/docs_spec/components/grid.zh-CN.md | 77 + site/docs_spec/components/input.en-US.md | 117 + site/docs_spec/components/input.zh-CN.md | 115 + site/docs_spec/components/layout.en-US.md | 81 + site/docs_spec/components/layout.zh-CN.md | 79 + site/docs_spec/components/link.en-US.md | 73 + site/docs_spec/components/link.zh-CN.md | 74 + site/docs_spec/components/list.en-US.md | 79 + site/docs_spec/components/list.zh-CN.md | 77 + site/docs_spec/components/menu.en-US.md | 86 + site/docs_spec/components/menu.zh-CN.md | 85 + site/docs_spec/components/message.en-US.md | 69 + site/docs_spec/components/message.zh-CN.md | 67 + site/docs_spec/components/modal.en-US.md | 114 + site/docs_spec/components/modal.zh-CN.md | 112 + .../components/notification.en-US.md | 106 + .../components/notification.zh-CN.md | 104 + site/docs_spec/components/popconfirm.en-US.md | 58 + site/docs_spec/components/popconfirm.zh-CN.md | 56 + site/docs_spec/components/popover.en-US.md | 85 + site/docs_spec/components/popover.zh-CN.md | 83 + site/docs_spec/components/progress.en-US.md | 89 + site/docs_spec/components/progress.zh-CN.md | 87 + site/docs_spec/components/radio.en-US.md | 100 + site/docs_spec/components/radio.zh-CN.md | 98 + site/docs_spec/components/select.en-US.md | 109 + site/docs_spec/components/select.zh-CN.md | 107 + site/docs_spec/components/skeleton.en-US.md | 106 + site/docs_spec/components/skeleton.zh-CN.md | 104 + site/docs_spec/components/space.en-US.md | 83 + site/docs_spec/components/space.zh-CN.md | 81 + site/docs_spec/components/table.en-US.md | 95 + site/docs_spec/components/table.zh-CN.md | 93 + site/docs_spec/components/tabs.en-US.md | 104 + site/docs_spec/components/tabs.zh-CN.md | 102 + site/docs_spec/components/tooltip.en-US.md | 99 + site/docs_spec/components/tooltip.zh-CN.md | 97 + site/docs_spec/components/transfer.en-US.md | 79 + site/docs_spec/components/transfer.zh-CN.md | 77 + site/docs_spec/components/typography.en-US.md | 70 + site/docs_spec/components/typography.zh-CN.md | 68 + site/docs_spec/components/upload.en-US.md | 115 + site/docs_spec/components/upload.zh-CN.md | 113 + site/docs_spec/introduce.en-US.md | 28 + site/docs_spec/introduce.zh-CN.md | 28 + site/docs_spec/philosophy.en-US.md | 87 + site/docs_spec/philosophy.zh-CN.md | 88 + site/docs_spec/style-guideline.en-US.md | 259 + site/docs_spec/style-guideline.zh-CN.md | 260 + site/docs_spec/values-of-arcodesign.en-US.md | 31 + site/docs_spec/values-of-arcodesign.zh-CN.md | 31 + site/package.json | 38 + site/public/index.ejs | 58 + site/src/App.js | 44 + site/src/assets/arco-logo.svg | 21 + site/src/assets/logo/cover1.png | Bin 0 -> 2302 bytes site/src/assets/logo/cover2.png | Bin 0 -> 2277 bytes site/src/assets/logo/cover3.png | Bin 0 -> 1174 bytes site/src/assets/logo/logo_ArcoPro.svg | 6 + site/src/assets/logo/logo_DesignLab.svg | 6 + site/src/assets/logo/logo_IconBox.svg | 7 + site/src/assets/overview/Affix-dark.svg | 5 + site/src/assets/overview/Affix.svg | 5 + site/src/assets/overview/Alert-dark.svg | 5 + site/src/assets/overview/Alert.svg | 5 + site/src/assets/overview/Anchor-dark.svg | 9 + site/src/assets/overview/Anchor.svg | 9 + .../src/assets/overview/AutoComplete-dark.svg | 18 + site/src/assets/overview/AutoComplete.svg | 19 + site/src/assets/overview/Avatar-dark.svg | 4 + site/src/assets/overview/Avatar.svg | 4 + site/src/assets/overview/BackTop-dark.svg | 4 + site/src/assets/overview/BackTop.svg | 5 + site/src/assets/overview/Badge-dark.svg | 4 + site/src/assets/overview/Badge.svg | 4 + site/src/assets/overview/Breadcrumb-dark.svg | 6 + site/src/assets/overview/Breadcrumb.svg | 12 + site/src/assets/overview/Button-dark.svg | 5 + site/src/assets/overview/Button.svg | 10 + site/src/assets/overview/Calendar-dark.svg | 9 + site/src/assets/overview/Calendar.svg | 9 + site/src/assets/overview/Card-dark.svg | 10 + site/src/assets/overview/Card.svg | 10 + site/src/assets/overview/Carousel-dark.svg | 7 + site/src/assets/overview/Carousel.svg | 7 + site/src/assets/overview/Cascader-dark.svg | 41 + site/src/assets/overview/Cascader.svg | 41 + site/src/assets/overview/Checkbox-dark.svg | 5 + site/src/assets/overview/Checkbox.svg | 5 + site/src/assets/overview/Collapse-dark.svg | 15 + site/src/assets/overview/Collapse.svg | 15 + site/src/assets/overview/Comment-dark.svg | 6 + site/src/assets/overview/Comment.svg | 6 + .../assets/overview/ConfigProvider-dark.svg | 3 + site/src/assets/overview/ConfigProvider.svg | 3 + site/src/assets/overview/DatePicker-dark.svg | 13 + site/src/assets/overview/DatePicker.svg | 19 + .../src/assets/overview/Descriptions-dark.svg | 14 + site/src/assets/overview/Descriptions.svg | 14 + site/src/assets/overview/Divider-dark.svg | 5 + site/src/assets/overview/Divider.svg | 5 + site/src/assets/overview/Drawer-dark.svg | 5 + site/src/assets/overview/Drawer.svg | 5 + site/src/assets/overview/Dropdown-dark.svg | 10 + site/src/assets/overview/Dropdown.svg | 10 + site/src/assets/overview/Empty-dark.svg | 3 + site/src/assets/overview/Empty.svg | 3 + site/src/assets/overview/Form-dark.svg | 5 + site/src/assets/overview/Form.svg | 5 + site/src/assets/overview/Grid-dark.svg | 16 + site/src/assets/overview/Grid.svg | 16 + site/src/assets/overview/Icon-dark.svg | 3 + site/src/assets/overview/Icon.svg | 3 + site/src/assets/overview/Image-dark.svg | 5 + site/src/assets/overview/Image.svg | 5 + site/src/assets/overview/Input-dark.svg | 13 + site/src/assets/overview/Input.svg | 16 + site/src/assets/overview/InputNumber-dark.svg | 13 + site/src/assets/overview/InputNumber.svg | 14 + site/src/assets/overview/Layout-dark.svg | 6 + site/src/assets/overview/Layout.svg | 10 + site/src/assets/overview/Link-dark.svg | 4 + site/src/assets/overview/Link.svg | 7 + site/src/assets/overview/List-dark.svg | 10 + site/src/assets/overview/List.svg | 10 + site/src/assets/overview/Mentions-dark.svg | 4 + site/src/assets/overview/Mentions.svg | 4 + site/src/assets/overview/Menu-dark.svg | 12 + site/src/assets/overview/Menu.svg | 12 + site/src/assets/overview/Message-dark.svg | 6 + site/src/assets/overview/Message.svg | 6 + site/src/assets/overview/Modal-dark.svg | 9 + site/src/assets/overview/Modal.svg | 9 + .../src/assets/overview/Notification-dark.svg | 10 + site/src/assets/overview/Notification.svg | 10 + site/src/assets/overview/PageHeader-dark.svg | 21 + site/src/assets/overview/PageHeader.svg | 21 + site/src/assets/overview/Pagination-dark.svg | 11 + site/src/assets/overview/Pagination.svg | 10 + site/src/assets/overview/Popconfirm-dark.svg | 12 + site/src/assets/overview/Popconfirm.svg | 12 + site/src/assets/overview/Popover-dark.svg | 10 + site/src/assets/overview/Popover.svg | 10 + site/src/assets/overview/Progress-dark.svg | 4 + site/src/assets/overview/Progress.svg | 4 + site/src/assets/overview/Radio-dark.svg | 5 + site/src/assets/overview/Radio.svg | 5 + site/src/assets/overview/Rate-dark.svg | 7 + site/src/assets/overview/Rate.svg | 7 + site/src/assets/overview/ResizeBox-dark.svg | 5 + site/src/assets/overview/ResizeBox.svg | 5 + site/src/assets/overview/Result-dark.svg | 7 + site/src/assets/overview/Result.svg | 7 + site/src/assets/overview/Select-dark.svg | 4 + site/src/assets/overview/Select.svg | 4 + site/src/assets/overview/Skeleton-dark.svg | 7 + site/src/assets/overview/Skeleton.svg | 7 + site/src/assets/overview/Slider-dark.svg | 12 + site/src/assets/overview/Slider.svg | 13 + site/src/assets/overview/Space-dark.svg | 6 + site/src/assets/overview/Space.svg | 6 + site/src/assets/overview/Spin-dark.svg | 7 + site/src/assets/overview/Spin.svg | 6 + site/src/assets/overview/Statistic-dark.svg | 3 + site/src/assets/overview/Statistic.svg | 9 + site/src/assets/overview/Steps-dark.svg | 11 + site/src/assets/overview/Steps.svg | 8 + site/src/assets/overview/Switch-dark.svg | 4 + site/src/assets/overview/Switch.svg | 4 + site/src/assets/overview/Table-dark.svg | 13 + site/src/assets/overview/Table.svg | 13 + site/src/assets/overview/Tabs-dark.svg | 6 + site/src/assets/overview/Tabs.svg | 6 + site/src/assets/overview/Tag-dark.svg | 6 + site/src/assets/overview/Tag.svg | 8 + site/src/assets/overview/TimePicker-dark.svg | 13 + site/src/assets/overview/TimePicker.svg | 17 + site/src/assets/overview/Timeline-dark.svg | 17 + site/src/assets/overview/Timeline.svg | 14 + site/src/assets/overview/Tooltip-dark.svg | 8 + site/src/assets/overview/Tooltip.svg | 8 + site/src/assets/overview/Transfer-dark.svg | 16 + site/src/assets/overview/Transfer.svg | 16 + site/src/assets/overview/Tree-dark.svg | 10 + site/src/assets/overview/Tree.svg | 10 + site/src/assets/overview/TreeSelect-dark.svg | 13 + site/src/assets/overview/TreeSelect.svg | 13 + site/src/assets/overview/Trigger-dark.svg | 6 + site/src/assets/overview/Trigger.svg | 6 + site/src/assets/overview/Typography-dark.svg | 9 + site/src/assets/overview/Typography.svg | 9 + site/src/assets/overview/Upload-dark.svg | 4 + site/src/assets/overview/Upload.svg | 4 + .../assets/showcase/byted-effects-black.svg | 38 + site/src/assets/showcase/byted-effects.svg | 38 + site/src/assets/showcase/feilian-black.svg | 20 + site/src/assets/showcase/feilian.svg | 20 + site/src/assets/showcase/logo_DesignLab.svg | 6 + site/src/assets/showcase/starry-black.svg | 24 + site/src/assets/showcase/starry.svg | 24 + site/src/assets/showcase/toutiao-black.svg | 9 + site/src/assets/showcase/toutiao.svg | 9 + .../src/assets/showcase/volc-engine-black.svg | 31 + site/src/assets/showcase/volc-engine.svg | 31 + site/src/assets/showcase/volc-live-black.svg | 14 + site/src/assets/showcase/volc-live.svg | 14 + .../assets/showcase/volc-tanslate-black.svg | 41 + site/src/assets/showcase/volc-translate.svg | 41 + .../assets/showcase/volc-translive-black.svg | 37 + site/src/assets/showcase/volc-translive.svg | 37 + site/src/context.js | 3 + site/src/declaration.d.ts | 24 + site/src/getRoutes.js | 66 + site/src/hooks/useNavbarBorderStyle.ts | 38 + site/src/hooks/useShowCase.tsx | 197 + site/src/hooks/useTheme.ts | 12 + site/src/index-en.js | 51 + site/src/index.js | 50 + site/src/locale/en.js | 129 + site/src/locale/zh.js | 129 + site/src/page.js | 102 + site/src/pages/404/index.js | 23 + site/src/pages/changelog/v2.js | 42 + .../customer/assets/banner/banner-slogan.svg | 10 + .../pages/customer/assets/banner/circle.svg | 4 + .../customer/assets/banner/dongchedi.svg | 3 + .../customer/assets/banner/fanqie-small.svg | 12 + .../pages/customer/assets/banner/fanqie.svg | 12 + .../pages/customer/assets/banner/vcloud.svg | 4 + .../pages/customer/assets/banner/xigua.svg | 9 + .../pages/customer/assets/banner/yinqin.svg | 7 + site/src/pages/customer/index.less | 12 + site/src/pages/customer/index.tsx | 18 + site/src/pages/customer/locale/en-US.ts | 5 + site/src/pages/customer/locale/zh-CN.ts | 5 + .../customer/sections/Banner/iconWall.tsx | 29 + .../pages/customer/sections/Banner/index.tsx | 36 + .../customer/sections/Banner/locale/en-US.ts | 7 + .../customer/sections/Banner/locale/zh-CN.ts | 7 + .../Banner/style/iconWall.module.less | 109 + .../sections/Banner/style/index.module.less | 15 + .../sections/Banner/style/text.module.less | 83 + .../pages/customer/sections/Banner/text.tsx | 43 + .../customer/sections/Customers/anchor.tsx | 49 + .../customer/sections/Customers/case.tsx | 64 + .../customer/sections/Customers/index.tsx | 33 + .../sections/Customers/locale/en-US.ts | 0 .../sections/Customers/locale/zh-CN.ts | 0 .../Customers/styles/anchor.module.less | 19 + .../Customers/styles/case.module.less | 134 + .../Customers/styles/index.module.less | 44 + site/src/pages/dark/index.js | 145 + site/src/pages/dark/md/header.en-US.md | 42 + site/src/pages/dark/md/header.zh-CN.md | 43 + site/src/pages/dark/style.less | 14 + site/src/pages/home/assets/arco_a.svg | 5 + site/src/pages/home/assets/arco_c.svg | 11 + site/src/pages/home/assets/arco_o.svg | 4 + site/src/pages/home/assets/arco_r.svg | 4 + .../home/assets/banner/hero-banner-1.png | Bin 0 -> 44616 bytes .../home/assets/banner/hero-banner-2.png | Bin 0 -> 38551 bytes .../home/assets/banner/hero-banner-3.png | Bin 0 -> 66348 bytes site/src/pages/home/assets/banner/ic_ball.svg | 12 + site/src/pages/home/assets/banner/ic_code.svg | 99 + site/src/pages/home/assets/banner/ic_font.svg | 60 + .../pages/home/assets/banner/ic_message.svg | 3 + site/src/pages/home/assets/banner/logo.svg | 4 + .../assets/banner/logo_ArcoMaterial_w.svg | 5 + .../home/assets/banner/logo_ArcoPro_w.svg | 6 + .../home/assets/banner/logo_ChartSpace_w.svg | 5 + .../home/assets/banner/logo_DesignLab_w.svg | 4 + site/src/pages/home/assets/bg-grid.png | Bin 0 -> 239265 bytes .../pages/home/assets/cover_ArcoMaterial.png | Bin 0 -> 1233524 bytes site/src/pages/home/assets/ic_More.svg | 5 + site/src/pages/home/assets/ic_More_gray.svg | 3 + site/src/pages/home/assets/ic_arco.design.svg | 3 + site/src/pages/home/assets/ic_code.svg | 22 + .../src/pages/home/assets/ic_common_arrow.svg | 3 + site/src/pages/home/assets/ic_contact_1.svg | 24 + site/src/pages/home/assets/ic_contact_2.svg | 27 + site/src/pages/home/assets/ic_dark_code.svg | 26 + site/src/pages/home/assets/ic_dark_design.svg | 56 + .../home/assets/ic_dark_section_custom.svg | 31 + .../home/assets/ic_dark_section_design.svg | 26 + .../home/assets/ic_dark_section_ecosystem.svg | 83 + .../home/assets/ic_dark_section_usage.svg | 92 + site/src/pages/home/assets/ic_design.svg | 28 + site/src/pages/home/assets/ic_drag.svg | 3 + .../pages/home/assets/ic_mobile_QRcode.svg | 16 + site/src/pages/home/assets/ic_pointer.png | Bin 0 -> 3343 bytes site/src/pages/home/assets/ic_round_arrow.svg | 3 + .../pages/home/assets/ic_section_custom.svg | 27 + .../pages/home/assets/ic_section_design.svg | 22 + .../home/assets/ic_section_ecosystem.svg | 47 + .../pages/home/assets/ic_section_usage.svg | 63 + site/src/pages/home/assets/iconbox_active.svg | 6 + .../home/assets/img-quick-start-design.svg | 113 + .../src/pages/home/assets/img_dark_mobile.png | Bin 0 -> 97329 bytes site/src/pages/home/assets/img_mobile.png | Bin 0 -> 114338 bytes .../home/assets/img_product_ArcoMaterial.jpg | Bin 0 -> 165058 bytes .../pages/home/assets/img_product_ArcoPro.jpg | Bin 0 -> 141075 bytes .../home/assets/img_product_BrandStore.jpg | Bin 0 -> 102910 bytes .../home/assets/img_product_ChartSpace.jpg | Bin 0 -> 151515 bytes .../home/assets/img_product_DesignLab.jpg | Bin 0 -> 119585 bytes .../home/assets/img_product_FontMall.jpg | Bin 0 -> 168057 bytes site/src/pages/home/assets/logo.svg | 5 + .../pages/home/assets/logo_ArcoCli_white.svg | 5 + .../home/assets/logo_ArcoCodemod_white.svg | 3 + .../src/pages/home/assets/logo_ArcoDesign.svg | 7 + .../pages/home/assets/logo_ArcoMaterial.svg | 5 + .../home/assets/logo_ArcoMaterial_blue.svg | 5 + .../home/assets/logo_ArcoMaterial_gray.svg | 5 + .../pages/home/assets/logo_ArcoMaterial_w.svg | 5 + .../src/pages/home/assets/logo_ArcoMobile.svg | 7 + site/src/pages/home/assets/logo_ArcoPro.svg | 6 + .../pages/home/assets/logo_ArcoPro_blue.svg | 6 + .../pages/home/assets/logo_ArcoPro_gray.svg | 6 + site/src/pages/home/assets/logo_ArcoPro_w.svg | 6 + .../assets/logo_ArcoWebpackPlugin_white.svg | 4 + site/src/pages/home/assets/logo_ArtBoard.svg | 4 + .../pages/home/assets/logo_ArtBoard_blue.svg | 4 + .../src/pages/home/assets/logo_Axure_blue.svg | 5 + .../src/pages/home/assets/logo_BrandStore.svg | 6 + .../home/assets/logo_BrandStore_blue.svg | 6 + .../src/pages/home/assets/logo_ChartSpace.svg | 5 + .../home/assets/logo_ChartSpace_blue.svg | 5 + .../pages/home/assets/logo_ChartSpace_w.svg | 5 + site/src/pages/home/assets/logo_DesignLab.svg | 6 + .../pages/home/assets/logo_DesignLab_blue.svg | 4 + .../pages/home/assets/logo_DesignLab_gray.svg | 6 + .../pages/home/assets/logo_DesignLab_w.svg | 4 + site/src/pages/home/assets/logo_Figma.svg | 7 + .../src/pages/home/assets/logo_Figma_blue.svg | 7 + site/src/pages/home/assets/logo_Figma_w.svg | 7 + site/src/pages/home/assets/logo_FontMall.svg | 5 + .../pages/home/assets/logo_FontMall_blue.svg | 5 + .../pages/home/assets/logo_Gitlab_white.svg | 3 + site/src/pages/home/assets/logo_IconBox.svg | 6 + .../pages/home/assets/logo_IconBox_blue.svg | 6 + .../pages/home/assets/logo_IconBox_gray.svg | 6 + site/src/pages/home/assets/logo_Palette.svg | 5 + .../pages/home/assets/logo_Palette_gray.svg | 5 + site/src/pages/home/assets/logo_Palette_w.svg | 5 + .../pages/home/assets/logo_Sketch_blue.svg | 8 + site/src/pages/home/assets/logo_Sparrow.svg | 4 + .../pages/home/assets/logo_Sparrow_blue.svg | 4 + .../home/assets/logo_dark_ArcoDesign.svg | 7 + site/src/pages/home/assets/logo_react.svg | 8 + site/src/pages/home/assets/logo_vue.svg | 5 + site/src/pages/home/assets/logo_w.svg | 5 + site/src/pages/home/assets/mobile_hero.jpg | Bin 0 -> 467822 bytes .../pages/home/assets/mobile_hero_dark.jpg | Bin 0 -> 492581 bytes .../pages/home/assets/mobile_link_QRcode.svg | 9 + site/src/pages/home/assets/more_link.svg | 4 + site/src/pages/home/assets/products/index.js | 39 + .../home/assets/products/logo_color_01.svg | 38 + .../home/assets/products/logo_color_02.svg | 14 + .../home/assets/products/logo_color_03.svg | 41 + .../home/assets/products/logo_color_04.svg | 28 + .../home/assets/products/logo_color_05.svg | 18 + .../home/assets/products/logo_color_06.svg | 17 + .../home/assets/products/logo_color_07.svg | 8 + .../home/assets/products/logo_color_08.svg | 26 + .../home/assets/products/logo_color_09.svg | 21 + .../home/assets/products/logo_color_10.svg | 10 + .../home/assets/products/logo_color_11.svg | 7 + .../home/assets/products/logo_color_12.svg | 16 + .../home/assets/products/logo_color_13.svg | 14 + .../home/assets/products/logo_color_14.svg | 18 + .../home/assets/products/logo_color_15.svg | 21 + .../home/assets/products/logo_color_16.svg | 10 + .../home/assets/products/logo_dark_01.svg | 31 + .../home/assets/products/logo_dark_02.svg | 14 + .../home/assets/products/logo_dark_03.svg | 40 + .../home/assets/products/logo_dark_04.svg | 28 + .../home/assets/products/logo_dark_05.svg | 18 + .../home/assets/products/logo_dark_06.svg | 17 + .../home/assets/products/logo_dark_07.svg | 8 + .../home/assets/products/logo_dark_08.svg | 26 + .../home/assets/products/logo_dark_09.svg | 21 + .../home/assets/products/logo_dark_10.svg | 10 + .../home/assets/products/logo_dark_11.svg | 7 + .../home/assets/products/logo_dark_12.svg | 16 + .../home/assets/products/logo_dark_13.svg | 14 + .../home/assets/products/logo_dark_14.svg | 18 + .../home/assets/products/logo_dark_15.svg | 21 + .../home/assets/products/logo_dark_16.svg | 10 + .../home/assets/products/logo_white_01.svg | 22 + .../home/assets/products/logo_white_02.svg | 11 + .../home/assets/products/logo_white_03.svg | 32 + .../home/assets/products/logo_white_04.svg | 14 + .../home/assets/products/logo_white_05.svg | 12 + .../home/assets/products/logo_white_06.svg | 17 + .../home/assets/products/logo_white_07.svg | 21 + .../home/assets/products/logo_white_08.svg | 17 + .../home/assets/products/logo_white_09.svg | 10 + .../home/assets/products/logo_white_10.svg | 5 + .../home/assets/products/logo_white_11.svg | 33 + .../home/assets/products/logo_white_12.svg | 10 + .../home/assets/products/logo_white_13.svg | 14 + .../home/assets/products/logo_white_14.svg | 18 + .../home/assets/products/logo_white_15.svg | 7 + .../home/assets/products/logo_white_16.svg | 4 + .../home/assets/quick-start/ic_design_1.svg | 55 + .../home/assets/quick-start/ic_design_2.svg | 34 + .../home/assets/quick-start/ic_design_3.svg | 9 + .../pages/home/assets/showcase/huoshan.png | Bin 0 -> 76587 bytes .../home/assets/showcase/logo_toutiao.svg | 9 + .../assets/showcase/logo_toutiao_dark.svg | 9 + .../home/assets/showcase/logo_volc_engine.svg | 31 + .../assets/showcase/logo_volc_engine_dark.svg | 31 + .../showcase/logo_volc_engine_feilian.svg | 20 + .../logo_volc_engine_feilian_dark.svg | 20 + .../showcase/logo_volc_engine_translate.svg | 41 + .../logo_volc_engine_translate_dark.svg | 41 + .../home/assets/showcase/logo_volc_live.svg | 14 + .../assets/showcase/logo_volc_live_dark.svg | 14 + .../pages/home/assets/showcase/tou_tiao.png | Bin 0 -> 233910 bytes .../home/assets/showcase/volc_engine.png | Bin 0 -> 249102 bytes .../assets/showcase/volc_engine_feilian.png | Bin 0 -> 139864 bytes .../assets/showcase/volc_engine_translate.png | Bin 0 -> 256564 bytes .../pages/home/assets/showcase/volc_live.png | Bin 0 -> 930381 bytes .../home/assets/stack/ic_color_babel.svg | 3 + .../home/assets/stack/ic_color_github.svg | 3 + .../pages/home/assets/stack/ic_color_js.svg | 3 + .../home/assets/stack/ic_color_nextjs.svg | 3 + .../pages/home/assets/stack/ic_color_npm.svg | 3 + .../home/assets/stack/ic_color_react.svg | 3 + .../home/assets/stack/ic_color_redux.svg | 3 + .../pages/home/assets/stack/ic_color_vue.svg | 4 + .../home/assets/stack/ic_color_webpack.svg | 4 + .../pages/home/assets/stack/ic_gray_babel.svg | 3 + .../home/assets/stack/ic_gray_github.svg | 3 + .../pages/home/assets/stack/ic_gray_js.svg | 3 + .../home/assets/stack/ic_gray_nextjs.svg | 3 + .../pages/home/assets/stack/ic_gray_npm.svg | 3 + .../pages/home/assets/stack/ic_gray_react.svg | 3 + .../pages/home/assets/stack/ic_gray_redux.svg | 3 + .../pages/home/assets/stack/ic_gray_vue.svg | 4 + .../home/assets/stack/ic_gray_webpack.svg | 3 + .../home/components/CardIntroduce/index.tsx | 56 + .../CardIntroduce/style/index.module.less | 91 + .../pages/home/components/CodeCopy/index.tsx | 37 + .../CodeCopy/style/index.module.less | 53 + .../home/components/ColorPicker/index.tsx | 53 + .../ColorPicker/style/index.module.less | 8 + .../home/components/EditorSkin/index.tsx | 173 + .../EditorSkin/style/index.module.less | 157 + .../home/components/LogoWrapper/index.tsx | 38 + .../LogoWrapper/style/index.module.less | 82 + .../home/components/Section/index.module.less | 24 + .../pages/home/components/Section/index.tsx | 30 + .../home/components/SectionHeader/index.tsx | 51 + .../SectionHeader/style/index.module.less | 110 + .../pages/home/components/StartBtn/index.tsx | 24 + .../home/components/StartBtn/locale/en-US.ts | 3 + .../home/components/StartBtn/locale/zh-CN.ts | 3 + .../StartBtn/style/index.module.less | 65 + site/src/pages/home/constant/links.ts | 30 + .../home/content/Icons/index.module.less | 77 + site/src/pages/home/content/Icons/index.tsx | 199 + .../pages/home/content/Icons/locale/en-US.ts | 9 + .../pages/home/content/Icons/locale/zh-CN.ts | 9 + .../home/content/Material/index.module.less | 17 + .../src/pages/home/content/Material/index.tsx | 13 + .../home/content/Palette/index.module.less | 137 + site/src/pages/home/content/Palette/index.tsx | 212 + .../home/content/Palette/locale/en-US.ts | 6 + .../home/content/Palette/locale/zh-CN.ts | 7 + site/src/pages/home/content/Pro/chart.tsx | 160 + site/src/pages/home/content/Pro/chartData.ts | 55 + site/src/pages/home/content/Pro/demo1.tsx | 46 + site/src/pages/home/content/Pro/demo2.tsx | 11 + .../src/pages/home/content/Pro/editorCard.tsx | 63 + site/src/pages/home/content/Pro/form.tsx | 173 + site/src/pages/home/content/Pro/iconDrag.tsx | 10 + site/src/pages/home/content/Pro/index.tsx | 185 + .../pages/home/content/Pro/locale/en-US.ts | 31 + .../pages/home/content/Pro/locale/zh-CN.ts | 31 + .../pages/home/content/Pro/recentProjects.tsx | 61 + .../home/content/Pro/style/chart.module.less | 28 + .../content/Pro/style/editor-card.module.less | 60 + .../home/content/Pro/style/form.module.less | 9 + .../home/content/Pro/style/index.module.less | 155 + .../Pro/style/recent-projects.module.less | 25 + .../home/content/Token/index.module.less | 85 + site/src/pages/home/content/Token/index.tsx | 277 + .../pages/home/content/Token/locale/en-US.ts | 14 + .../pages/home/content/Token/locale/zh-CN.ts | 14 + site/src/pages/home/context.ts | 8 + site/src/pages/home/declaration.d.ts | 24 + site/src/pages/home/hooks/useHomeContext.ts | 16 + site/src/pages/home/hooks/useIsFirstRender.ts | 9 + site/src/pages/home/hooks/useLocale.ts | 9 + site/src/pages/home/hooks/useTheme.ts | 12 + site/src/pages/home/index.tsx | 32 + site/src/pages/home/locale/en-US.ts | 28 + site/src/pages/home/locale/zh-CN.ts | 28 + .../home/sections/Banner/animationIcon.tsx | 89 + .../pages/home/sections/Banner/content.tsx | 36 + .../pages/home/sections/Banner/iconReact.tsx | 66 + .../src/pages/home/sections/Banner/images.tsx | 165 + .../home/sections/Banner/imagesForMobile.tsx | 14 + site/src/pages/home/sections/Banner/index.tsx | 30 + .../home/sections/Banner/locale/en-US.ts | 8 + .../home/sections/Banner/locale/zh-CN.ts | 8 + .../src/pages/home/sections/Banner/motion.tsx | 190 + .../pages/home/sections/Banner/products.tsx | 138 + .../sections/Banner/style/content.module.less | 170 + .../style/images-for-mobile.module.less | 10 + .../sections/Banner/style/images.module.less | 121 + .../sections/Banner/style/index.module.less | 54 + .../sections/Banner/style/motion.module.less | 443 + .../Banner/style/products.module.less | 40 + .../components/block/index.module.less | 170 + .../Ecosystem/components/block/index.tsx | 37 + .../components/blockList/index.module.less | 29 + .../Ecosystem/components/blockList/index.tsx | 65 + .../components/tabList/index.module.less | 124 + .../Ecosystem/components/tabList/index.tsx | 86 + .../pages/home/sections/Ecosystem/index.tsx | 146 + .../home/sections/Ecosystem/interface.ts | 18 + .../home/sections/Ecosystem/locale/en-US.ts | 27 + .../home/sections/Ecosystem/locale/zh-CN.ts | 23 + site/src/pages/home/sections/Footer/index.tsx | 36 + .../home/sections/Footer/locale/en-US.ts | 6 + .../home/sections/Footer/locale/zh-CN.ts | 6 + .../sections/Footer/style/index.module.less | 69 + .../pages/home/sections/QuickStart/index.tsx | 105 + .../home/sections/QuickStart/locale/en-US.ts | 10 + .../home/sections/QuickStart/locale/zh-CN.ts | 10 + .../QuickStart/style/index.module.less | 201 + .../components/Card/index.module.less | 182 + .../Resource/components/Card/index.tsx | 87 + .../components/DesignValues/index.module.less | 35 + .../components/DesignValues/index.tsx | 59 + .../pages/home/sections/Resource/index.tsx | 131 + .../home/sections/Resource/locale/en-US.ts | 26 + .../home/sections/Resource/locale/zh-CN.ts | 26 + .../components/Card/index.module.less | 126 + .../ShowCase/components/Card/index.tsx | 44 + .../pages/home/sections/ShowCase/index.tsx | 42 + .../home/sections/ShowCase/locale/en-US.ts | 4 + .../home/sections/ShowCase/locale/zh-CN.ts | 4 + .../sections/ShowCase/style/index.module.less | 40 + .../sections/ShowCase/useShowcaseData.tsx | 100 + site/src/pages/home/sections/Teams/index.tsx | 208 + .../pages/home/sections/Teams/locale/en-US.ts | 6 + .../pages/home/sections/Teams/locale/zh-CN.ts | 6 + .../sections/Teams/style/index.module.less | 304 + site/src/pages/home/style/app.module.less | 11 + site/src/pages/home/style/base.less | 132 + site/src/pages/home/style/common.less | 2 + .../home/style/font/FiraMono-Regular.ttf | Bin 0 -> 169464 bytes site/src/pages/home/style/global.less | 75 + site/src/pages/home/style/index.less | 4 + site/src/pages/home/style/mixin.less | 19 + site/src/pages/home/style/navbar.module.less | 11 + site/src/pages/home/style/token.less | 1 + site/src/pages/home/utils/animation.ts | 78 + site/src/pages/home/utils/cdn-resource.ts | 25 + site/src/pages/home/utils/classNames.ts | 28 + site/src/pages/home/utils/debounce.ts | 24 + site/src/pages/home/utils/dom.ts | 21 + site/src/pages/home/utils/is.ts | 41 + site/src/pages/home/utils/joinChat.js | 32 + site/src/pages/home/utils/lazyload.js | 33 + site/src/pages/home/utils/resizeObserver.tsx | 51 + .../src/pages/home/utils/responsiveObserve.ts | 92 + site/src/pages/home/utils/useIsMobile.ts | 18 + site/src/pages/icon/index.js | 96 + site/src/pages/icon/md/Iron Man.svg | 1 + .../icon/md/__changelog__/index.en-US.md | 63 + .../icon/md/__changelog__/index.zh-CN.md | 77 + site/src/pages/icon/md/__demo__/basic.md | 33 + site/src/pages/icon/md/__demo__/custom.md | 25 + site/src/pages/icon/md/__demo__/iconfont.md | 30 + site/src/pages/icon/md/__demo__/spin.md | 25 + site/src/pages/icon/md/footer.en-US.md | 51 + site/src/pages/icon/md/footer.zh-CN.md | 52 + site/src/pages/icon/style.less | 108 + site/src/pages/overview/index.js | 99 + site/src/pages/overview/meta.js | 312 + site/src/pages/overview/style.less | 50 + site/src/pages/palette/card.js | 45 + site/src/pages/palette/index.js | 202 + site/src/pages/palette/md/header.en-US.md | 25 + site/src/pages/palette/md/header.zh-CN.md | 26 + site/src/pages/palette/style.less | 58 + site/src/pages/palette/utils.js | 11 + site/src/r.js | 177 + site/src/routes.js | 884 + site/src/style/changelog.less | 43 + site/src/style/demo.less | 7 + site/src/style/index.less | 38 + site/src/style/markdown.less | 1244 ++ site/src/style/navbar.less | 298 + site/src/style/page.less | 193 + site/src/utils/case.js | 14 + site/src/utils/config.js | 8 + site/src/utils/env.js | 1 + site/src/utils/i18n.js | 39 + site/src/utils/lazyload.js | 33 + site/src/utils/navbarProps.js | 20 + site/src/utils/tea.js | 20 + site/src/widget/Anchor/index.jsx | 75 + site/src/widget/Anchor/index.less | 25 + site/src/widget/Body/index.jsx | 57 + site/src/widget/Body/index.less | 15 + site/src/widget/Card/index.js | 42 + site/src/widget/Card/index.less | 29 + site/src/widget/Menu/index.jsx | 165 + site/src/widget/Menu/index.less | 102 + site/src/widget/MenuHeader/index.jsx | 26 + site/src/widget/MenuHeader/index.less | 15 + site/src/widget/ThemeBox/index.less | 28 + site/src/widget/ThemeBox/index.tsx | 255 + site/src/widget/ThemeBox/locale.ts | 26 + site/src/widget/scrollTop.js | 20 + site/src/widget/style/index.less | 6 + stories/components/Affix.jsx | 48 + stories/components/Alert.jsx | 57 + stories/components/Anchor.jsx | 46 + stories/components/AutoComplete.jsx | 46 + stories/components/Avatar.jsx | 26 + stories/components/BackTop.jsx | 68 + stories/components/Badge.jsx | 49 + stories/components/Breadcrumb.jsx | 60 + stories/components/Button.jsx | 57 + stories/components/Card.jsx | 133 + stories/components/Carousel.jsx | 80 + stories/components/Cascader.jsx | 81 + stories/components/Checkbox.jsx | 148 + stories/components/Collapse.jsx | 34 + stories/components/DatePicker.jsx | 23 + stories/components/Divider.jsx | 35 + stories/components/Drawer.jsx | 46 + stories/components/Dropdown.jsx | 50 + stories/components/Form.jsx | 391 + stories/components/Grid.jsx | 60 + stories/components/Image.jsx | 55 + stories/components/Input.jsx | 71 + stories/components/InputNumber.jsx | 12 + stories/components/InputTag.jsx | 7 + stories/components/Layout.jsx | 87 + stories/components/List.jsx | 121 + stories/components/Mentions.jsx | 6 + stories/components/Menu.jsx | 98 + stories/components/Message.jsx | 97 + stories/components/Modal.jsx | 51 + stories/components/Notification.jsx | 140 + stories/components/Pagination.jsx | 86 + stories/components/Popconfirm.jsx | 97 + stories/components/Popover.jsx | 45 + stories/components/Progress.jsx | 48 + stories/components/Radio.jsx | 44 + stories/components/Rate.jsx | 22 + stories/components/Select.jsx | 115 + stories/components/Skeleton.jsx | 46 + stories/components/Slider.jsx | 75 + stories/components/Space.jsx | 11 + stories/components/Spin.jsx | 45 + stories/components/Statistic.jsx | 36 + stories/components/Steps.jsx | 89 + stories/components/Switch.jsx | 52 + stories/components/Tab.jsx | 72 + stories/components/Table.jsx | 116 + stories/components/Tag.jsx | 27 + stories/components/TimePicker.jsx | 22 + stories/components/Timeline.jsx | 64 + stories/components/Tooltip.jsx | 82 + stories/components/Transfer.jsx | 80 + stories/components/Tree.jsx | 142 + stories/components/Upload.jsx | 1 + stories/components/VirtualList.jsx | 120 + stories/index.less | 29 + stories/index.stories.js | 125 + tests/componentConfigTest.tsx | 35 + tests/demoTest.ts | 32 + tests/mockDate.js | 38 + tests/mockRAF.ts | 45 + tests/mountTest.tsx | 15 + tests/setup.js | 40 + tests/util.js | 5 + tsconfig.json | 20 + tsdoc.json | 25 + 3028 files changed, 301621 insertions(+) create mode 100644 .config/docgen.config.js create mode 100644 .config/jest.config.js create mode 100644 .config/style.config.js create mode 100644 .config/webpack.config.js create mode 100644 .editorconfig create mode 100644 .eslintignore create mode 100644 .eslintrc create mode 100644 .github/ISSUE_TEMPLATE/config.yml create mode 100644 .github/PULL_REQUEST_TEMPLATE.md create mode 100644 .gitignore create mode 100644 .prettierignore create mode 100644 .prettierrc create mode 100644 .storybook/main.js create mode 100644 .storybook/preview.js create mode 100644 .stylelintignore create mode 100644 .stylelintrc create mode 100644 CODE_OF_CONDUCT.md create mode 100644 CONTRIBUTING.md create mode 100644 CONTRIBUTING.zh-CN.md create mode 100644 LICENSE create mode 100644 README.md create mode 100644 README.zh-CN.md create mode 100644 components/Affix/README.en-US.md create mode 100644 components/Affix/README.zh-CN.md create mode 100644 components/Affix/__changelog__/index.en-US.md create mode 100644 components/Affix/__changelog__/index.zh-CN.md create mode 100644 components/Affix/__demo__/basic.md create mode 100644 components/Affix/__demo__/bottom.md create mode 100644 components/Affix/__demo__/container.md create mode 100644 components/Affix/__demo__/fixChange.md create mode 100644 components/Affix/__demo__/top.md create mode 100644 components/Affix/__template__/index.en-US.md create mode 100644 components/Affix/__template__/index.zh-CN.md create mode 100644 components/Affix/__test__/__snapshots__/demo.test.ts.snap create mode 100644 components/Affix/__test__/__snapshots__/index.test.tsx.snap create mode 100644 components/Affix/__test__/demo.test.ts create mode 100644 components/Affix/__test__/index.test.tsx create mode 100644 components/Affix/index.tsx create mode 100644 components/Affix/interface.ts create mode 100644 components/Affix/style/index.less create mode 100644 components/Affix/style/index.ts create mode 100644 components/Alert/README.en-US.md create mode 100644 components/Alert/README.zh-CN.md create mode 100644 components/Alert/__changelog__/index.en-US.md create mode 100644 components/Alert/__changelog__/index.zh-CN.md create mode 100644 components/Alert/__demo__/action.md create mode 100644 components/Alert/__demo__/banner.md create mode 100644 components/Alert/__demo__/basic.md create mode 100644 components/Alert/__demo__/closable.md create mode 100644 components/Alert/__demo__/closeElement.md create mode 100644 components/Alert/__demo__/type.md create mode 100644 components/Alert/__demo__/with-title.md create mode 100644 components/Alert/__demo__/without-icon.md create mode 100644 components/Alert/__template__/index.en-US.md create mode 100644 components/Alert/__template__/index.zh-CN.md create mode 100644 components/Alert/__test__/__snapshots__/demo.test.ts.snap create mode 100644 components/Alert/__test__/__snapshots__/index.test.tsx.snap create mode 100644 components/Alert/__test__/demo.test.ts create mode 100644 components/Alert/__test__/index.test.tsx create mode 100644 components/Alert/index.tsx create mode 100644 components/Alert/interface.ts create mode 100644 components/Alert/style/index.less create mode 100644 components/Alert/style/index.ts create mode 100644 components/Alert/style/token.less create mode 100644 components/Anchor/README.en-US.md create mode 100644 components/Anchor/README.zh-CN.md create mode 100644 components/Anchor/__changelog__/index.en-US.md create mode 100644 components/Anchor/__changelog__/index.zh-CN.md create mode 100644 components/Anchor/__demo__/affix.md create mode 100644 components/Anchor/__demo__/basic.md create mode 100644 components/Anchor/__demo__/boundary.md create mode 100644 components/Anchor/__demo__/hash.md create mode 100644 components/Anchor/__demo__/lineless.md create mode 100644 components/Anchor/__demo__/static.md create mode 100644 components/Anchor/__template__/index.en-US.md create mode 100644 components/Anchor/__template__/index.zh-CN.md create mode 100644 components/Anchor/__test__/__snapshots__/demo.test.ts.snap create mode 100644 components/Anchor/__test__/__snapshots__/index.test.tsx.snap create mode 100644 components/Anchor/__test__/demo.test.ts create mode 100644 components/Anchor/__test__/index.test.tsx create mode 100644 components/Anchor/anchor.tsx create mode 100644 components/Anchor/context.ts create mode 100644 components/Anchor/index.tsx create mode 100644 components/Anchor/interface.ts create mode 100644 components/Anchor/link.tsx create mode 100644 components/Anchor/style/index.less create mode 100644 components/Anchor/style/index.ts create mode 100644 components/Anchor/style/token.less create mode 100644 components/Anchor/utils.ts create mode 100644 components/AutoComplete/README.en-US.md create mode 100644 components/AutoComplete/README.zh-CN.md create mode 100644 components/AutoComplete/__changelog__/index.en-US.md create mode 100644 components/AutoComplete/__changelog__/index.zh-CN.md create mode 100644 components/AutoComplete/__demo__/advance.md create mode 100644 components/AutoComplete/__demo__/basic.md create mode 100644 components/AutoComplete/__demo__/custom-input.md create mode 100644 components/AutoComplete/__demo__/options.md create mode 100644 components/AutoComplete/__demo__/strict.md create mode 100644 components/AutoComplete/__demo__/with-group.md create mode 100644 components/AutoComplete/__demo__/without-group.md create mode 100644 components/AutoComplete/__template__/index.en-US.md create mode 100644 components/AutoComplete/__template__/index.zh-CN.md create mode 100644 components/AutoComplete/__test__/__snapshots__/demo.test.ts.snap create mode 100644 components/AutoComplete/__test__/__snapshots__/index.test.tsx.snap create mode 100644 components/AutoComplete/__test__/demo.test.ts create mode 100644 components/AutoComplete/__test__/index.test.tsx create mode 100644 components/AutoComplete/index.tsx create mode 100644 components/AutoComplete/interface.ts create mode 100644 components/AutoComplete/style/index.less create mode 100644 components/AutoComplete/style/index.ts create mode 100644 components/AutoComplete/style/token.less create mode 100644 components/Avatar/README.en-US.md create mode 100644 components/Avatar/README.zh-CN.md create mode 100644 components/Avatar/__changelog__/index.en-US.md create mode 100644 components/Avatar/__changelog__/index.zh-CN.md create mode 100644 components/Avatar/__demo__/autoFixFontSize.md create mode 100644 components/Avatar/__demo__/basic.md create mode 100644 components/Avatar/__demo__/group.md create mode 100644 components/Avatar/__demo__/size.md create mode 100644 components/Avatar/__demo__/triggerIcon.md create mode 100644 components/Avatar/__template__/index.en-US.md create mode 100644 components/Avatar/__template__/index.zh-CN.md create mode 100644 components/Avatar/__test__/__snapshots__/demo.test.ts.snap create mode 100644 components/Avatar/__test__/__snapshots__/index.test.tsx.snap create mode 100644 components/Avatar/__test__/demo.test.ts create mode 100644 components/Avatar/__test__/index.test.tsx create mode 100644 components/Avatar/avatar.tsx create mode 100644 components/Avatar/context.ts create mode 100644 components/Avatar/group.tsx create mode 100644 components/Avatar/index.tsx create mode 100644 components/Avatar/interface.ts create mode 100644 components/Avatar/style/index.less create mode 100644 components/Avatar/style/index.ts create mode 100644 components/Avatar/style/token.less create mode 100644 components/BackTop/README.en-US.md create mode 100644 components/BackTop/README.zh-CN.md create mode 100644 components/BackTop/__changelog__/index.zh-CN.md create mode 100644 components/BackTop/__demo__/basic.md create mode 100644 components/BackTop/__demo__/custom_button.md create mode 100644 components/BackTop/__demo__/easing.md create mode 100644 components/BackTop/__template__/index.en-US.md create mode 100644 components/BackTop/__template__/index.zh-CN.md create mode 100644 components/BackTop/__test__/__snapshots__/demo.test.ts.snap create mode 100644 components/BackTop/__test__/__snapshots__/index.test.tsx.snap create mode 100644 components/BackTop/__test__/demo.test.ts create mode 100644 components/BackTop/__test__/index.test.tsx create mode 100644 components/BackTop/index.tsx create mode 100644 components/BackTop/interface.ts create mode 100644 components/BackTop/style/index.less create mode 100644 components/BackTop/style/index.ts create mode 100644 components/BackTop/style/token.less create mode 100644 components/Badge/README.en-US.md create mode 100644 components/Badge/README.zh-CN.md create mode 100644 components/Badge/__changelog__/index.en-US.md create mode 100644 components/Badge/__changelog__/index.zh-CN.md create mode 100644 components/Badge/__demo__/animate.md create mode 100644 components/Badge/__demo__/basic.md create mode 100644 components/Badge/__demo__/color.md create mode 100644 components/Badge/__demo__/dot.md create mode 100644 components/Badge/__demo__/max_count.md create mode 100644 components/Badge/__demo__/no-children.md create mode 100644 components/Badge/__demo__/status.md create mode 100644 components/Badge/__demo__/text.md create mode 100644 components/Badge/__template__/index.en-US.md create mode 100644 components/Badge/__template__/index.zh-CN.md create mode 100644 components/Badge/__test__/__snapshots__/demo.test.ts.snap create mode 100644 components/Badge/__test__/__snapshots__/index.test.ts.snap create mode 100644 components/Badge/__test__/demo.test.ts create mode 100644 components/Badge/__test__/index.test.ts create mode 100644 components/Badge/count.tsx create mode 100644 components/Badge/index.tsx create mode 100644 components/Badge/interface.ts create mode 100644 components/Badge/style/index.less create mode 100644 components/Badge/style/index.ts create mode 100644 components/Badge/style/token.less create mode 100644 components/Badge/usage/index.en-US.md create mode 100644 components/Badge/usage/index.zh-CN.md create mode 100644 components/Breadcrumb/README.en-US.md create mode 100644 components/Breadcrumb/README.zh-CN.md create mode 100644 components/Breadcrumb/__changelog__/index.en-US.md create mode 100644 components/Breadcrumb/__changelog__/index.zh-CN.md create mode 100644 components/Breadcrumb/__demo__/basic.md create mode 100644 components/Breadcrumb/__demo__/max-count.md create mode 100644 components/Breadcrumb/__demo__/separator.md create mode 100644 components/Breadcrumb/__demo__/size.md create mode 100644 components/Breadcrumb/__demo__/with-dropdown.md create mode 100644 components/Breadcrumb/__demo__/with-icon.md create mode 100644 components/Breadcrumb/__template__/index.en-US.md create mode 100644 components/Breadcrumb/__template__/index.zh-CN.md create mode 100644 components/Breadcrumb/__test__/__snapshots__/demo.test.ts.snap create mode 100644 components/Breadcrumb/__test__/__snapshots__/index.test.tsx.snap create mode 100644 components/Breadcrumb/__test__/demo.test.ts create mode 100644 components/Breadcrumb/__test__/index.test.tsx create mode 100644 components/Breadcrumb/index.tsx create mode 100644 components/Breadcrumb/interface.ts create mode 100644 components/Breadcrumb/item.tsx create mode 100644 components/Breadcrumb/style/index.less create mode 100644 components/Breadcrumb/style/index.ts create mode 100644 components/Breadcrumb/style/token.less create mode 100644 components/Button/README.en-US.md create mode 100644 components/Button/README.zh-CN.md create mode 100644 components/Button/__changelog__/index.en-US.md create mode 100644 components/Button/__changelog__/index.zh-CN.md create mode 100644 components/Button/__demo__/basic.md create mode 100644 components/Button/__demo__/button-group.md create mode 100644 components/Button/__demo__/disabled.md create mode 100644 components/Button/__demo__/icon.md create mode 100644 components/Button/__demo__/loading.md create mode 100644 components/Button/__demo__/long.md create mode 100644 components/Button/__demo__/shape.md create mode 100644 components/Button/__demo__/size.md create mode 100644 components/Button/__demo__/status.md create mode 100644 components/Button/__template__/index.en-US.md create mode 100644 components/Button/__template__/index.zh-CN.md create mode 100644 components/Button/__test__/__snapshots__/demo.test.ts.snap create mode 100644 components/Button/__test__/__snapshots__/index.test.tsx.snap create mode 100644 components/Button/__test__/demo.test.ts create mode 100644 components/Button/__test__/index.test.tsx create mode 100644 components/Button/group.tsx create mode 100644 components/Button/index.tsx create mode 100644 components/Button/interface.ts create mode 100644 components/Button/style/index.less create mode 100644 components/Button/style/index.ts create mode 100644 components/Button/style/token.less create mode 100644 components/Calendar/README.en-US.md create mode 100644 components/Calendar/README.zh-CN.md create mode 100644 components/Calendar/__changelog__/index.en-US.md create mode 100644 components/Calendar/__changelog__/index.zh-CN.md create mode 100644 components/Calendar/__demo__/basic.md create mode 100644 components/Calendar/__demo__/date-content.md create mode 100644 components/Calendar/__demo__/panel.md create mode 100644 components/Calendar/__demo__/select-header.md create mode 100644 components/Calendar/__template__/index.en-US.md create mode 100644 components/Calendar/__template__/index.zh-CN.md create mode 100644 components/Calendar/__test__/__snapshots__/demo.test.ts.snap create mode 100644 components/Calendar/__test__/__snapshots__/index.test.tsx.snap create mode 100644 components/Calendar/__test__/demo.test.ts create mode 100644 components/Calendar/__test__/index.test.tsx create mode 100644 components/Calendar/header/header.tsx create mode 100644 components/Calendar/header/panel-header.tsx create mode 100644 components/Calendar/hooks/useCellClassName.ts create mode 100644 components/Calendar/index.tsx create mode 100644 components/Calendar/interface.ts create mode 100644 components/Calendar/month.tsx create mode 100644 components/Calendar/style/index.less create mode 100644 components/Calendar/style/index.ts create mode 100644 components/Calendar/style/token.less create mode 100644 components/Calendar/week-list.tsx create mode 100644 components/Calendar/year.tsx create mode 100644 components/Card/README.en-US.md create mode 100644 components/Card/README.zh-CN.md create mode 100644 components/Card/__changelog__/index.en-US.md create mode 100644 components/Card/__changelog__/index.zh-CN.md create mode 100644 components/Card/__demo__/basic.md create mode 100644 components/Card/__demo__/card-grid.md create mode 100644 components/Card/__demo__/hoverable.md create mode 100644 components/Card/__demo__/inner-card.md create mode 100644 components/Card/__demo__/meta.md create mode 100644 components/Card/__demo__/no-border.md create mode 100644 components/Card/__demo__/only-content.md create mode 100644 components/Card/__demo__/with-actions.md create mode 100644 components/Card/__demo__/with-row.md create mode 100644 components/Card/__demo__/with-skeleton.md create mode 100644 components/Card/__demo__/with-tab.md create mode 100644 components/Card/__template__/index.en-US.md create mode 100644 components/Card/__template__/index.zh-CN.md create mode 100644 components/Card/__test__/__snapshots__/demo.test.ts.snap create mode 100644 components/Card/__test__/__snapshots__/index.test.tsx.snap create mode 100644 components/Card/__test__/demo.test.ts create mode 100644 components/Card/__test__/index.test.tsx create mode 100644 components/Card/grid.tsx create mode 100644 components/Card/index.tsx create mode 100644 components/Card/interface.ts create mode 100644 components/Card/meta.tsx create mode 100644 components/Card/style/index.less create mode 100644 components/Card/style/index.ts create mode 100644 components/Card/style/token.less create mode 100644 components/Carousel/README.en-US.md create mode 100644 components/Carousel/README.zh-CN.md create mode 100644 components/Carousel/__changelog__/index.en-US.md create mode 100644 components/Carousel/__changelog__/index.zh-CN.md create mode 100644 components/Carousel/__demo__/animation-card.md create mode 100644 components/Carousel/__demo__/animation-fade.md create mode 100644 components/Carousel/__demo__/auto.md create mode 100644 components/Carousel/__demo__/basic.md create mode 100644 components/Carousel/__demo__/indicator.md create mode 100644 components/Carousel/__demo__/selfComponent.md create mode 100644 components/Carousel/__demo__/vertical.md create mode 100644 components/Carousel/__template__/index.en-US.md create mode 100644 components/Carousel/__template__/index.zh-CN.md create mode 100644 components/Carousel/__test__/__snapshots__/demo.test.ts.snap create mode 100644 components/Carousel/__test__/__snapshots__/index.test.tsx.snap create mode 100644 components/Carousel/__test__/demo.test.ts create mode 100644 components/Carousel/__test__/index.test.tsx create mode 100644 components/Carousel/arrow.tsx create mode 100644 components/Carousel/index.tsx create mode 100644 components/Carousel/indicator.tsx create mode 100644 components/Carousel/interface.ts create mode 100644 components/Carousel/style/index.less create mode 100644 components/Carousel/style/index.ts create mode 100644 components/Carousel/style/slide.less create mode 100644 components/Carousel/style/token.less create mode 100644 components/Cascader/README.en-US.md create mode 100644 components/Cascader/README.zh-CN.md create mode 100644 components/Cascader/__changelog__/index.en-US.md create mode 100644 components/Cascader/__changelog__/index.zh-CN.md create mode 100644 components/Cascader/__demo__/basic.md create mode 100644 components/Cascader/__demo__/change_on_select.md create mode 100644 components/Cascader/__demo__/clear.md create mode 100644 components/Cascader/__demo__/control.md create mode 100644 components/Cascader/__demo__/custom_children.md create mode 100644 components/Cascader/__demo__/disabled.md create mode 100644 components/Cascader/__demo__/dropdown.md create mode 100644 components/Cascader/__demo__/filedNames.md create mode 100644 components/Cascader/__demo__/filter_option.md create mode 100644 components/Cascader/__demo__/footer.md create mode 100644 components/Cascader/__demo__/format.md create mode 100644 components/Cascader/__demo__/loadmore.md create mode 100644 components/Cascader/__demo__/multiple.md create mode 100644 components/Cascader/__demo__/onSearch.md create mode 100644 components/Cascader/__demo__/render_option.md create mode 100644 components/Cascader/__demo__/search.md create mode 100644 components/Cascader/__demo__/showEmptyChildren.md create mode 100644 components/Cascader/__demo__/size.md create mode 100644 components/Cascader/__demo__/visible.md create mode 100644 components/Cascader/__template__/index.en-US.md create mode 100644 components/Cascader/__template__/index.zh-CN.md create mode 100644 components/Cascader/__test__/__snapshots__/demo.test.ts.snap create mode 100644 components/Cascader/__test__/__snapshots__/index.test.tsx.snap create mode 100644 components/Cascader/__test__/demo.test.ts create mode 100644 components/Cascader/__test__/index.test.tsx create mode 100644 components/Cascader/__test__/search.test.tsx create mode 100644 components/Cascader/base/node.ts create mode 100644 components/Cascader/base/store.ts create mode 100644 components/Cascader/cascader.tsx create mode 100644 components/Cascader/hook/useRefCurrent.ts create mode 100644 components/Cascader/index.tsx create mode 100644 components/Cascader/interface.ts create mode 100644 components/Cascader/panel/list.tsx create mode 100644 components/Cascader/panel/option.tsx create mode 100644 components/Cascader/panel/search-panel.tsx create mode 100644 components/Cascader/style/index.less create mode 100644 components/Cascader/style/index.ts create mode 100644 components/Cascader/style/token.less create mode 100644 components/Checkbox/README.en-US.md create mode 100644 components/Checkbox/README.zh-CN.md create mode 100644 components/Checkbox/__changelog__/index.en-US.md create mode 100644 components/Checkbox/__changelog__/index.zh-CN.md create mode 100644 components/Checkbox/__demo__/basic.md create mode 100644 components/Checkbox/__demo__/check_all.md create mode 100644 components/Checkbox/__demo__/control.md create mode 100644 components/Checkbox/__demo__/disabled.md create mode 100644 components/Checkbox/__demo__/group.md create mode 100644 components/Checkbox/__demo__/group_jsx.md create mode 100644 components/Checkbox/__demo__/useCheckbox.md create mode 100644 components/Checkbox/__template__/index.en-US.md create mode 100644 components/Checkbox/__template__/index.zh-CN.md create mode 100644 components/Checkbox/__test__/__snapshots__/demo.test.ts.snap create mode 100644 components/Checkbox/__test__/__snapshots__/index.test.tsx.snap create mode 100644 components/Checkbox/__test__/demo.test.ts create mode 100644 components/Checkbox/__test__/group.test.tsx create mode 100644 components/Checkbox/__test__/index.test.tsx create mode 100644 components/Checkbox/__test__/usecheckbox.test.ts create mode 100644 components/Checkbox/checkbox.tsx create mode 100644 components/Checkbox/group.tsx create mode 100644 components/Checkbox/icon-check.tsx create mode 100644 components/Checkbox/index.tsx create mode 100644 components/Checkbox/interface.ts create mode 100644 components/Checkbox/style/index.less create mode 100644 components/Checkbox/style/index.ts create mode 100644 components/Checkbox/style/token.less create mode 100644 components/Checkbox/useCheckbox.ts create mode 100644 components/Collapse/README.en-US.md create mode 100644 components/Collapse/README.zh-CN.md create mode 100644 components/Collapse/__changelog__/index.en-US.md create mode 100644 components/Collapse/__changelog__/index.zh-CN.md create mode 100644 components/Collapse/__demo__/accordion.md create mode 100644 components/Collapse/__demo__/basic.md create mode 100644 components/Collapse/__demo__/borderless.md create mode 100644 components/Collapse/__demo__/customStyle.md create mode 100644 components/Collapse/__demo__/destoryOnHide.md create mode 100644 components/Collapse/__demo__/extra.md create mode 100644 components/Collapse/__demo__/iconPosition.md create mode 100644 components/Collapse/__demo__/inline.md create mode 100644 components/Collapse/__demo__/lazyload.md create mode 100644 components/Collapse/__template__/index.en-US.md create mode 100644 components/Collapse/__template__/index.zh-CN.md create mode 100644 components/Collapse/__test__/__snapshots__/demo.test.ts.snap create mode 100644 components/Collapse/__test__/__snapshots__/index.test.tsx.snap create mode 100644 components/Collapse/__test__/demo.test.ts create mode 100644 components/Collapse/__test__/index.test.tsx create mode 100644 components/Collapse/collapse.tsx create mode 100644 components/Collapse/index.tsx create mode 100644 components/Collapse/interface.ts create mode 100644 components/Collapse/item.tsx create mode 100644 components/Collapse/style/index.less create mode 100644 components/Collapse/style/index.ts create mode 100644 components/Collapse/style/token.less create mode 100644 components/Comment/README.en-US.md create mode 100644 components/Comment/README.zh-CN.md create mode 100644 components/Comment/__demo__/align.md create mode 100644 components/Comment/__demo__/basic.md create mode 100644 components/Comment/__demo__/editor.md create mode 100644 components/Comment/__demo__/inline.md create mode 100644 components/Comment/__demo__/list.md create mode 100644 components/Comment/__template__/index.en-US.md create mode 100644 components/Comment/__template__/index.zh-CN.md create mode 100644 components/Comment/__test__/__snapshots__/demo.test.ts.snap create mode 100644 components/Comment/__test__/__snapshots__/index.test.tsx.snap create mode 100644 components/Comment/__test__/demo.test.ts create mode 100644 components/Comment/__test__/index.test.tsx create mode 100644 components/Comment/index.tsx create mode 100644 components/Comment/interface.ts create mode 100644 components/Comment/style/index.less create mode 100644 components/Comment/style/index.ts create mode 100644 components/Comment/style/token.less create mode 100644 components/ConfigProvider/README.en-US.md create mode 100644 components/ConfigProvider/README.zh-CN.md create mode 100644 components/ConfigProvider/__changelog__/index.en-US.md create mode 100644 components/ConfigProvider/__changelog__/index.zh-CN.md create mode 100644 components/ConfigProvider/__demo__/basic.md create mode 100644 components/ConfigProvider/__demo__/component-config.md create mode 100644 components/ConfigProvider/__demo__/renderEmpty.md create mode 100644 components/ConfigProvider/__demo__/tablePagination.md create mode 100644 components/ConfigProvider/__demo__/theme.md create mode 100644 components/ConfigProvider/__template__/index.en-US.md create mode 100644 components/ConfigProvider/__template__/index.zh-CN.md create mode 100644 components/ConfigProvider/__test__/__snapshots__/demo.test.ts.snap create mode 100644 components/ConfigProvider/__test__/demo.test.ts create mode 100644 components/ConfigProvider/__test__/locale.test.tsx create mode 100644 components/ConfigProvider/__test__/theme.test.tsx create mode 100644 components/ConfigProvider/index.tsx create mode 100644 components/ConfigProvider/interface.ts create mode 100644 components/ConfigProvider/style/index.ts create mode 100644 components/ConfigProvider/util.ts create mode 100644 components/DatePicker/README.en-US.md create mode 100644 components/DatePicker/README.zh-CN.md create mode 100644 components/DatePicker/__changelog__/index.en-US.md create mode 100644 components/DatePicker/__changelog__/index.zh-CN.md create mode 100644 components/DatePicker/__demo__/basic.md create mode 100644 components/DatePicker/__demo__/control.md create mode 100644 components/DatePicker/__demo__/dateRender.md create mode 100644 components/DatePicker/__demo__/defaultValue.md create mode 100644 components/DatePicker/__demo__/disabled-date-advance.md create mode 100644 components/DatePicker/__demo__/disabled-date.md create mode 100644 components/DatePicker/__demo__/disabled.md create mode 100644 components/DatePicker/__demo__/extra.md create mode 100644 components/DatePicker/__demo__/month.md create mode 100644 components/DatePicker/__demo__/panel.md create mode 100644 components/DatePicker/__demo__/quarter.md create mode 100644 components/DatePicker/__demo__/range.md create mode 100644 components/DatePicker/__demo__/shortcuts-placement-left.md create mode 100644 components/DatePicker/__demo__/shortcuts.md create mode 100644 components/DatePicker/__demo__/showtime.md create mode 100644 components/DatePicker/__demo__/size.md create mode 100644 components/DatePicker/__demo__/triggerElement.md create mode 100644 components/DatePicker/__demo__/week.md create mode 100644 components/DatePicker/__demo__/year.md create mode 100644 components/DatePicker/__template__/index.en-US.md create mode 100644 components/DatePicker/__template__/index.zh-CN.md create mode 100644 components/DatePicker/__test__/__snapshots__/date.test.tsx.snap create mode 100644 components/DatePicker/__test__/__snapshots__/demo.test.ts.snap create mode 100644 components/DatePicker/__test__/date.test.tsx create mode 100644 components/DatePicker/__test__/demo.test.ts create mode 100644 components/DatePicker/__test__/format.test.tsx create mode 100644 components/DatePicker/__test__/month.test.tsx create mode 100644 components/DatePicker/__test__/panel.test.tsx create mode 100644 components/DatePicker/__test__/quarter.test.tsx create mode 100644 components/DatePicker/__test__/range.hover.test.tsx create mode 100644 components/DatePicker/__test__/range.panel.test.tsx create mode 100644 components/DatePicker/__test__/range.test.tsx create mode 100644 components/DatePicker/__test__/utils.ts create mode 100644 components/DatePicker/__test__/week.test.tsx create mode 100644 components/DatePicker/__test__/year.test.tsx create mode 100644 components/DatePicker/hooks/useCellClassName.ts create mode 100644 components/DatePicker/index.tsx create mode 100644 components/DatePicker/interface.tsx create mode 100644 components/DatePicker/panels/body.tsx create mode 100644 components/DatePicker/panels/date/index.tsx create mode 100644 components/DatePicker/panels/footer.tsx create mode 100644 components/DatePicker/panels/header.tsx create mode 100644 components/DatePicker/panels/month/index.tsx create mode 100644 components/DatePicker/panels/quarter/index.tsx create mode 100644 components/DatePicker/panels/range/index.tsx create mode 100644 components/DatePicker/panels/shortcuts.tsx create mode 100644 components/DatePicker/panels/week-list.tsx create mode 100644 components/DatePicker/panels/week/index.tsx create mode 100644 components/DatePicker/panels/year/index.tsx create mode 100644 components/DatePicker/picker-range.tsx create mode 100644 components/DatePicker/picker.tsx create mode 100644 components/DatePicker/style/date.less create mode 100644 components/DatePicker/style/index.less create mode 100644 components/DatePicker/style/index.ts create mode 100644 components/DatePicker/style/month.less create mode 100644 components/DatePicker/style/quarter.less create mode 100644 components/DatePicker/style/range.less create mode 100644 components/DatePicker/style/shortcuts.less create mode 100644 components/DatePicker/style/token.less create mode 100644 components/DatePicker/style/week.less create mode 100644 components/DatePicker/style/year.less create mode 100644 components/DatePicker/util.ts create mode 100644 components/Descriptions/README.en-US.md create mode 100644 components/Descriptions/README.zh-CN.md create mode 100644 components/Descriptions/__changelog__/index.zh-CN.md create mode 100644 components/Descriptions/__demo__/align.md create mode 100644 components/Descriptions/__demo__/basic.md create mode 100644 components/Descriptions/__demo__/border.md create mode 100644 components/Descriptions/__demo__/layout.md create mode 100644 components/Descriptions/__demo__/responsive.md create mode 100644 components/Descriptions/__demo__/single.md create mode 100644 components/Descriptions/__demo__/size.md create mode 100644 components/Descriptions/__template__/index.en-US.md create mode 100644 components/Descriptions/__template__/index.zh-CN.md create mode 100644 components/Descriptions/__test__/__snapshots__/demo.test.ts.snap create mode 100644 components/Descriptions/__test__/__snapshots__/index.test.tsx.snap create mode 100644 components/Descriptions/__test__/demo.test.ts create mode 100644 components/Descriptions/__test__/index.test.tsx create mode 100644 components/Descriptions/index.tsx create mode 100644 components/Descriptions/interface.ts create mode 100644 components/Descriptions/style/index.less create mode 100644 components/Descriptions/style/index.ts create mode 100644 components/Descriptions/style/token.less create mode 100644 components/Divider/README.en-US.md create mode 100644 components/Divider/README.zh-CN.md create mode 100644 components/Divider/__demo__/basic.md create mode 100644 components/Divider/__demo__/vertical.md create mode 100644 components/Divider/__demo__/with-text.md create mode 100644 components/Divider/__template__/index.en-US.md create mode 100644 components/Divider/__template__/index.zh-CN.md create mode 100644 components/Divider/__test__/__snapshots__/demo.test.ts.snap create mode 100644 components/Divider/__test__/__snapshots__/index.test.tsx.snap create mode 100644 components/Divider/__test__/demo.test.ts create mode 100644 components/Divider/__test__/index.test.tsx create mode 100644 components/Divider/index.tsx create mode 100644 components/Divider/interface.ts create mode 100644 components/Divider/style/index.less create mode 100644 components/Divider/style/index.ts create mode 100644 components/Divider/style/token.less create mode 100644 components/Drawer/README.en-US.md create mode 100644 components/Drawer/README.zh-CN.md create mode 100644 components/Drawer/__changelog__/index.en-US.md create mode 100644 components/Drawer/__changelog__/index.zh-CN.md create mode 100644 components/Drawer/__demo__/basic.md create mode 100644 components/Drawer/__demo__/container.md create mode 100644 components/Drawer/__demo__/drawer_form.md create mode 100644 components/Drawer/__demo__/nest.md create mode 100644 components/Drawer/__demo__/nofooter.md create mode 100644 components/Drawer/__demo__/position.md create mode 100644 components/Drawer/__demo__/preview.md create mode 100644 components/Drawer/__template__/index.en-US.md create mode 100644 components/Drawer/__template__/index.zh-CN.md create mode 100644 components/Drawer/__test__/__snapshots__/demo.test.ts.snap create mode 100644 components/Drawer/__test__/demo.test.ts create mode 100644 components/Drawer/__test__/index.test.tsx create mode 100644 components/Drawer/index.tsx create mode 100644 components/Drawer/interface.ts create mode 100644 components/Drawer/style/index.less create mode 100644 components/Drawer/style/index.ts create mode 100644 components/Drawer/style/token.less create mode 100644 components/Dropdown/README.en-US.md create mode 100644 components/Dropdown/README.zh-CN.md create mode 100644 components/Dropdown/__changelog__/index.en-US.md create mode 100644 components/Dropdown/__changelog__/index.zh-CN.md create mode 100644 components/Dropdown/__demo__/basic.md create mode 100644 components/Dropdown/__demo__/callback.md create mode 100644 components/Dropdown/__demo__/control.md create mode 100644 components/Dropdown/__demo__/dropdown-button.md create mode 100644 components/Dropdown/__demo__/extra-element.md create mode 100644 components/Dropdown/__demo__/group.md create mode 100644 components/Dropdown/__demo__/item-icon.md create mode 100644 components/Dropdown/__demo__/position.md create mode 100644 components/Dropdown/__demo__/right-click.md create mode 100644 components/Dropdown/__demo__/sub-menu.md create mode 100644 components/Dropdown/__demo__/trigger.md create mode 100644 components/Dropdown/__template__/index.en-US.md create mode 100644 components/Dropdown/__template__/index.zh-CN.md create mode 100644 components/Dropdown/__test__/__snapshots__/demo.test.ts.snap create mode 100644 components/Dropdown/__test__/__snapshots__/index.test.tsx.snap create mode 100644 components/Dropdown/__test__/demo.test.ts create mode 100644 components/Dropdown/__test__/index.test.tsx create mode 100644 components/Dropdown/button.tsx create mode 100644 components/Dropdown/index.tsx create mode 100644 components/Dropdown/interface.ts create mode 100644 components/Dropdown/style/index.less create mode 100644 components/Dropdown/style/index.ts create mode 100644 components/Dropdown/style/token.less create mode 100644 components/Empty/README.en-US.md create mode 100644 components/Empty/README.zh-CN.md create mode 100644 components/Empty/__demo__/basic.md create mode 100644 components/Empty/__demo__/custom_icon.md create mode 100644 components/Empty/__demo__/image.md create mode 100644 components/Empty/__template__/index.en-US.md create mode 100644 components/Empty/__template__/index.zh-CN.md create mode 100644 components/Empty/__test__/__snapshots__/demo.test.ts.snap create mode 100644 components/Empty/__test__/__snapshots__/index.test.ts.snap create mode 100644 components/Empty/__test__/demo.test.ts create mode 100644 components/Empty/__test__/index.test.ts create mode 100644 components/Empty/index.tsx create mode 100644 components/Empty/interface.ts create mode 100644 components/Empty/style/index.less create mode 100644 components/Empty/style/index.ts create mode 100644 components/Empty/style/token.less create mode 100644 components/Form/README.en-US.md create mode 100644 components/Form/README.zh-CN.md create mode 100644 components/Form/__changelog__/index.en-US.md create mode 100644 components/Form/__changelog__/index.zh-CN.md create mode 100644 components/Form/__demo__/basic.md create mode 100644 components/Form/__demo__/control-below.md create mode 100644 components/Form/__demo__/control.md create mode 100644 components/Form/__demo__/custom.md create mode 100644 components/Form/__demo__/disabled.md create mode 100644 components/Form/__demo__/layout.md create mode 100644 components/Form/__demo__/list.md create mode 100644 components/Form/__demo__/methods.md create mode 100644 components/Form/__demo__/nest.md create mode 100644 components/Form/__demo__/normalize.md create mode 100644 components/Form/__demo__/register.md create mode 100644 components/Form/__demo__/scrollToField.md create mode 100644 components/Form/__demo__/shouldUpdate.md create mode 100644 components/Form/__demo__/update.md create mode 100644 components/Form/__demo__/validate-status.md create mode 100644 components/Form/__template__/index.en-US.md create mode 100644 components/Form/__template__/index.zh-CN.md create mode 100644 components/Form/__test__/__snapshots__/demo.test.ts.snap create mode 100644 components/Form/__test__/case.test.tsx create mode 100644 components/Form/__test__/demo.test.ts create mode 100644 components/Form/__test__/dym.test.tsx create mode 100644 components/Form/__test__/form.test.tsx create mode 100644 components/Form/__test__/index.test.tsx create mode 100644 components/Form/__test__/list.test.tsx create mode 100644 components/Form/__test__/shouldUpdate.test.tsx create mode 100644 components/Form/__test__/useform.test.tsx create mode 100644 components/Form/__test__/validateStaus.test.tsx create mode 100644 components/Form/context.ts create mode 100644 components/Form/control.tsx create mode 100644 components/Form/form-item.tsx create mode 100644 components/Form/form-list.tsx create mode 100644 components/Form/form.tsx create mode 100644 components/Form/index.tsx create mode 100644 components/Form/interface.tsx create mode 100644 components/Form/promisify.ts create mode 100644 components/Form/store.tsx create mode 100644 components/Form/style/index.less create mode 100644 components/Form/style/index.ts create mode 100644 components/Form/style/status.less create mode 100644 components/Form/style/token.less create mode 100644 components/Form/useForm.ts create mode 100644 components/Form/utils.tsx create mode 100644 components/Grid/README.en-US.md create mode 100644 components/Grid/README.zh-CN.md create mode 100644 components/Grid/__changelog__/index.en-US.md create mode 100644 components/Grid/__changelog__/index.zh-CN.md create mode 100644 components/Grid/__demo__/adaptation.md create mode 100644 components/Grid/__demo__/adaptation_object.md create mode 100644 components/Grid/__demo__/basic.md create mode 100644 components/Grid/__demo__/flex-align.md create mode 100644 components/Grid/__demo__/flex-justify.md create mode 100644 components/Grid/__demo__/gutter.md create mode 100644 components/Grid/__demo__/offset.md create mode 100644 components/Grid/__demo__/order.md create mode 100644 components/Grid/__demo__/push_pull.md create mode 100644 components/Grid/__template__/index.en-US.md create mode 100644 components/Grid/__template__/index.zh-CN.md create mode 100644 components/Grid/__test__/__snapshots__/demo.test.ts.snap create mode 100644 components/Grid/__test__/__snapshots__/index.test.tsx.snap create mode 100644 components/Grid/__test__/demo.test.ts create mode 100644 components/Grid/__test__/index.test.tsx create mode 100644 components/Grid/col.tsx create mode 100644 components/Grid/index.tsx create mode 100644 components/Grid/interface.ts create mode 100644 components/Grid/row.tsx create mode 100644 components/Grid/style/col.less create mode 100644 components/Grid/style/index.less create mode 100644 components/Grid/style/index.ts create mode 100644 components/Grid/style/row.less create mode 100644 components/Icon/addFromIconFontCn.tsx create mode 100644 components/Icon/index.tsx create mode 100644 components/Icon/style/index.ts create mode 100644 components/Image/README.en-US.md create mode 100644 components/Image/README.zh-CN.md create mode 100644 components/Image/__changelog__/index.en-US.md create mode 100644 components/Image/__changelog__/index.zh-CN.md create mode 100644 components/Image/__demo__/basic.md create mode 100644 components/Image/__demo__/caption.md create mode 100644 components/Image/__demo__/component-preview-group.md create mode 100644 components/Image/__demo__/component-preview.md create mode 100644 components/Image/__demo__/custom-preview-actions.md create mode 100644 components/Image/__demo__/error.md create mode 100644 components/Image/__demo__/extra-actions.md create mode 100644 components/Image/__demo__/loader.md create mode 100644 components/Image/__demo__/preview-get-popup-container.md create mode 100644 components/Image/__demo__/preview-group.md create mode 100644 components/Image/__demo__/progressive-loader.md create mode 100644 components/Image/__template__/index.en-US.md create mode 100644 components/Image/__template__/index.zh-CN.md create mode 100644 components/Image/__test__/__snapshots__/demo.test.ts.snap create mode 100644 components/Image/__test__/__snapshots__/index.test.tsx.snap create mode 100644 components/Image/__test__/demo.test.ts create mode 100644 components/Image/__test__/index.test.tsx create mode 100644 components/Image/__test__/preview.test.tsx create mode 100644 components/Image/__test__/previewGroup.test.tsx create mode 100644 components/Image/image-footer.tsx create mode 100644 components/Image/image-preview-arrow.tsx create mode 100644 components/Image/image-preview-group.tsx create mode 100644 components/Image/image-preview-toolbar.tsx create mode 100644 components/Image/image-preview.tsx create mode 100644 components/Image/image.tsx create mode 100644 components/Image/index.tsx create mode 100644 components/Image/interface.ts create mode 100644 components/Image/previewGroupContext.ts create mode 100644 components/Image/style/image.less create mode 100644 components/Image/style/index.less create mode 100644 components/Image/style/index.ts create mode 100644 components/Image/style/preview.less create mode 100644 components/Image/style/token.less create mode 100644 components/Image/style/trigger.less create mode 100644 components/Image/trigger-for-toolbar.tsx create mode 100644 components/Image/utils/getFixTranslate.ts create mode 100644 components/Image/utils/getScale.ts create mode 100644 components/Image/utils/hooks/useImageStatus.ts create mode 100644 components/Image/utils/hooks/useShowFooter.ts create mode 100644 components/Input/README.en-US.md create mode 100644 components/Input/README.zh-CN.md create mode 100644 components/Input/__changelog__/index.en-US.md create mode 100644 components/Input/__changelog__/index.zh-CN.md create mode 100644 components/Input/__demo__/addon.md create mode 100644 components/Input/__demo__/basic.md create mode 100644 components/Input/__demo__/group.md create mode 100644 components/Input/__demo__/max-length.md create mode 100644 components/Input/__demo__/password.md create mode 100644 components/Input/__demo__/prefix_suffix.md create mode 100644 components/Input/__demo__/search.md create mode 100644 components/Input/__demo__/search_loading.md create mode 100644 components/Input/__demo__/size.md create mode 100644 components/Input/__demo__/status.md create mode 100644 components/Input/__demo__/textarea.md create mode 100644 components/Input/__demo__/textarea_autosize.md create mode 100644 components/Input/__template__/index.en-US.md create mode 100644 components/Input/__template__/index.zh-CN.md create mode 100644 components/Input/__test__/__snapshots__/demo.test.ts.snap create mode 100644 components/Input/__test__/__snapshots__/index.test.tsx.snap create mode 100644 components/Input/__test__/autoSize.test.ts create mode 100644 components/Input/__test__/demo.test.ts create mode 100644 components/Input/__test__/index.test.tsx create mode 100644 components/Input/autoSizeTextAreaHeight.tsx create mode 100644 components/Input/group.tsx create mode 100644 components/Input/index.tsx create mode 100644 components/Input/input-element.tsx create mode 100644 components/Input/input.tsx create mode 100644 components/Input/interface.tsx create mode 100644 components/Input/password.tsx create mode 100644 components/Input/search.tsx create mode 100644 components/Input/style/index.less create mode 100644 components/Input/style/index.ts create mode 100644 components/Input/style/password.less create mode 100644 components/Input/style/search.less create mode 100644 components/Input/style/size.less create mode 100644 components/Input/style/textarea.less create mode 100644 components/Input/style/token.less create mode 100644 components/Input/textarea.tsx create mode 100644 components/InputNumber/README.en-US.md create mode 100644 components/InputNumber/README.zh-CN.md create mode 100644 components/InputNumber/__changelog__/index.en-US.md create mode 100644 components/InputNumber/__changelog__/index.zh-CN.md create mode 100644 components/InputNumber/__demo__/basic.md create mode 100644 components/InputNumber/__demo__/format.md create mode 100644 components/InputNumber/__demo__/mode.md create mode 100644 components/InputNumber/__demo__/precision.md create mode 100644 components/InputNumber/__demo__/size.md create mode 100644 components/InputNumber/__demo__/suffix.md create mode 100644 components/InputNumber/__template__/index.en-US.md create mode 100644 components/InputNumber/__template__/index.zh-CN.md create mode 100644 components/InputNumber/__test__/__snapshots__/demo.test.ts.snap create mode 100644 components/InputNumber/__test__/__snapshots__/index.test.tsx.snap create mode 100644 components/InputNumber/__test__/demo.test.ts create mode 100644 components/InputNumber/__test__/index.test.tsx create mode 100644 components/InputNumber/index.tsx create mode 100644 components/InputNumber/interface.ts create mode 100644 components/InputNumber/style/index.less create mode 100644 components/InputNumber/style/index.ts create mode 100644 components/InputNumber/style/token.less create mode 100644 components/InputTag/README.en-US.md create mode 100644 components/InputTag/README.zh-CN.md create mode 100644 components/InputTag/__changelog__/index.en-US.md create mode 100644 components/InputTag/__changelog__/index.zh-CN.md create mode 100644 components/InputTag/__demo__/basic.md create mode 100644 components/InputTag/__demo__/labelInValue.md create mode 100644 components/InputTag/__demo__/render-tag.md create mode 100644 components/InputTag/__demo__/size.md create mode 100644 components/InputTag/__demo__/validate.md create mode 100644 components/InputTag/__template__/index.en-US.md create mode 100644 components/InputTag/__template__/index.zh-CN.md create mode 100644 components/InputTag/__test__/__snapshots__/demo.test.ts.snap create mode 100644 components/InputTag/__test__/__snapshots__/index.test.tsx.snap create mode 100644 components/InputTag/__test__/demo.test.ts create mode 100644 components/InputTag/__test__/index.test.tsx create mode 100644 components/InputTag/index.tsx create mode 100644 components/InputTag/input-tag.tsx create mode 100644 components/InputTag/interface.ts create mode 100644 components/InputTag/style/index.less create mode 100644 components/InputTag/style/index.ts create mode 100644 components/InputTag/style/token.less create mode 100644 components/Layout/README.en-US.md create mode 100644 components/Layout/README.zh-CN.md create mode 100644 components/Layout/__changelog__/index.zh-CN.md create mode 100644 components/Layout/__demo__/basic.md create mode 100644 components/Layout/__demo__/breakpoint.md create mode 100644 components/Layout/__demo__/collapsed.md create mode 100644 components/Layout/__demo__/customIcon.md create mode 100644 components/Layout/__demo__/resize.md create mode 100644 components/Layout/__template__/index.en-US.md create mode 100644 components/Layout/__template__/index.zh-CN.md create mode 100644 components/Layout/__test__/__snapshots__/demo.test.ts.snap create mode 100644 components/Layout/__test__/__snapshots__/index.test.tsx.snap create mode 100644 components/Layout/__test__/demo.test.ts create mode 100644 components/Layout/__test__/index.test.tsx create mode 100644 components/Layout/content.tsx create mode 100644 components/Layout/footer.tsx create mode 100644 components/Layout/header.tsx create mode 100644 components/Layout/index.tsx create mode 100644 components/Layout/interface.ts create mode 100644 components/Layout/sider.tsx create mode 100644 components/Layout/style/index.less create mode 100644 components/Layout/style/index.ts create mode 100644 components/Layout/style/token.less create mode 100644 components/Link/README.en-US.md create mode 100644 components/Link/README.zh-CN.md create mode 100644 components/Link/__changelog__/index.en-US.md create mode 100644 components/Link/__changelog__/index.zh-CN.md create mode 100644 components/Link/__demo__/basic.md create mode 100644 components/Link/__demo__/dropdown.md create mode 100644 components/Link/__demo__/hoverable.md create mode 100644 components/Link/__demo__/icon.md create mode 100644 components/Link/__demo__/status.md create mode 100644 components/Link/__template__/index.en-US.md create mode 100644 components/Link/__template__/index.zh-CN.md create mode 100644 components/Link/__test__/__snapshots__/demo.test.ts.snap create mode 100644 components/Link/__test__/__snapshots__/index.test.tsx.snap create mode 100644 components/Link/__test__/demo.test.ts create mode 100644 components/Link/__test__/index.test.tsx create mode 100644 components/Link/index.tsx create mode 100644 components/Link/interface.ts create mode 100644 components/Link/style/index.less create mode 100644 components/Link/style/index.ts create mode 100644 components/Link/style/token.less create mode 100644 components/List/README.en-US.md create mode 100644 components/List/README.zh-CN.md create mode 100644 components/List/__changelog__/index.en-US.md create mode 100644 components/List/__changelog__/index.zh-CN.md create mode 100644 components/List/__demo__/action-layout.md create mode 100644 components/List/__demo__/actions.md create mode 100644 components/List/__demo__/basic.md create mode 100644 components/List/__demo__/grid.md create mode 100644 components/List/__demo__/meta.md create mode 100644 components/List/__demo__/responsive-grid.md create mode 100644 components/List/__demo__/scrollLoad.md create mode 100644 components/List/__demo__/size.md create mode 100644 components/List/__demo__/virtual-list.md create mode 100644 components/List/__template__/index.en-US.md create mode 100644 components/List/__template__/index.zh-CN.md create mode 100644 components/List/__test__/__snapshots__/demo.test.ts.snap create mode 100644 components/List/__test__/__snapshots__/index.test.tsx.snap create mode 100644 components/List/__test__/demo.test.ts create mode 100644 components/List/__test__/index.test.tsx create mode 100644 components/List/index.tsx create mode 100644 components/List/interface.ts create mode 100644 components/List/item.tsx create mode 100644 components/List/meta.tsx create mode 100644 components/List/style/index.less create mode 100644 components/List/style/index.ts create mode 100644 components/List/style/token.less create mode 100644 components/Mentions/README.en-US.md create mode 100644 components/Mentions/README.zh-CN.md create mode 100644 components/Mentions/__changelog__/index.en-US.md create mode 100644 components/Mentions/__changelog__/index.zh-CN.md create mode 100644 components/Mentions/__demo__/basic.md create mode 100644 components/Mentions/__demo__/control.md create mode 100644 components/Mentions/__demo__/prefix.md create mode 100644 components/Mentions/__demo__/status.md create mode 100644 components/Mentions/__template__/index.en-US.md create mode 100644 components/Mentions/__template__/index.zh-CN.md create mode 100644 components/Mentions/__test__/__snapshots__/demo.test.ts.snap create mode 100644 components/Mentions/__test__/__snapshots__/index.test.tsx.snap create mode 100644 components/Mentions/__test__/demo.test.ts create mode 100644 components/Mentions/__test__/index.test.tsx create mode 100644 components/Mentions/index.tsx create mode 100644 components/Mentions/interface.ts create mode 100644 components/Mentions/style/index.less create mode 100644 components/Mentions/style/index.ts create mode 100644 components/Mentions/style/token.less create mode 100644 components/Mentions/utils.ts create mode 100644 components/Menu/README.en-US.md create mode 100644 components/Menu/README.zh-CN.md create mode 100644 components/Menu/__changelog__/index.en-US.md create mode 100644 components/Menu/__changelog__/index.zh-CN.md create mode 100644 components/Menu/__demo__/button.md create mode 100644 components/Menu/__demo__/collapse-control.md create mode 100644 components/Menu/__demo__/dark-horizontal.md create mode 100644 components/Menu/__demo__/horizontal.md create mode 100644 components/Menu/__demo__/pop.md create mode 100644 components/Menu/__demo__/size.md create mode 100644 components/Menu/__demo__/sub-menu.md create mode 100644 components/Menu/__template__/index.en-US.md create mode 100644 components/Menu/__template__/index.zh-CN.md create mode 100644 components/Menu/__test__/__snapshots__/demo.test.ts.snap create mode 100644 components/Menu/__test__/__snapshots__/index.test.tsx.snap create mode 100644 components/Menu/__test__/demo.test.ts create mode 100644 components/Menu/__test__/index.test.tsx create mode 100644 components/Menu/context.ts create mode 100644 components/Menu/hotkey.ts create mode 100644 components/Menu/indent.tsx create mode 100644 components/Menu/index.tsx create mode 100644 components/Menu/interface.tsx create mode 100644 components/Menu/item-group.tsx create mode 100644 components/Menu/item.tsx create mode 100644 components/Menu/overflow-wrap.tsx create mode 100644 components/Menu/style/index.less create mode 100644 components/Menu/style/index.ts create mode 100644 components/Menu/style/token.less create mode 100644 components/Menu/sub-menu/index.tsx create mode 100644 components/Menu/sub-menu/inline.tsx create mode 100644 components/Menu/sub-menu/pop.tsx create mode 100644 components/Menu/util.ts create mode 100644 components/Message/README.en-US.md create mode 100644 components/Message/README.zh-CN.md create mode 100644 components/Message/__changelog__/index.en-US.md create mode 100644 components/Message/__changelog__/index.zh-CN.md create mode 100644 components/Message/__demo__/basic.md create mode 100644 components/Message/__demo__/closable.md create mode 100644 components/Message/__demo__/hide.md create mode 100644 components/Message/__demo__/icon.md create mode 100644 components/Message/__demo__/position.md create mode 100644 components/Message/__demo__/type.md create mode 100644 components/Message/__demo__/update_duration.md create mode 100644 components/Message/__demo__/update_message.md create mode 100644 components/Message/__template__/index.en-US.md create mode 100644 components/Message/__template__/index.zh-CN.md create mode 100644 components/Message/__test__/__snapshots__/demo.test.ts.snap create mode 100644 components/Message/__test__/__snapshots__/index.test.tsx.snap create mode 100644 components/Message/__test__/demo.test.ts create mode 100644 components/Message/__test__/index.test.tsx create mode 100644 components/Message/index.tsx create mode 100644 components/Message/interface.ts create mode 100644 components/Message/style/index.less create mode 100644 components/Message/style/index.ts create mode 100644 components/Message/style/token.less create mode 100644 components/Modal/README.en-US.md create mode 100644 components/Modal/README.zh-CN.md create mode 100644 components/Modal/__changelog__/index.en-US.md create mode 100644 components/Modal/__changelog__/index.zh-CN.md create mode 100644 components/Modal/__demo__/async_close.md create mode 100644 components/Modal/__demo__/basic.md create mode 100644 components/Modal/__demo__/confirm.md create mode 100644 components/Modal/__demo__/confirm_type.md create mode 100644 components/Modal/__demo__/custom_button_text.md create mode 100644 components/Modal/__demo__/footer.md create mode 100644 components/Modal/__demo__/header.md create mode 100644 components/Modal/__demo__/load_data.md create mode 100644 components/Modal/__demo__/modal_render.md create mode 100644 components/Modal/__demo__/position.md create mode 100644 components/Modal/__demo__/update.md create mode 100644 components/Modal/__demo__/useModal.md create mode 100644 components/Modal/__demo__/with_alert.md create mode 100644 components/Modal/__demo__/with_step.md create mode 100644 components/Modal/__template__/index.en-US.md create mode 100644 components/Modal/__template__/index.zh-CN.md create mode 100644 components/Modal/__test__/__snapshots__/demo.test.ts.snap create mode 100644 components/Modal/__test__/__snapshots__/index.test.tsx.snap create mode 100644 components/Modal/__test__/api.test.tsx create mode 100644 components/Modal/__test__/config.test.tsx create mode 100644 components/Modal/__test__/confirm.test.tsx create mode 100644 components/Modal/__test__/demo.test.ts create mode 100644 components/Modal/__test__/index.test.tsx create mode 100644 components/Modal/__test__/popup.test.tsx create mode 100644 components/Modal/__test__/useModal.test.tsx create mode 100644 components/Modal/config.ts create mode 100644 components/Modal/confirm.tsx create mode 100644 components/Modal/index.tsx create mode 100644 components/Modal/interface.ts create mode 100644 components/Modal/locale.tsx create mode 100644 components/Modal/modal.tsx create mode 100644 components/Modal/style/index.less create mode 100644 components/Modal/style/index.ts create mode 100644 components/Modal/style/token.less create mode 100644 components/Modal/useModal/contextHolder.tsx create mode 100644 components/Modal/useModal/hookModal.tsx create mode 100644 components/Modal/useModal/index.tsx create mode 100644 components/Notification/README.en-US.md create mode 100644 components/Notification/README.zh-CN.md create mode 100644 components/Notification/__changelog__/index.zh-CN.md create mode 100644 components/Notification/__demo__/basic.md create mode 100644 components/Notification/__demo__/btn.md create mode 100644 components/Notification/__demo__/icon.md create mode 100644 components/Notification/__demo__/position.md create mode 100644 components/Notification/__demo__/style.md create mode 100644 components/Notification/__demo__/type.md create mode 100644 components/Notification/__demo__/update_duration.md create mode 100644 components/Notification/__demo__/update_notification.md create mode 100644 components/Notification/__template__/index.en-US.md create mode 100644 components/Notification/__template__/index.zh-CN.md create mode 100644 components/Notification/__test__/__snapshots__/demo.test.ts.snap create mode 100644 components/Notification/__test__/__snapshots__/index.test.tsx.snap create mode 100644 components/Notification/__test__/demo.test.ts create mode 100644 components/Notification/__test__/index.test.tsx create mode 100644 components/Notification/index.tsx create mode 100644 components/Notification/interface.ts create mode 100644 components/Notification/style/index.less create mode 100644 components/Notification/style/index.ts create mode 100644 components/Notification/style/token.less create mode 100644 components/PageHeader/README.en-US.md create mode 100644 components/PageHeader/README.zh-CN.md create mode 100644 components/PageHeader/__changelog__/index.zh-CN.md create mode 100644 components/PageHeader/__demo__/background.md create mode 100644 components/PageHeader/__demo__/basic.md create mode 100644 components/PageHeader/__demo__/breadcrumb.md create mode 100644 components/PageHeader/__demo__/conplex.md create mode 100644 components/PageHeader/__template__/index.en-US.md create mode 100644 components/PageHeader/__template__/index.zh-CN.md create mode 100644 components/PageHeader/__test__/__snapshots__/demo.test.ts.snap create mode 100644 components/PageHeader/__test__/__snapshots__/index.test.ts.snap create mode 100644 components/PageHeader/__test__/demo.test.ts create mode 100644 components/PageHeader/__test__/index.test.ts create mode 100644 components/PageHeader/index.tsx create mode 100644 components/PageHeader/interface.ts create mode 100644 components/PageHeader/style/index.less create mode 100644 components/PageHeader/style/index.ts create mode 100644 components/PageHeader/style/token.less create mode 100644 components/Pagination/README.en-US.md create mode 100644 components/Pagination/README.zh-CN.md create mode 100644 components/Pagination/__changelog__/index.en-US.md create mode 100644 components/Pagination/__changelog__/index.zh-CN.md create mode 100644 components/Pagination/__demo__/all-options.md create mode 100644 components/Pagination/__demo__/basic.md create mode 100644 components/Pagination/__demo__/change-size.md create mode 100644 components/Pagination/__demo__/count-more.md create mode 100644 components/Pagination/__demo__/itemRender.md create mode 100644 components/Pagination/__demo__/jumper.md create mode 100644 components/Pagination/__demo__/show-more.md create mode 100644 components/Pagination/__demo__/show-total.md create mode 100644 components/Pagination/__demo__/simple.md create mode 100644 components/Pagination/__demo__/size.md create mode 100644 components/Pagination/__demo__/style.md create mode 100644 components/Pagination/__template__/index.en-US.md create mode 100644 components/Pagination/__template__/index.zh-CN.md create mode 100644 components/Pagination/__test__/__snapshots__/demo.test.ts.snap create mode 100644 components/Pagination/__test__/__snapshots__/index.test.tsx.snap create mode 100644 components/Pagination/__test__/demo.test.ts create mode 100644 components/Pagination/__test__/index.test.tsx create mode 100644 components/Pagination/index.tsx create mode 100644 components/Pagination/interface.ts create mode 100644 components/Pagination/page-item.tsx create mode 100644 components/Pagination/page-jumper.tsx create mode 100644 components/Pagination/page-options.tsx create mode 100644 components/Pagination/pagination.tsx create mode 100644 components/Pagination/style/index.less create mode 100644 components/Pagination/style/index.ts create mode 100644 components/Pagination/style/token.less create mode 100644 components/Popconfirm/README.en-US.md create mode 100644 components/Popconfirm/README.zh-CN.md create mode 100644 components/Popconfirm/__changelog__/index.en-US.md create mode 100644 components/Popconfirm/__changelog__/index.zh-CN.md create mode 100644 components/Popconfirm/__demo__/basic.md create mode 100644 components/Popconfirm/__demo__/icon.md create mode 100644 components/Popconfirm/__demo__/loading.md create mode 100644 components/Popconfirm/__demo__/position.md create mode 100644 components/Popconfirm/__demo__/text.md create mode 100644 components/Popconfirm/__template__/index.en-US.md create mode 100644 components/Popconfirm/__template__/index.zh-CN.md create mode 100644 components/Popconfirm/__test__/__snapshots__/demo.test.ts.snap create mode 100644 components/Popconfirm/__test__/demo.test.ts create mode 100644 components/Popconfirm/__test__/index.test.tsx create mode 100644 components/Popconfirm/index.tsx create mode 100644 components/Popconfirm/interface.ts create mode 100644 components/Popconfirm/style/index.less create mode 100644 components/Popconfirm/style/index.ts create mode 100644 components/Popconfirm/style/token.less create mode 100644 components/Popover/README.en-US.md create mode 100644 components/Popover/README.zh-CN.md create mode 100644 components/Popover/__changelog__/index.en-US.md create mode 100644 components/Popover/__changelog__/index.zh-CN.md create mode 100644 components/Popover/__demo__/basic.md create mode 100644 components/Popover/__demo__/popupVisible.md create mode 100644 components/Popover/__demo__/position.md create mode 100644 components/Popover/__demo__/trigger.md create mode 100644 components/Popover/__template__/index.en-US.md create mode 100644 components/Popover/__template__/index.zh-CN.md create mode 100644 components/Popover/__test__/__snapshots__/demo.test.ts.snap create mode 100644 components/Popover/__test__/demo.test.ts create mode 100644 components/Popover/__test__/index.test.tsx create mode 100644 components/Popover/index.tsx create mode 100644 components/Popover/interface.ts create mode 100644 components/Popover/style/index.less create mode 100644 components/Popover/style/index.ts create mode 100644 components/Popover/style/token.less create mode 100644 components/Portal/Portal.tsx create mode 100644 components/Portal/__test__/index.test.tsx create mode 100644 components/Portal/index.tsx create mode 100644 components/Progress/README.en-US.md create mode 100644 components/Progress/README.zh-CN.md create mode 100644 components/Progress/__changelog__/index.en-US.md create mode 100644 components/Progress/__changelog__/index.zh-CN.md create mode 100644 components/Progress/__demo__/animate.md create mode 100644 components/Progress/__demo__/basic.md create mode 100644 components/Progress/__demo__/circle.md create mode 100644 components/Progress/__demo__/line-gradient.md create mode 100644 components/Progress/__demo__/mini.md create mode 100644 components/Progress/__demo__/size.md create mode 100644 components/Progress/__demo__/status.md create mode 100644 components/Progress/__demo__/steps.md create mode 100644 components/Progress/__template__/index.en-US.md create mode 100644 components/Progress/__template__/index.zh-CN.md create mode 100644 components/Progress/__test__/__snapshots__/demo.test.ts.snap create mode 100644 components/Progress/__test__/__snapshots__/index.test.tsx.snap create mode 100644 components/Progress/__test__/demo.test.ts create mode 100644 components/Progress/__test__/index.test.tsx create mode 100644 components/Progress/circle-progress.tsx create mode 100644 components/Progress/index.tsx create mode 100644 components/Progress/interface.ts create mode 100644 components/Progress/line-progess.tsx create mode 100644 components/Progress/steps-progress.tsx create mode 100644 components/Progress/style/index.less create mode 100644 components/Progress/style/index.ts create mode 100644 components/Progress/style/token.less create mode 100644 components/Radio/README.en-US.md create mode 100644 components/Radio/README.zh-CN.md create mode 100644 components/Radio/__changelog__/index.zh-CN.md create mode 100644 components/Radio/__demo__/basic.md create mode 100644 components/Radio/__demo__/direction.md create mode 100644 components/Radio/__demo__/icon.md create mode 100644 components/Radio/__demo__/radio_button.md create mode 100644 components/Radio/__demo__/radio_group.md create mode 100644 components/Radio/__demo__/size.md create mode 100644 components/Radio/__template__/index.en-US.md create mode 100644 components/Radio/__template__/index.zh-CN.md create mode 100644 components/Radio/__test__/__snapshots__/demo.test.ts.snap create mode 100644 components/Radio/__test__/__snapshots__/group.test.tsx.snap create mode 100644 components/Radio/__test__/__snapshots__/index.test.tsx.snap create mode 100644 components/Radio/__test__/demo.test.ts create mode 100644 components/Radio/__test__/group.test.tsx create mode 100644 components/Radio/__test__/index.test.tsx create mode 100644 components/Radio/group.tsx create mode 100644 components/Radio/index.tsx create mode 100644 components/Radio/interface.ts create mode 100644 components/Radio/radio.tsx create mode 100644 components/Radio/style/index.less create mode 100644 components/Radio/style/index.ts create mode 100644 components/Radio/style/token.less create mode 100644 components/Rate/README.en-US.md create mode 100644 components/Rate/README.zh-CN.md create mode 100644 components/Rate/__changelog__/index.zh-CN.md create mode 100644 components/Rate/__demo__/allow-clear.md create mode 100644 components/Rate/__demo__/allowHalf.md create mode 100644 components/Rate/__demo__/basic.md create mode 100644 components/Rate/__demo__/character.md create mode 100644 components/Rate/__demo__/count.md create mode 100644 components/Rate/__demo__/grading.md create mode 100644 components/Rate/__demo__/readonly.md create mode 100644 components/Rate/__demo__/tooltips.md create mode 100644 components/Rate/__demo__/with-description.md create mode 100644 components/Rate/__template__/index.en-US.md create mode 100644 components/Rate/__template__/index.zh-CN.md create mode 100644 components/Rate/__test__/__snapshots__/demo.test.ts.snap create mode 100644 components/Rate/__test__/__snapshots__/index.test.tsx.snap create mode 100644 components/Rate/__test__/demo.test.ts create mode 100644 components/Rate/__test__/index.test.tsx create mode 100644 components/Rate/index.tsx create mode 100644 components/Rate/interface.ts create mode 100644 components/Rate/style/index.less create mode 100644 components/Rate/style/index.ts create mode 100644 components/Rate/style/token.less create mode 100644 components/ResizeBox/README.en-US.md create mode 100644 components/ResizeBox/README.zh-CN.md create mode 100644 components/ResizeBox/__changelog__/index.en-US.md create mode 100644 components/ResizeBox/__changelog__/index.zh-CN.md create mode 100644 components/ResizeBox/__demo__/basic.md create mode 100644 components/ResizeBox/__demo__/control.md create mode 100644 components/ResizeBox/__demo__/custom-triggers.md create mode 100644 components/ResizeBox/__demo__/layout.md create mode 100644 components/ResizeBox/__demo__/nested_split.md create mode 100644 components/ResizeBox/__demo__/split.md create mode 100644 components/ResizeBox/__template__/index.en-US.md create mode 100644 components/ResizeBox/__template__/index.zh-CN.md create mode 100644 components/ResizeBox/__test__/__snapshots__/demo.test.ts.snap create mode 100644 components/ResizeBox/__test__/__snapshots__/index.test.tsx.snap create mode 100644 components/ResizeBox/__test__/demo.test.ts create mode 100644 components/ResizeBox/__test__/index.test.tsx create mode 100644 components/ResizeBox/index.tsx create mode 100644 components/ResizeBox/interface.ts create mode 100644 components/ResizeBox/resize-trigger.tsx create mode 100644 components/ResizeBox/split.tsx create mode 100644 components/ResizeBox/style/index.less create mode 100644 components/ResizeBox/style/index.ts create mode 100644 components/ResizeBox/style/token.less create mode 100644 components/Result/403.tsx create mode 100644 components/Result/404.tsx create mode 100644 components/Result/500.tsx create mode 100644 components/Result/README.en-US.md create mode 100644 components/Result/README.zh-CN.md create mode 100644 components/Result/__changelog__/index.en-US.md create mode 100644 components/Result/__changelog__/index.zh-CN.md create mode 100644 components/Result/__demo__/403.md create mode 100644 components/Result/__demo__/404.md create mode 100644 components/Result/__demo__/500.md create mode 100644 components/Result/__demo__/all.md create mode 100644 components/Result/__demo__/basic.md create mode 100644 components/Result/__demo__/error.md create mode 100644 components/Result/__demo__/icon.md create mode 100644 components/Result/__demo__/info.md create mode 100644 components/Result/__demo__/warning.md create mode 100644 components/Result/__template__/index.en-US.md create mode 100644 components/Result/__template__/index.zh-CN.md create mode 100644 components/Result/__test__/__snapshots__/demo.test.ts.snap create mode 100644 components/Result/__test__/__snapshots__/index.test.tsx.snap create mode 100644 components/Result/__test__/demo.test.ts create mode 100644 components/Result/__test__/index.test.tsx create mode 100644 components/Result/index.tsx create mode 100644 components/Result/interface.ts create mode 100644 components/Result/style/index.less create mode 100644 components/Result/style/index.ts create mode 100644 components/Result/style/token.less create mode 100644 components/Select/README.en-US.md create mode 100644 components/Select/README.zh-CN.md create mode 100644 components/Select/__changelog__/index.en-US.md create mode 100644 components/Select/__changelog__/index.zh-CN.md create mode 100644 components/Select/__demo__/allow-create.md create mode 100644 components/Select/__demo__/async-data.md create mode 100644 components/Select/__demo__/basic.md create mode 100644 components/Select/__demo__/clear.md create mode 100644 components/Select/__demo__/custom-popup-width.md create mode 100644 components/Select/__demo__/dropdown-render.md create mode 100644 components/Select/__demo__/group.md create mode 100644 components/Select/__demo__/hide-selected-option.md create mode 100644 components/Select/__demo__/multiple.md create mode 100644 components/Select/__demo__/no-border.md create mode 100644 components/Select/__demo__/on-popup-scroll.md create mode 100644 components/Select/__demo__/options.md create mode 100644 components/Select/__demo__/relative.md create mode 100644 components/Select/__demo__/render-format.md create mode 100644 components/Select/__demo__/render-tag.md create mode 100644 components/Select/__demo__/self-input.md create mode 100644 components/Select/__demo__/show-search.md create mode 100644 components/Select/__demo__/size.md create mode 100644 components/Select/__demo__/token-separators.md create mode 100644 components/Select/__demo__/virtual-list.md create mode 100644 components/Select/__template__/index.en-US.md create mode 100644 components/Select/__template__/index.zh-CN.md create mode 100644 components/Select/__test__/__snapshots__/demo.test.ts.snap create mode 100644 components/Select/__test__/__snapshots__/index.test.tsx.snap create mode 100644 components/Select/__test__/demo.test.ts create mode 100644 components/Select/__test__/index.test.tsx create mode 100644 components/Select/index.tsx create mode 100644 components/Select/interface.tsx create mode 100644 components/Select/opt-group.tsx create mode 100644 components/Select/option.tsx create mode 100644 components/Select/select.tsx create mode 100644 components/Select/style/index.less create mode 100644 components/Select/style/index.ts create mode 100644 components/Select/style/token.less create mode 100644 components/Select/utils.tsx create mode 100644 components/Skeleton/README.en-US.md create mode 100644 components/Skeleton/README.zh-CN.md create mode 100644 components/Skeleton/__demo__/animate.md create mode 100644 components/Skeleton/__demo__/basic.md create mode 100644 components/Skeleton/__demo__/rows.md create mode 100644 components/Skeleton/__template__/index.en-US.md create mode 100644 components/Skeleton/__template__/index.zh-CN.md create mode 100644 components/Skeleton/__test__/__snapshots__/demo.test.ts.snap create mode 100644 components/Skeleton/__test__/__snapshots__/index.test.tsx.snap create mode 100644 components/Skeleton/__test__/demo.test.ts create mode 100644 components/Skeleton/__test__/index.test.tsx create mode 100644 components/Skeleton/image.tsx create mode 100644 components/Skeleton/index.tsx create mode 100644 components/Skeleton/interface.tsx create mode 100644 components/Skeleton/style/index.less create mode 100644 components/Skeleton/style/index.ts create mode 100644 components/Skeleton/style/token.less create mode 100644 components/Skeleton/text.tsx create mode 100644 components/Slider/README.en-US.md create mode 100644 components/Slider/README.zh-CN.md create mode 100644 components/Slider/__changelog__/index.en-US.md create mode 100644 components/Slider/__changelog__/index.zh-CN.md create mode 100644 components/Slider/__demo__/basic.md create mode 100644 components/Slider/__demo__/direction.md create mode 100644 components/Slider/__demo__/fixed.md create mode 100644 components/Slider/__demo__/format-tooltip.md create mode 100644 components/Slider/__demo__/icon.md create mode 100644 components/Slider/__demo__/input.md create mode 100644 components/Slider/__demo__/marks.md create mode 100644 components/Slider/__demo__/range.md create mode 100644 components/Slider/__demo__/reversed.md create mode 100644 components/Slider/__demo__/set-range.md create mode 100644 components/Slider/__demo__/status.md create mode 100644 components/Slider/__demo__/step.md create mode 100644 components/Slider/__demo__/tooltip.md create mode 100644 components/Slider/__template__/index.en-US.md create mode 100644 components/Slider/__template__/index.zh-CN.md create mode 100644 components/Slider/__test__/__snapshots__/demo.test.ts.snap create mode 100644 components/Slider/__test__/__snapshots__/index.test.tsx.snap create mode 100644 components/Slider/__test__/demo.test.ts create mode 100644 components/Slider/__test__/index.test.tsx create mode 100644 components/Slider/button.tsx create mode 100644 components/Slider/dots.tsx create mode 100644 components/Slider/hooks/useLegalValue.ts create mode 100644 components/Slider/index.tsx create mode 100644 components/Slider/input.tsx create mode 100644 components/Slider/interface.tsx create mode 100644 components/Slider/marks.tsx create mode 100644 components/Slider/style/index.less create mode 100644 components/Slider/style/index.ts create mode 100644 components/Slider/style/token.less create mode 100644 components/Slider/ticks.tsx create mode 100644 components/Slider/utils.ts create mode 100644 components/Space/README.en-US.md create mode 100644 components/Space/README.zh-CN.md create mode 100644 components/Space/__changelog__/index.en-US.md create mode 100644 components/Space/__changelog__/index.zh-CN.md create mode 100644 components/Space/__demo__/align.md create mode 100644 components/Space/__demo__/basic.md create mode 100644 components/Space/__demo__/size.md create mode 100644 components/Space/__demo__/split.md create mode 100644 components/Space/__demo__/vertical.md create mode 100644 components/Space/__demo__/wrap.md create mode 100644 components/Space/__template__/index.en-US.md create mode 100644 components/Space/__template__/index.zh-CN.md create mode 100644 components/Space/__test__/__snapshots__/demo.test.ts.snap create mode 100644 components/Space/__test__/__snapshots__/index.test.tsx.snap create mode 100644 components/Space/__test__/demo.test.ts create mode 100644 components/Space/__test__/index.test.tsx create mode 100644 components/Space/index.tsx create mode 100644 components/Space/interface.ts create mode 100644 components/Space/style/index.less create mode 100644 components/Space/style/index.ts create mode 100644 components/Spin/README.en-US.md create mode 100644 components/Spin/README.zh-CN.md create mode 100644 components/Spin/__changelog__/index.en-US.md create mode 100644 components/Spin/__changelog__/index.zh-CN.md create mode 100644 components/Spin/__demo__/basic.md create mode 100644 components/Spin/__demo__/custom-icon.md create mode 100644 components/Spin/__demo__/delay.md create mode 100644 components/Spin/__demo__/dot.md create mode 100644 components/Spin/__demo__/size.md create mode 100644 components/Spin/__demo__/spin-component.md create mode 100644 components/Spin/__demo__/tip.md create mode 100644 components/Spin/__template__/index.en-US.md create mode 100644 components/Spin/__template__/index.zh-CN.md create mode 100644 components/Spin/__test__/__snapshots__/demo.test.ts.snap create mode 100644 components/Spin/__test__/__snapshots__/index.test.tsx.snap create mode 100644 components/Spin/__test__/demo.test.ts create mode 100644 components/Spin/__test__/index.test.tsx create mode 100644 components/Spin/dot-loading.tsx create mode 100644 components/Spin/index.tsx create mode 100644 components/Spin/interface.ts create mode 100644 components/Spin/style/index.less create mode 100644 components/Spin/style/index.ts create mode 100644 components/Spin/style/token.less create mode 100644 components/Statistic/README.en-US.md create mode 100644 components/Statistic/README.zh-CN.md create mode 100644 components/Statistic/__changelog__/index.en-US.md create mode 100644 components/Statistic/__changelog__/index.zh-CN.md create mode 100644 components/Statistic/__demo__/basic.md create mode 100644 components/Statistic/__demo__/countUp.md create mode 100644 components/Statistic/__demo__/countdown.md create mode 100644 components/Statistic/__demo__/loading.md create mode 100644 components/Statistic/__demo__/prefix_suffix.md create mode 100644 components/Statistic/__demo__/time.md create mode 100644 components/Statistic/__template__/index.en-US.md create mode 100644 components/Statistic/__template__/index.zh-CN.md create mode 100644 components/Statistic/__test__/__snapshots__/demo.test.ts.snap create mode 100644 components/Statistic/__test__/__snapshots__/index.test.tsx.snap create mode 100644 components/Statistic/__test__/countdown.test.tsx create mode 100644 components/Statistic/__test__/demo.test.ts create mode 100644 components/Statistic/__test__/index.test.tsx create mode 100644 components/Statistic/countdown.tsx create mode 100644 components/Statistic/index.tsx create mode 100644 components/Statistic/interface.ts create mode 100644 components/Statistic/style/index.less create mode 100644 components/Statistic/style/index.ts create mode 100644 components/Statistic/style/token.less create mode 100644 components/Statistic/util.ts create mode 100644 components/Steps/README.en-US.md create mode 100644 components/Steps/README.zh-CN.md create mode 100644 components/Steps/__changelog__/index.en-US.md create mode 100644 components/Steps/__changelog__/index.zh-CN.md create mode 100644 components/Steps/__demo__/arrow-mini.md create mode 100644 components/Steps/__demo__/arrow.md create mode 100644 components/Steps/__demo__/basic.md create mode 100644 components/Steps/__demo__/change_step.md create mode 100644 components/Steps/__demo__/customDot.md create mode 100644 components/Steps/__demo__/description.md create mode 100644 components/Steps/__demo__/dot.md create mode 100644 components/Steps/__demo__/error.md create mode 100644 components/Steps/__demo__/icon.md create mode 100644 components/Steps/__demo__/label-placement.md create mode 100644 components/Steps/__demo__/lineless.md create mode 100644 components/Steps/__demo__/mini.md create mode 100644 components/Steps/__demo__/navigation.md create mode 100644 components/Steps/__demo__/onchange.md create mode 100644 components/Steps/__demo__/vertical.md create mode 100644 components/Steps/__template__/index.en-US.md create mode 100644 components/Steps/__template__/index.zh-CN.md create mode 100644 components/Steps/__test__/__snapshots__/demo.test.ts.snap create mode 100644 components/Steps/__test__/__snapshots__/index.test.tsx.snap create mode 100644 components/Steps/__test__/arrow.test.tsx create mode 100644 components/Steps/__test__/circle.test.tsx create mode 100644 components/Steps/__test__/demo.test.ts create mode 100644 components/Steps/__test__/dot.test.tsx create mode 100644 components/Steps/__test__/index.test.tsx create mode 100644 components/Steps/index.tsx create mode 100644 components/Steps/interface.ts create mode 100644 components/Steps/step.tsx create mode 100644 components/Steps/style/arrow.less create mode 100644 components/Steps/style/circle.less create mode 100644 components/Steps/style/dot.less create mode 100644 components/Steps/style/index.less create mode 100644 components/Steps/style/index.ts create mode 100644 components/Steps/style/navigation.less create mode 100644 components/Steps/style/token.less create mode 100644 components/Switch/README.en-US.md create mode 100644 components/Switch/README.zh-CN.md create mode 100644 components/Switch/__changelog__/index.zh-CN.md create mode 100644 components/Switch/__demo__/basic.md create mode 100644 components/Switch/__demo__/checked_text.md create mode 100644 components/Switch/__demo__/disabled.md create mode 100644 components/Switch/__demo__/icon.md create mode 100644 components/Switch/__demo__/loading.md create mode 100644 components/Switch/__demo__/size.md create mode 100644 components/Switch/__demo__/type.md create mode 100644 components/Switch/__template__/index.en-US.md create mode 100644 components/Switch/__template__/index.zh-CN.md create mode 100644 components/Switch/__test__/__snapshots__/demo.test.ts.snap create mode 100644 components/Switch/__test__/__snapshots__/index.test.tsx.snap create mode 100644 components/Switch/__test__/demo.test.ts create mode 100644 components/Switch/__test__/index.test.tsx create mode 100644 components/Switch/index.tsx create mode 100644 components/Switch/interface.ts create mode 100644 components/Switch/style/index.less create mode 100644 components/Switch/style/index.ts create mode 100644 components/Switch/style/token.less create mode 100644 components/Table/README.en-US.md create mode 100644 components/Table/README.zh-CN.md create mode 100644 components/Table/__changelog__/index.en-US.md create mode 100644 components/Table/__changelog__/index.zh-CN.md create mode 100644 components/Table/__demo__/attribution.md create mode 100644 components/Table/__demo__/basic.md create mode 100644 components/Table/__demo__/data-children.md create mode 100644 components/Table/__demo__/drag-handle.md create mode 100644 components/Table/__demo__/drag.md create mode 100644 components/Table/__demo__/expand-sub-table.md create mode 100644 components/Table/__demo__/expandable.md create mode 100644 components/Table/__demo__/expandprops.md create mode 100644 components/Table/__demo__/filter-dropdown.md create mode 100644 components/Table/__demo__/fixed-column.md create mode 100644 components/Table/__demo__/group-columns.md create mode 100644 components/Table/__demo__/header-sticky.md create mode 100644 components/Table/__demo__/operations.md create mode 100644 components/Table/__demo__/pagination.md create mode 100644 components/Table/__demo__/render.md create mode 100644 components/Table/__demo__/resizable.md create mode 100644 components/Table/__demo__/rowspan.md create mode 100644 components/Table/__demo__/selection.md create mode 100644 components/Table/__demo__/sorter.md create mode 100644 components/Table/__demo__/style.md create mode 100644 components/Table/__demo__/summary.md create mode 100644 components/Table/__demo__/table-edit.md create mode 100644 components/Table/__demo__/virtualized.md create mode 100644 components/Table/__template__/index.en-US.md create mode 100644 components/Table/__template__/index.zh-CN.md create mode 100644 components/Table/__test__/__snapshots__/demo.test.ts.snap create mode 100644 components/Table/__test__/__snapshots__/index.test.tsx.snap create mode 100644 components/Table/__test__/columns.test.tsx create mode 100644 components/Table/__test__/common/columns.tsx create mode 100644 components/Table/__test__/common/data.ts create mode 100644 components/Table/__test__/components.test.tsx create mode 100644 components/Table/__test__/demo.test.ts create mode 100644 components/Table/__test__/expand.test.tsx create mode 100644 components/Table/__test__/filter.test.tsx create mode 100644 components/Table/__test__/fixed-columns.test.tsx create mode 100644 components/Table/__test__/group-columns.test.tsx create mode 100644 components/Table/__test__/index.test.tsx create mode 100644 components/Table/__test__/pagination.test.tsx create mode 100644 components/Table/__test__/selection.test.tsx create mode 100644 components/Table/__test__/sorter.test.tsx create mode 100644 components/Table/__test__/summary.test.tsx create mode 100644 components/Table/__test__/virtualized.test.tsx create mode 100644 components/Table/colgroup.tsx create mode 100644 components/Table/constant.ts create mode 100644 components/Table/hooks/useColumns.tsx create mode 100644 components/Table/hooks/useComponent.tsx create mode 100644 components/Table/hooks/useExpand.tsx create mode 100644 components/Table/hooks/useRowSelection.tsx create mode 100644 components/Table/hooks/useStickyClassNames.ts create mode 100644 components/Table/hooks/useStickyOffsets.ts create mode 100644 components/Table/index.tsx create mode 100644 components/Table/interface.tsx create mode 100644 components/Table/style/filters-popup.less create mode 100644 components/Table/style/index.less create mode 100644 components/Table/style/index.ts create mode 100644 components/Table/style/token.less create mode 100644 components/Table/summary/cell.tsx create mode 100644 components/Table/summary/context.ts create mode 100644 components/Table/summary/index.tsx create mode 100644 components/Table/summary/row.tsx create mode 100644 components/Table/table.tsx create mode 100644 components/Table/tbody/index.tsx create mode 100644 components/Table/tbody/td.tsx create mode 100644 components/Table/tbody/tr.tsx create mode 100644 components/Table/tfoot/index.tsx create mode 100644 components/Table/thead/column.tsx create mode 100644 components/Table/thead/index.tsx create mode 100644 components/Table/utils.tsx create mode 100644 components/Tabs/README.en-US.md create mode 100644 components/Tabs/README.zh-CN.md create mode 100644 components/Tabs/__changelog__/index.en-US.md create mode 100644 components/Tabs/__changelog__/index.zh-CN.md create mode 100644 components/Tabs/__demo__/basic.md create mode 100644 components/Tabs/__demo__/controled.md create mode 100644 components/Tabs/__demo__/delete.md create mode 100644 components/Tabs/__demo__/drag.md create mode 100644 components/Tabs/__demo__/extra.md create mode 100644 components/Tabs/__demo__/icon.md create mode 100644 components/Tabs/__demo__/inline.md create mode 100644 components/Tabs/__demo__/position.md create mode 100644 components/Tabs/__demo__/renderTabbar.md create mode 100644 components/Tabs/__demo__/scroll.md create mode 100644 components/Tabs/__demo__/size.md create mode 100644 components/Tabs/__demo__/type.md create mode 100644 components/Tabs/__template__/index.en-US.md create mode 100644 components/Tabs/__template__/index.zh-CN.md create mode 100644 components/Tabs/__test__/__snapshots__/demo.test.ts.snap create mode 100644 components/Tabs/__test__/__snapshots__/index.test.tsx.snap create mode 100644 components/Tabs/__test__/demo.test.ts create mode 100644 components/Tabs/__test__/index.test.tsx create mode 100644 components/Tabs/__test__/lazyload.test.tsx create mode 100644 components/Tabs/hook/useDomSize.ts create mode 100644 components/Tabs/hook/useHeaderScroll.ts create mode 100644 components/Tabs/index.tsx create mode 100644 components/Tabs/interface.ts create mode 100644 components/Tabs/style/index.less create mode 100644 components/Tabs/style/index.ts create mode 100644 components/Tabs/style/token.less create mode 100644 components/Tabs/style/vertical.less create mode 100644 components/Tabs/tab-content.tsx create mode 100644 components/Tabs/tab-header/dropdown-icon.tsx create mode 100644 components/Tabs/tab-header/index.tsx create mode 100644 components/Tabs/tab-header/tab-ink.tsx create mode 100644 components/Tabs/tab-header/tab-nav-icon.tsx create mode 100644 components/Tabs/tab-header/tab-title.tsx create mode 100644 components/Tabs/tab-pane.tsx create mode 100644 components/Tabs/tabs.tsx create mode 100644 components/Tabs/utils.tsx create mode 100644 components/Tag/README.en-US.md create mode 100644 components/Tag/README.zh-CN.md create mode 100644 components/Tag/__changelog__/index.en-US.md create mode 100644 components/Tag/__changelog__/index.zh-CN.md create mode 100644 components/Tag/__demo__/active.md create mode 100644 components/Tag/__demo__/basic.md create mode 100644 components/Tag/__demo__/check.md create mode 100644 components/Tag/__demo__/close-async.md create mode 100644 components/Tag/__demo__/close.md create mode 100644 components/Tag/__demo__/color.md create mode 100644 components/Tag/__demo__/icon.md create mode 100644 components/Tag/__demo__/size.md create mode 100644 components/Tag/__template__/index.en-US.md create mode 100644 components/Tag/__template__/index.zh-CN.md create mode 100644 components/Tag/__test__/__snapshots__/demo.test.ts.snap create mode 100644 components/Tag/__test__/__snapshots__/index.test.tsx.snap create mode 100644 components/Tag/__test__/demo.test.ts create mode 100644 components/Tag/__test__/index.test.tsx create mode 100644 components/Tag/index.tsx create mode 100644 components/Tag/interface.ts create mode 100644 components/Tag/style/index.less create mode 100644 components/Tag/style/index.ts create mode 100644 components/Tag/style/token.less create mode 100644 components/TimePicker/README.en-US.md create mode 100644 components/TimePicker/README.zh-CN.md create mode 100644 components/TimePicker/__changelog__/index.en-US.md create mode 100644 components/TimePicker/__changelog__/index.zh-CN.md create mode 100644 components/TimePicker/__demo__/basic.md create mode 100644 components/TimePicker/__demo__/control.md create mode 100644 components/TimePicker/__demo__/defaultValue.md create mode 100644 components/TimePicker/__demo__/disableConfirm.md create mode 100644 components/TimePicker/__demo__/disabled.md create mode 100644 components/TimePicker/__demo__/disabledTime.md create mode 100644 components/TimePicker/__demo__/extra.md create mode 100644 components/TimePicker/__demo__/format.md create mode 100644 components/TimePicker/__demo__/rangepicker.md create mode 100644 components/TimePicker/__demo__/size.md create mode 100644 components/TimePicker/__demo__/step.md create mode 100644 components/TimePicker/__demo__/use-12-hours.md create mode 100644 components/TimePicker/__template__/index.en-US.md create mode 100644 components/TimePicker/__template__/index.zh-CN.md create mode 100644 components/TimePicker/__test__/__snapshots__/demo.test.ts.snap create mode 100644 components/TimePicker/__test__/__snapshots__/index.test.tsx.snap create mode 100644 components/TimePicker/__test__/demo.test.ts create mode 100644 components/TimePicker/__test__/index.test.tsx create mode 100644 components/TimePicker/__test__/range.test.tsx create mode 100644 components/TimePicker/index.tsx create mode 100644 components/TimePicker/interface.tsx create mode 100644 components/TimePicker/picker.tsx create mode 100644 components/TimePicker/range-picker.tsx create mode 100644 components/TimePicker/style/index.less create mode 100644 components/TimePicker/style/index.ts create mode 100644 components/TimePicker/style/token.less create mode 100644 components/TimePicker/time-column.tsx create mode 100644 components/TimePicker/time-picker.tsx create mode 100644 components/TimePicker/util.ts create mode 100644 components/Timeline/README.en-US.md create mode 100644 components/Timeline/README.zh-CN.md create mode 100644 components/Timeline/__changelog__/index.en-US.md create mode 100644 components/Timeline/__changelog__/index.zh-CN.md create mode 100644 components/Timeline/__demo__/basic.md create mode 100644 components/Timeline/__demo__/direction.md create mode 100644 components/Timeline/__demo__/dot.md create mode 100644 components/Timeline/__demo__/icon.md create mode 100644 components/Timeline/__demo__/labelPosition.md create mode 100644 components/Timeline/__demo__/mode.md create mode 100644 components/Timeline/__demo__/pending.md create mode 100644 components/Timeline/__demo__/type.md create mode 100644 components/Timeline/__demo__/vertical.md create mode 100644 components/Timeline/__template__/index.en-US.md create mode 100644 components/Timeline/__template__/index.zh-CN.md create mode 100644 components/Timeline/__test__/__snapshots__/demo.test.ts.snap create mode 100644 components/Timeline/__test__/__snapshots__/index.test.tsx.snap create mode 100644 components/Timeline/__test__/demo.test.ts create mode 100644 components/Timeline/__test__/index.test.tsx create mode 100644 components/Timeline/index.tsx create mode 100644 components/Timeline/interface.ts create mode 100644 components/Timeline/item.tsx create mode 100644 components/Timeline/style/horizontal.less create mode 100644 components/Timeline/style/index.less create mode 100644 components/Timeline/style/index.ts create mode 100644 components/Timeline/style/token.less create mode 100644 components/Timeline/timeline.tsx create mode 100644 components/Tooltip/README.en-US.md create mode 100644 components/Tooltip/README.zh-CN.md create mode 100644 components/Tooltip/__changelog__/index.en-US.md create mode 100644 components/Tooltip/__changelog__/index.zh-CN.md create mode 100644 components/Tooltip/__demo__/basic.md create mode 100644 components/Tooltip/__demo__/color.md create mode 100644 components/Tooltip/__demo__/control.md create mode 100644 components/Tooltip/__demo__/mini.md create mode 100644 components/Tooltip/__demo__/position.md create mode 100644 components/Tooltip/__template__/index.en-US.md create mode 100644 components/Tooltip/__template__/index.zh-CN.md create mode 100644 components/Tooltip/__test__/__snapshots__/demo.test.ts.snap create mode 100644 components/Tooltip/__test__/demo.test.ts create mode 100644 components/Tooltip/__test__/hideempty.test.tsx create mode 100644 components/Tooltip/__test__/index.test.tsx create mode 100644 components/Tooltip/index.tsx create mode 100644 components/Tooltip/interface.ts create mode 100644 components/Tooltip/style/index.less create mode 100644 components/Tooltip/style/index.ts create mode 100644 components/Tooltip/style/token.less create mode 100644 components/Transfer/README.en-US.md create mode 100644 components/Transfer/README.zh-CN.md create mode 100644 components/Transfer/__changelog__/index.en-US.md create mode 100644 components/Transfer/__changelog__/index.zh-CN.md create mode 100644 components/Transfer/__demo__/basic.md create mode 100644 components/Transfer/__demo__/custom-header.md create mode 100644 components/Transfer/__demo__/drag-sort.md create mode 100644 components/Transfer/__demo__/more.md create mode 100644 components/Transfer/__demo__/one-way.md create mode 100644 components/Transfer/__demo__/pagination.md create mode 100644 components/Transfer/__demo__/render.md create mode 100644 components/Transfer/__demo__/show-search.md create mode 100644 components/Transfer/__demo__/simple.md create mode 100644 components/Transfer/__demo__/with-table.md create mode 100644 components/Transfer/__demo__/with-tree.md create mode 100644 components/Transfer/__template__/index.en-US.md create mode 100644 components/Transfer/__template__/index.zh-CN.md create mode 100644 components/Transfer/__test__/__snapshots__/demo.test.ts.snap create mode 100644 components/Transfer/__test__/__snapshots__/index.test.tsx.snap create mode 100644 components/Transfer/__test__/demo.test.ts create mode 100644 components/Transfer/__test__/index.test.tsx create mode 100644 components/Transfer/index.tsx create mode 100644 components/Transfer/interface.tsx create mode 100644 components/Transfer/item.tsx create mode 100644 components/Transfer/list.tsx create mode 100644 components/Transfer/style/index.less create mode 100644 components/Transfer/style/index.ts create mode 100644 components/Transfer/style/token.less create mode 100644 components/Tree/README.en-US.md create mode 100644 components/Tree/README.zh-CN.md create mode 100644 components/Tree/__changelog__/index.en-US.md create mode 100644 components/Tree/__changelog__/index.zh-CN.md create mode 100644 components/Tree/__demo__/basic.md create mode 100644 components/Tree/__demo__/blocknode.md create mode 100644 components/Tree/__demo__/checkboxTree.md create mode 100644 components/Tree/__demo__/checkedStrategy.md create mode 100644 components/Tree/__demo__/controled.md create mode 100644 components/Tree/__demo__/drag.md create mode 100644 components/Tree/__demo__/fieldnames.md create mode 100644 components/Tree/__demo__/icon.md create mode 100644 components/Tree/__demo__/icons.md create mode 100644 components/Tree/__demo__/line.md create mode 100644 components/Tree/__demo__/loadmore.md create mode 100644 components/Tree/__demo__/multiple.md create mode 100644 components/Tree/__demo__/renderTreeNode.md create mode 100644 components/Tree/__demo__/search.md create mode 100644 components/Tree/__demo__/size.md create mode 100644 components/Tree/__demo__/treeData.md create mode 100644 components/Tree/__demo__/virtual.md create mode 100644 components/Tree/__template__/index.en-US.md create mode 100644 components/Tree/__template__/index.zh-CN.md create mode 100644 components/Tree/__test__/__snapshots__/demo.test.ts.snap create mode 100644 components/Tree/__test__/__snapshots__/index.test.tsx.snap create mode 100644 components/Tree/__test__/case.test.tsx create mode 100644 components/Tree/__test__/demo.test.ts create mode 100644 components/Tree/__test__/fieldname.test.tsx create mode 100644 components/Tree/__test__/index.test.tsx create mode 100644 components/Tree/animation.tsx create mode 100644 components/Tree/context.tsx create mode 100644 components/Tree/index.tsx create mode 100644 components/Tree/interface.ts create mode 100644 components/Tree/node-list.tsx create mode 100644 components/Tree/node.tsx create mode 100644 components/Tree/style/index.less create mode 100644 components/Tree/style/index.ts create mode 100644 components/Tree/style/token.less create mode 100644 components/Tree/util.tsx create mode 100644 components/TreeSelect/README.en-US.md create mode 100644 components/TreeSelect/README.zh-CN.md create mode 100644 components/TreeSelect/__changelog__/index.en-US.md create mode 100644 components/TreeSelect/__changelog__/index.zh-CN.md create mode 100644 components/TreeSelect/__demo__/basic.md create mode 100644 components/TreeSelect/__demo__/checkable.md create mode 100644 components/TreeSelect/__demo__/checkedStrategy.md create mode 100644 components/TreeSelect/__demo__/controled.md create mode 100644 components/TreeSelect/__demo__/dropdownRender.md create mode 100644 components/TreeSelect/__demo__/fieldnames.md create mode 100644 components/TreeSelect/__demo__/labelInvalue.md create mode 100644 components/TreeSelect/__demo__/loadmore.md create mode 100644 components/TreeSelect/__demo__/multiple.md create mode 100644 components/TreeSelect/__demo__/onSearch.md create mode 100644 components/TreeSelect/__demo__/popupVisible.md create mode 100644 components/TreeSelect/__demo__/search.md create mode 100644 components/TreeSelect/__demo__/self-input.md create mode 100644 components/TreeSelect/__demo__/size.md create mode 100644 components/TreeSelect/__demo__/treeData.md create mode 100644 components/TreeSelect/__demo__/virtual.md create mode 100644 components/TreeSelect/__template__/index.en-US.md create mode 100644 components/TreeSelect/__template__/index.zh-CN.md create mode 100644 components/TreeSelect/__test__/__snapshots__/demo.test.ts.snap create mode 100644 components/TreeSelect/__test__/demo.test.ts create mode 100644 components/TreeSelect/__test__/index.test.tsx create mode 100644 components/TreeSelect/hook/useKeyCache.ts create mode 100644 components/TreeSelect/hook/useStateValue.ts create mode 100644 components/TreeSelect/hook/useTreeData.ts create mode 100644 components/TreeSelect/index.tsx create mode 100644 components/TreeSelect/interface.ts create mode 100644 components/TreeSelect/style/index.less create mode 100644 components/TreeSelect/style/index.ts create mode 100644 components/TreeSelect/style/token.less create mode 100644 components/TreeSelect/tree-list.tsx create mode 100644 components/TreeSelect/tree-select.tsx create mode 100644 components/TreeSelect/utils.tsx create mode 100644 components/Trigger/README.en-US.md create mode 100644 components/Trigger/README.zh-CN.md create mode 100644 components/Trigger/__changelog__/index.en-US.md create mode 100644 components/Trigger/__changelog__/index.zh-CN.md create mode 100644 components/Trigger/__demo__/alignPoint.md create mode 100644 components/Trigger/__demo__/arrow.md create mode 100644 components/Trigger/__demo__/auto.md create mode 100644 components/Trigger/__demo__/basic.md create mode 100644 components/Trigger/__demo__/control.md create mode 100644 components/Trigger/__demo__/mouse.md create mode 100644 components/Trigger/__demo__/nest.md create mode 100644 components/Trigger/__demo__/popupAlign.md create mode 100644 components/Trigger/__demo__/triggers.md create mode 100644 components/Trigger/__template__/index.en-US.md create mode 100644 components/Trigger/__template__/index.zh-CN.md create mode 100644 components/Trigger/__test__/__snapshots__/demo.test.ts.snap create mode 100644 components/Trigger/__test__/case.test.tsx create mode 100644 components/Trigger/__test__/demo.test.ts create mode 100644 components/Trigger/__test__/index.test.tsx create mode 100644 components/Trigger/getPopupStyle.ts create mode 100644 components/Trigger/index.tsx create mode 100644 components/Trigger/interface.ts create mode 100644 components/Trigger/portal.tsx create mode 100644 components/Trigger/style/index.less create mode 100644 components/Trigger/style/index.ts create mode 100644 components/Trigger/style/token.less create mode 100644 components/Typography/README.en-US.md create mode 100644 components/Typography/README.zh-CN.md create mode 100644 components/Typography/__changelog__/index.en-US.md create mode 100644 components/Typography/__changelog__/index.zh-CN.md create mode 100644 components/Typography/__demo__/basic.md create mode 100644 components/Typography/__demo__/ellipsis.md create mode 100644 components/Typography/__demo__/operations.md create mode 100644 components/Typography/__demo__/paragraph.md create mode 100644 components/Typography/__demo__/text.md create mode 100644 components/Typography/__demo__/title.md create mode 100644 components/Typography/__template__/index.en-US.md create mode 100644 components/Typography/__template__/index.zh-CN.md create mode 100644 components/Typography/__test__/__snapshots__/demo.test.ts.snap create mode 100644 components/Typography/__test__/demo.test.ts create mode 100644 components/Typography/__test__/index.test.tsx create mode 100644 components/Typography/base.tsx create mode 100644 components/Typography/edit-content.tsx create mode 100644 components/Typography/index.tsx create mode 100644 components/Typography/interface.tsx create mode 100644 components/Typography/operations.tsx create mode 100644 components/Typography/paragraph.tsx create mode 100644 components/Typography/style/index.less create mode 100644 components/Typography/style/index.ts create mode 100644 components/Typography/style/token.less create mode 100644 components/Typography/text.tsx create mode 100644 components/Typography/title.tsx create mode 100644 components/Typography/typography.tsx create mode 100644 components/Typography/utils.tsx create mode 100644 components/Upload/README.en-US.md create mode 100644 components/Upload/README.zh-CN.md create mode 100644 components/Upload/__changelog__/index.en-US.md create mode 100644 components/Upload/__changelog__/index.zh-CN.md create mode 100644 components/Upload/__demo__/avatar.md create mode 100644 components/Upload/__demo__/basic.md create mode 100644 components/Upload/__demo__/beforeUpload.md create mode 100644 components/Upload/__demo__/crop.md create mode 100644 components/Upload/__demo__/customRequest.md create mode 100644 components/Upload/__demo__/directory.md create mode 100644 components/Upload/__demo__/drag.md create mode 100644 components/Upload/__demo__/icon.md create mode 100644 components/Upload/__demo__/limit.md create mode 100644 components/Upload/__demo__/manully.md create mode 100644 components/Upload/__demo__/onRemove.md create mode 100644 components/Upload/__demo__/pictureList.md create mode 100644 components/Upload/__demo__/preview.md create mode 100644 components/Upload/__demo__/progress.md create mode 100644 components/Upload/__demo__/renderUploadList.md create mode 100644 components/Upload/__demo__/trigger.md create mode 100644 components/Upload/__demo__/uploadList.md create mode 100644 components/Upload/__template__/index.en-US.md create mode 100644 components/Upload/__template__/index.zh-CN.md create mode 100644 components/Upload/__test__/__snapshots__/demo.test.ts.snap create mode 100644 components/Upload/__test__/__snapshots__/index.test.tsx.snap create mode 100644 components/Upload/__test__/apis.test.tsx create mode 100644 components/Upload/__test__/demo.test.ts create mode 100644 components/Upload/__test__/drop.test.tsx create mode 100644 components/Upload/__test__/index.test.tsx create mode 100644 components/Upload/__test__/list.test.tsx create mode 100644 components/Upload/__test__/methods.test.tsx create mode 100644 components/Upload/index.tsx create mode 100644 components/Upload/interface.tsx create mode 100644 components/Upload/list/index.tsx create mode 100644 components/Upload/list/pictureItem.tsx create mode 100644 components/Upload/list/textItem.tsx create mode 100644 components/Upload/list/uploadProgress.tsx create mode 100644 components/Upload/request.ts create mode 100644 components/Upload/style/index.less create mode 100644 components/Upload/style/index.ts create mode 100644 components/Upload/style/token.less create mode 100644 components/Upload/trigger-node.tsx create mode 100644 components/Upload/upload.tsx create mode 100644 components/Upload/uploader.tsx create mode 100644 components/_class/VirtualList/Filler.tsx create mode 100644 components/_class/VirtualList/__test__/index.test.tsx create mode 100644 components/_class/VirtualList/index.tsx create mode 100644 components/_class/VirtualList/utils/algorithmUtil.ts create mode 100644 components/_class/VirtualList/utils/itemUtil.ts create mode 100644 components/_class/icon-hover.tsx create mode 100644 components/_class/notice.tsx create mode 100644 components/_class/notification.tsx create mode 100644 components/_class/picker/input-range.tsx create mode 100644 components/_class/picker/input.tsx create mode 100644 components/_class/picker/style/index.less create mode 100644 components/_class/picker/style/token.less create mode 100644 components/_class/select-view.tsx create mode 100644 components/_util/classNames.ts create mode 100644 components/_util/clipboard.ts create mode 100644 components/_util/constant.ts create mode 100644 components/_util/dayjs.ts create mode 100644 components/_util/dom.ts create mode 100644 components/_util/getHighlightText.tsx create mode 100644 components/_util/getHotkeyHandler.ts create mode 100644 components/_util/getStringLength.ts create mode 100644 components/_util/hooks/useComputedState.ts create mode 100644 components/_util/hooks/useForceUpdate.ts create mode 100644 components/_util/hooks/useInterval.ts create mode 100644 components/_util/hooks/useIsFirstRender.ts create mode 100644 components/_util/hooks/useIsomorphicLayoutEffect.ts create mode 100644 components/_util/hooks/useMergeProps.ts create mode 100644 components/_util/hooks/useMergeValue.ts create mode 100644 components/_util/hooks/useOverflowHidden.ts create mode 100644 components/_util/hooks/usePrevious.ts create mode 100644 components/_util/hooks/useRefs.ts create mode 100644 components/_util/hooks/useStateCallback.ts create mode 100644 components/_util/hooks/useStateWithPromise.ts create mode 100644 components/_util/hooks/useUpdate.ts create mode 100644 components/_util/hooks/useWatch.ts create mode 100644 components/_util/include.ts create mode 100644 components/_util/is.ts create mode 100644 components/_util/keycode.ts create mode 100644 components/_util/mergeProps.ts create mode 100644 components/_util/mergedToString.ts create mode 100644 components/_util/omit.ts create mode 100644 components/_util/pad.ts create mode 100644 components/_util/pick.ts create mode 100644 components/_util/polyfill/object-assign.ts create mode 100644 components/_util/raf.ts create mode 100644 components/_util/resizeObserver.tsx create mode 100644 components/_util/responsiveObserve.ts create mode 100644 components/_util/scrollIntoView.ts create mode 100644 components/_util/style.ts create mode 100644 components/_util/throttleByRaf.ts create mode 100644 components/_util/type.ts create mode 100644 components/_util/warning.ts create mode 100644 components/index.tsx create mode 100644 components/locale/default.tsx create mode 100644 components/locale/en-US.tsx create mode 100644 components/locale/id-ID.tsx create mode 100644 components/locale/interface.tsx create mode 100644 components/locale/ja-JP.tsx create mode 100644 components/locale/ko-KR.tsx create mode 100644 components/locale/th-TH.tsx create mode 100644 components/locale/zh-CN.tsx create mode 100644 components/locale/zh-HK.tsx create mode 100644 components/locale/zh-TW.tsx create mode 100644 components/style/animation.less create mode 100644 components/style/animation/fade.less create mode 100644 components/style/animation/slide.less create mode 100644 components/style/animation/zoom.less create mode 100755 components/style/fonts/nunito_for_arco-bold-webfont.woff create mode 100755 components/style/fonts/nunito_for_arco-bold-webfont.woff2 create mode 100755 components/style/fonts/nunito_for_arco-extralight-webfont.woff create mode 100755 components/style/fonts/nunito_for_arco-extralight-webfont.woff2 create mode 100755 components/style/fonts/nunito_for_arco-light-webfont.woff create mode 100755 components/style/fonts/nunito_for_arco-light-webfont.woff2 create mode 100755 components/style/fonts/nunito_for_arco-regular-webfont.woff create mode 100755 components/style/fonts/nunito_for_arco-regular-webfont.woff2 create mode 100755 components/style/fonts/nunito_for_arco-semibold-webfont.woff create mode 100755 components/style/fonts/nunito_for_arco-semibold-webfont.woff2 create mode 100644 components/style/icon.less create mode 100644 components/style/index.less create mode 100644 components/style/mixin.less create mode 100644 components/style/mixins/clearfix.less create mode 100644 components/style/mixins/index.less create mode 100644 components/style/normalize.less create mode 100644 components/style/theme/color/colors.less create mode 100644 components/style/theme/color/compiled-colors.less create mode 100644 components/style/theme/color/css-variables.less create mode 100644 components/style/theme/color/getRgbStr.js create mode 100644 components/style/theme/color/palette-dark.js create mode 100644 components/style/theme/color/palette.js create mode 100644 components/style/theme/component.less create mode 100644 components/style/theme/css-variables.less create mode 100644 components/style/theme/default.less create mode 100644 components/style/theme/global.less create mode 100755 icon/_svgs/direction/outline/arrow-down.svg create mode 100755 icon/_svgs/direction/outline/arrow-fall.svg create mode 100755 icon/_svgs/direction/outline/arrow-left.svg create mode 100755 icon/_svgs/direction/outline/arrow-right.svg create mode 100755 icon/_svgs/direction/outline/arrow-rise.svg create mode 100755 icon/_svgs/direction/outline/arrow-up.svg create mode 100755 icon/_svgs/direction/outline/caret-down.svg create mode 100755 icon/_svgs/direction/outline/caret-left.svg create mode 100755 icon/_svgs/direction/outline/caret-right.svg create mode 100755 icon/_svgs/direction/outline/caret-up.svg create mode 100755 icon/_svgs/direction/outline/double-down.svg create mode 100755 icon/_svgs/direction/outline/double-left.svg create mode 100755 icon/_svgs/direction/outline/double-right.svg create mode 100755 icon/_svgs/direction/outline/double-up.svg create mode 100755 icon/_svgs/direction/outline/down-circle.svg create mode 100755 icon/_svgs/direction/outline/down.svg create mode 100755 icon/_svgs/direction/outline/drag-arrow.svg create mode 100755 icon/_svgs/direction/outline/expand.svg create mode 100755 icon/_svgs/direction/outline/left-circle.svg create mode 100755 icon/_svgs/direction/outline/left.svg create mode 100755 icon/_svgs/direction/outline/menu-fold.svg create mode 100755 icon/_svgs/direction/outline/menu-unfold.svg create mode 100755 icon/_svgs/direction/outline/right-circle.svg create mode 100755 icon/_svgs/direction/outline/right.svg create mode 100755 icon/_svgs/direction/outline/rotate-left.svg create mode 100755 icon/_svgs/direction/outline/rotate-right.svg create mode 100755 icon/_svgs/direction/outline/shrink.svg create mode 100755 icon/_svgs/direction/outline/swap.svg create mode 100755 icon/_svgs/direction/outline/to-bottom.svg create mode 100755 icon/_svgs/direction/outline/to-left.svg create mode 100755 icon/_svgs/direction/outline/to-right.svg create mode 100755 icon/_svgs/direction/outline/to-top.svg create mode 100755 icon/_svgs/direction/outline/up-circle.svg create mode 100755 icon/_svgs/direction/outline/up.svg create mode 100755 icon/_svgs/edit/outline/align-center.svg create mode 100755 icon/_svgs/edit/outline/align-left.svg create mode 100755 icon/_svgs/edit/outline/align-right.svg create mode 100644 icon/_svgs/edit/outline/attachment.svg create mode 100755 icon/_svgs/edit/outline/bg-colors.svg create mode 100755 icon/_svgs/edit/outline/bold.svg create mode 100755 icon/_svgs/edit/outline/brush.svg create mode 100755 icon/_svgs/edit/outline/copy.svg create mode 100755 icon/_svgs/edit/outline/delete.svg create mode 100755 icon/_svgs/edit/outline/edit.svg create mode 100755 icon/_svgs/edit/outline/eraser.svg create mode 100755 icon/_svgs/edit/outline/filter.svg create mode 100755 icon/_svgs/edit/outline/find-replace.svg create mode 100755 icon/_svgs/edit/outline/font-colors.svg create mode 100755 icon/_svgs/edit/outline/formula.svg create mode 100755 icon/_svgs/edit/outline/h1.svg create mode 100755 icon/_svgs/edit/outline/h2.svg create mode 100755 icon/_svgs/edit/outline/h3.svg create mode 100755 icon/_svgs/edit/outline/h4.svg create mode 100755 icon/_svgs/edit/outline/h5.svg create mode 100755 icon/_svgs/edit/outline/h6.svg create mode 100755 icon/_svgs/edit/outline/h7.svg create mode 100755 icon/_svgs/edit/outline/highlight.svg create mode 100755 icon/_svgs/edit/outline/italic.svg create mode 100755 icon/_svgs/edit/outline/line-height.svg create mode 100644 icon/_svgs/edit/outline/link.svg create mode 100755 icon/_svgs/edit/outline/oblique-line.svg create mode 100755 icon/_svgs/edit/outline/ordered-list.svg create mode 100755 icon/_svgs/edit/outline/original-size.svg create mode 100755 icon/_svgs/edit/outline/paste.svg create mode 100755 icon/_svgs/edit/outline/quote.svg create mode 100755 icon/_svgs/edit/outline/redo.svg create mode 100755 icon/_svgs/edit/outline/scissor.svg create mode 100755 icon/_svgs/edit/outline/sort-ascending.svg create mode 100755 icon/_svgs/edit/outline/sort-descending.svg create mode 100755 icon/_svgs/edit/outline/sort.svg create mode 100755 icon/_svgs/edit/outline/strikethrough.svg create mode 100755 icon/_svgs/edit/outline/underline.svg create mode 100755 icon/_svgs/edit/outline/undo.svg create mode 100755 icon/_svgs/edit/outline/unordered-list.svg create mode 100755 icon/_svgs/edit/outline/zoom-in.svg create mode 100755 icon/_svgs/edit/outline/zoom-out.svg create mode 100755 icon/_svgs/general/fill/chinese-fill.svg create mode 100755 icon/_svgs/general/fill/english-fill.svg create mode 100755 icon/_svgs/general/fill/face-frown-fill.svg create mode 100755 icon/_svgs/general/fill/face-meh-fill.svg create mode 100755 icon/_svgs/general/fill/face-smile-fill.svg create mode 100644 icon/_svgs/general/fill/moon-fill.svg create mode 100644 icon/_svgs/general/fill/pen-fill.svg create mode 100644 icon/_svgs/general/fill/sun-fill.svg create mode 100755 icon/_svgs/general/outline/apps.svg create mode 100644 icon/_svgs/general/outline/archive.svg create mode 100755 icon/_svgs/general/outline/book.svg create mode 100755 icon/_svgs/general/outline/branch.svg create mode 100755 icon/_svgs/general/outline/bug.svg create mode 100755 icon/_svgs/general/outline/bulb.svg create mode 100644 icon/_svgs/general/outline/calendar-clock.svg create mode 100755 icon/_svgs/general/outline/calendar.svg create mode 100755 icon/_svgs/general/outline/camera.svg create mode 100755 icon/_svgs/general/outline/cloud.svg create mode 100755 icon/_svgs/general/outline/command.svg create mode 100755 icon/_svgs/general/outline/common.svg create mode 100755 icon/_svgs/general/outline/compass.svg create mode 100755 icon/_svgs/general/outline/copyright.svg create mode 100755 icon/_svgs/general/outline/dashboard.svg create mode 100755 icon/_svgs/general/outline/desktop.svg create mode 100755 icon/_svgs/general/outline/dice.svg create mode 100755 icon/_svgs/general/outline/drag-dot-vertical.svg create mode 100755 icon/_svgs/general/outline/drag-dot.svg create mode 100755 icon/_svgs/general/outline/drive-file.svg create mode 100755 icon/_svgs/general/outline/ear.svg create mode 100755 icon/_svgs/general/outline/email.svg create mode 100755 icon/_svgs/general/outline/empty.svg create mode 100755 icon/_svgs/general/outline/experiment.svg create mode 100755 icon/_svgs/general/outline/file-audio.svg create mode 100755 icon/_svgs/general/outline/file-image.svg create mode 100755 icon/_svgs/general/outline/file-pdf.svg create mode 100755 icon/_svgs/general/outline/file-video.svg create mode 100755 icon/_svgs/general/outline/file.svg create mode 100755 icon/_svgs/general/outline/fire.svg create mode 100755 icon/_svgs/general/outline/folder-add.svg create mode 100755 icon/_svgs/general/outline/folder-delete.svg create mode 100755 icon/_svgs/general/outline/folder.svg create mode 100755 icon/_svgs/general/outline/gift.svg create mode 100755 icon/_svgs/general/outline/idcard.svg create mode 100644 icon/_svgs/general/outline/image-close.svg create mode 100755 icon/_svgs/general/outline/image.svg create mode 100755 icon/_svgs/general/outline/interaction.svg create mode 100755 icon/_svgs/general/outline/language.svg create mode 100755 icon/_svgs/general/outline/layout.svg create mode 100755 icon/_svgs/general/outline/loading.svg create mode 100755 icon/_svgs/general/outline/location.svg create mode 100644 icon/_svgs/general/outline/lock.svg create mode 100755 icon/_svgs/general/outline/loop.svg create mode 100755 icon/_svgs/general/outline/man.svg create mode 100755 icon/_svgs/general/outline/menu.svg create mode 100755 icon/_svgs/general/outline/mind-mapping.svg create mode 100755 icon/_svgs/general/outline/mobile.svg create mode 100755 icon/_svgs/general/outline/moon.svg create mode 100755 icon/_svgs/general/outline/mosaic.svg create mode 100755 icon/_svgs/general/outline/nav.svg create mode 100755 icon/_svgs/general/outline/notification-close.svg create mode 100755 icon/_svgs/general/outline/notification.svg create mode 100644 icon/_svgs/general/outline/palette.svg create mode 100755 icon/_svgs/general/outline/pen.svg create mode 100755 icon/_svgs/general/outline/phone.svg create mode 100755 icon/_svgs/general/outline/printer.svg create mode 100755 icon/_svgs/general/outline/public.svg create mode 100755 icon/_svgs/general/outline/pushpin.svg create mode 100755 icon/_svgs/general/outline/qrcode.svg create mode 100755 icon/_svgs/general/outline/robot-add.svg create mode 100755 icon/_svgs/general/outline/robot.svg create mode 100755 icon/_svgs/general/outline/safe.svg create mode 100755 icon/_svgs/general/outline/schedule.svg create mode 100755 icon/_svgs/general/outline/shake.svg create mode 100755 icon/_svgs/general/outline/skin.svg create mode 100755 icon/_svgs/general/outline/stamp.svg create mode 100755 icon/_svgs/general/outline/storage.svg create mode 100755 icon/_svgs/general/outline/subscribe-add.svg create mode 100755 icon/_svgs/general/outline/subscribe.svg create mode 100755 icon/_svgs/general/outline/subscribed.svg create mode 100755 icon/_svgs/general/outline/sun.svg create mode 100755 icon/_svgs/general/outline/tag.svg create mode 100755 icon/_svgs/general/outline/tags.svg create mode 100755 icon/_svgs/general/outline/thunderbolt.svg create mode 100755 icon/_svgs/general/outline/tool.svg create mode 100755 icon/_svgs/general/outline/trophy.svg create mode 100644 icon/_svgs/general/outline/unlock.svg create mode 100755 icon/_svgs/general/outline/user-add.svg create mode 100755 icon/_svgs/general/outline/user-group.svg create mode 100755 icon/_svgs/general/outline/user.svg create mode 100755 icon/_svgs/general/outline/video-camera.svg create mode 100755 icon/_svgs/general/outline/wifi.svg create mode 100755 icon/_svgs/general/outline/woman.svg create mode 100644 icon/_svgs/interactive-button/fill/heart-fill.svg create mode 100644 icon/_svgs/interactive-button/fill/star-fill.svg create mode 100644 icon/_svgs/interactive-button/fill/thumb-down-fill.svg create mode 100644 icon/_svgs/interactive-button/fill/thumb-up-fill.svg create mode 100755 icon/_svgs/interactive-button/outline/at.svg create mode 100755 icon/_svgs/interactive-button/outline/cloud-download.svg create mode 100755 icon/_svgs/interactive-button/outline/code-block.svg create mode 100755 icon/_svgs/interactive-button/outline/code-square.svg create mode 100755 icon/_svgs/interactive-button/outline/code.svg create mode 100755 icon/_svgs/interactive-button/outline/customer-service.svg create mode 100755 icon/_svgs/interactive-button/outline/download.svg create mode 100755 icon/_svgs/interactive-button/outline/export.svg create mode 100755 icon/_svgs/interactive-button/outline/eye-invisible.svg create mode 100755 icon/_svgs/interactive-button/outline/eye.svg create mode 100755 icon/_svgs/interactive-button/outline/heart.svg create mode 100755 icon/_svgs/interactive-button/outline/history.svg create mode 100755 icon/_svgs/interactive-button/outline/home.svg create mode 100755 icon/_svgs/interactive-button/outline/import.svg create mode 100644 icon/_svgs/interactive-button/outline/launch.svg create mode 100755 icon/_svgs/interactive-button/outline/list.svg create mode 100755 icon/_svgs/interactive-button/outline/message-banned.svg create mode 100755 icon/_svgs/interactive-button/outline/message.svg create mode 100755 icon/_svgs/interactive-button/outline/more-vertical.svg create mode 100755 icon/_svgs/interactive-button/outline/more.svg create mode 100755 icon/_svgs/interactive-button/outline/poweroff.svg create mode 100755 icon/_svgs/interactive-button/outline/refresh.svg create mode 100755 icon/_svgs/interactive-button/outline/reply.svg create mode 100755 icon/_svgs/interactive-button/outline/save.svg create mode 100755 icon/_svgs/interactive-button/outline/scan.svg create mode 100755 icon/_svgs/interactive-button/outline/search.svg create mode 100755 icon/_svgs/interactive-button/outline/select-all.svg create mode 100755 icon/_svgs/interactive-button/outline/send.svg create mode 100755 icon/_svgs/interactive-button/outline/settings.svg create mode 100755 icon/_svgs/interactive-button/outline/share-alt.svg create mode 100755 icon/_svgs/interactive-button/outline/share-external.svg create mode 100755 icon/_svgs/interactive-button/outline/share-internal.svg create mode 100755 icon/_svgs/interactive-button/outline/star.svg create mode 100644 icon/_svgs/interactive-button/outline/sync.svg create mode 100755 icon/_svgs/interactive-button/outline/thumb-down.svg create mode 100755 icon/_svgs/interactive-button/outline/thumb-up.svg create mode 100755 icon/_svgs/interactive-button/outline/translate.svg create mode 100755 icon/_svgs/interactive-button/outline/upload.svg create mode 100755 icon/_svgs/interactive-button/outline/voice.svg create mode 100644 icon/_svgs/logo/color/bytedance-color.svg create mode 100644 icon/_svgs/logo/color/lark-color.svg create mode 100644 icon/_svgs/logo/color/tiktok-color.svg create mode 100644 icon/_svgs/logo/color/xigua-color.svg create mode 100644 icon/_svgs/logo/fill/faceBook-circle-fill.svg create mode 100644 icon/_svgs/logo/fill/facebook-square-fill.svg create mode 100644 icon/_svgs/logo/fill/google-circle-fill.svg create mode 100644 icon/_svgs/logo/fill/qq-circle-fill.svg create mode 100644 icon/_svgs/logo/fill/twitter-circle-fill.svg create mode 100644 icon/_svgs/logo/fill/weibo-circle-fill.svg create mode 100644 icon/_svgs/logo/outline/alipay-circle.svg create mode 100644 icon/_svgs/logo/outline/code-sandbox.svg create mode 100644 icon/_svgs/logo/outline/codepen.svg create mode 100644 icon/_svgs/logo/outline/facebook.svg create mode 100644 icon/_svgs/logo/outline/github.svg create mode 100644 icon/_svgs/logo/outline/gitlab.svg create mode 100644 icon/_svgs/logo/outline/google.svg create mode 100644 icon/_svgs/logo/outline/qq-zone.svg create mode 100644 icon/_svgs/logo/outline/qq.svg create mode 100644 icon/_svgs/logo/outline/twitter.svg create mode 100644 icon/_svgs/logo/outline/wechat.svg create mode 100644 icon/_svgs/logo/outline/wechatpay.svg create mode 100644 icon/_svgs/logo/outline/weibo.svg create mode 100644 icon/_svgs/media/fill/mute-fill.svg create mode 100755 icon/_svgs/media/fill/pause-circle-fill.svg create mode 100644 icon/_svgs/media/fill/play-arrow-fill.svg create mode 100755 icon/_svgs/media/fill/play-circle-fill.svg create mode 100644 icon/_svgs/media/fill/skip-next-fill.svg create mode 100644 icon/_svgs/media/fill/skip-previous-fill.svg create mode 100644 icon/_svgs/media/fill/sound-fill.svg create mode 100755 icon/_svgs/media/outline/backward.svg create mode 100755 icon/_svgs/media/outline/forward.svg create mode 100755 icon/_svgs/media/outline/fullscreen-exit.svg create mode 100755 icon/_svgs/media/outline/fullscreen.svg create mode 100755 icon/_svgs/media/outline/live-broadcast.svg create mode 100755 icon/_svgs/media/outline/music.svg create mode 100755 icon/_svgs/media/outline/mute.svg create mode 100755 icon/_svgs/media/outline/pause-circle.svg create mode 100755 icon/_svgs/media/outline/pause.svg create mode 100755 icon/_svgs/media/outline/play-arrow.svg create mode 100755 icon/_svgs/media/outline/play-circle.svg create mode 100755 icon/_svgs/media/outline/record-stop.svg create mode 100755 icon/_svgs/media/outline/record.svg create mode 100755 icon/_svgs/media/outline/skip-next.svg create mode 100755 icon/_svgs/media/outline/skip-previous.svg create mode 100755 icon/_svgs/media/outline/sound.svg create mode 100755 icon/_svgs/tips/fill/check-circle-fill.svg create mode 100755 icon/_svgs/tips/fill/close-circle-fill.svg create mode 100755 icon/_svgs/tips/fill/exclamation-circle-fill.svg create mode 100755 icon/_svgs/tips/fill/exclamation-polygon-fill.svg create mode 100755 icon/_svgs/tips/fill/info-circle-fill.svg create mode 100755 icon/_svgs/tips/fill/minus-circle-fill.svg create mode 100755 icon/_svgs/tips/fill/plus-circle-fill.svg create mode 100755 icon/_svgs/tips/fill/question-circle-fill.svg create mode 100755 icon/_svgs/tips/outline/check-circle.svg create mode 100755 icon/_svgs/tips/outline/check-square.svg create mode 100755 icon/_svgs/tips/outline/check.svg create mode 100755 icon/_svgs/tips/outline/clock-circle.svg create mode 100755 icon/_svgs/tips/outline/close-circle.svg create mode 100755 icon/_svgs/tips/outline/close.svg create mode 100755 icon/_svgs/tips/outline/exclamation-circle.svg create mode 100755 icon/_svgs/tips/outline/exclamation.svg create mode 100755 icon/_svgs/tips/outline/info-circle.svg create mode 100755 icon/_svgs/tips/outline/info.svg create mode 100755 icon/_svgs/tips/outline/minus-circle.svg create mode 100755 icon/_svgs/tips/outline/minus.svg create mode 100755 icon/_svgs/tips/outline/plus-circle.svg create mode 100755 icon/_svgs/tips/outline/plus.svg create mode 100755 icon/_svgs/tips/outline/question-circle.svg create mode 100755 icon/_svgs/tips/outline/question.svg create mode 100755 icon/_svgs/tips/outline/stop.svg create mode 100644 icon/build/demo.nunjucks.jsx create mode 100644 icon/build/genDemo.js create mode 100644 icon/build/genJson.js create mode 100644 icon/build/generate.js create mode 100644 icon/build/getSvgData.js create mode 100644 icon/build/icon.template.nunjucks create mode 100644 icon/build/maps.js create mode 100644 icon/build/new.js create mode 100644 icon/build/out-of-date-maps.js create mode 100644 icon/demo.js create mode 100644 icon/icons.json create mode 100644 icon/index.d.ts create mode 100644 icon/index.es.js create mode 100644 icon/index.js create mode 100644 icon/package.json create mode 100644 package.json create mode 100644 scm_build.sh create mode 100644 scripts/compileColors.js create mode 100644 scripts/css-variables.js create mode 100755 scripts/init.sh create mode 100644 scripts/jest.config.js create mode 100644 scripts/replace-version-in-html.js create mode 100644 site/docs/changelog.common.en-US.md create mode 100644 site/docs/changelog.common.zh-CN.md create mode 100644 site/docs/designlab/guideline.en-US.md create mode 100644 site/docs/designlab/guideline.zh-CN.md create mode 100644 site/docs/designlab/partial-dark.en-US.md create mode 100644 site/docs/designlab/partial-dark.zh-CN.md create mode 100644 site/docs/designlab/use-theme-package.en-US.md create mode 100644 site/docs/designlab/use-theme-package.zh-CN.md create mode 100644 site/docs/i18n.en-US.md create mode 100644 site/docs/i18n.zh-CN.md create mode 100644 site/docs/material/advanced.command.en-US.md create mode 100644 site/docs/material/advanced.command.zn-CN.md create mode 100644 site/docs/material/advanced.team-site.en-US.md create mode 100644 site/docs/material/advanced.team-site.zh-CN.md create mode 100644 site/docs/material/advanced.template-develop.en-US.md create mode 100644 site/docs/material/advanced.template-develop.zh-CN.md create mode 100644 site/docs/material/api.group.en-US.md create mode 100644 site/docs/material/api.group.zh-CN.md create mode 100644 site/docs/material/api.material.en-US.md create mode 100644 site/docs/material/api.material.zh-CN.md create mode 100644 site/docs/material/develop.build.en-US.md create mode 100644 site/docs/material/develop.build.zh-CN.md create mode 100644 site/docs/material/develop.docgen.en-US.md create mode 100644 site/docs/material/develop.docgen.zh-CN.md create mode 100644 site/docs/material/develop.publish.en-US.md create mode 100644 site/docs/material/develop.publish.zh-CN.md create mode 100644 site/docs/material/develop.test.en-US.md create mode 100644 site/docs/material/develop.test.zh-CN.md create mode 100644 site/docs/material/init.config.en-US.md create mode 100644 site/docs/material/init.config.zh-CN.md create mode 100644 site/docs/material/init.template.en-US.md create mode 100644 site/docs/material/init.template.zh-CN.md create mode 100644 site/docs/material/start.guide.en-US.md create mode 100644 site/docs/material/start.guide.zh-CN.md create mode 100644 site/docs/material/start.qa.en-US.md create mode 100644 site/docs/material/start.qa.zh-CN.md create mode 100644 site/docs/migrate_to_v2.en-US.md create mode 100644 site/docs/migrate_to_v2.zh-CN.md create mode 100644 site/docs/pro/build.en-US.md create mode 100644 site/docs/pro/build.zh-CN.md create mode 100644 site/docs/pro/directory.en-US.md create mode 100644 site/docs/pro/directory.zh-CN.md create mode 100644 site/docs/pro/i18n.en-US.md create mode 100644 site/docs/pro/i18n.zh-CN.md create mode 100644 site/docs/pro/layout.en-US.md create mode 100644 site/docs/pro/layout.zh-CN.md create mode 100644 site/docs/pro/mock.en-US.md create mode 100644 site/docs/pro/mock.zh-CN.md create mode 100644 site/docs/pro/npm-scripts.en-US.md create mode 100644 site/docs/pro/npm-scripts.zh-CN.md create mode 100644 site/docs/pro/routes-and-menu.en-US.md create mode 100644 site/docs/pro/routes-and-menu.zh-CN.md create mode 100644 site/docs/pro/start.en-US.md create mode 100644 site/docs/pro/start.zh-CN.md create mode 100644 site/docs/pro/state-management.en-US.md create mode 100644 site/docs/pro/state-management.zh-CN.md create mode 100644 site/docs/pro/webpack-configuration.en-US.md create mode 100644 site/docs/pro/webpack-configuration.zh-CN.md create mode 100644 site/docs/question.en-US.md create mode 100644 site/docs/question.zh-CN.md create mode 100644 site/docs/start.en-US.md create mode 100644 site/docs/start.zh-CN.md create mode 100644 site/docs/theme.en-US.md create mode 100644 site/docs/theme.zh-CN.md create mode 100644 site/docs/version_v2.en-US.md create mode 100644 site/docs/version_v2.zh-CN.md create mode 100644 site/docs_spec/components/alert.en-US.md create mode 100644 site/docs_spec/components/alert.zh-CN.md create mode 100644 site/docs_spec/components/avatar.en-US.md create mode 100644 site/docs_spec/components/avatar.zh-CN.md create mode 100644 site/docs_spec/components/badge.en-US.md create mode 100644 site/docs_spec/components/badge.zh-CN.md create mode 100644 site/docs_spec/components/breadcrumb.en-US.md create mode 100644 site/docs_spec/components/breadcrumb.zh-CN.md create mode 100644 site/docs_spec/components/cascader.en-US.md create mode 100644 site/docs_spec/components/cascader.zh-CN.md create mode 100644 site/docs_spec/components/checkbox.en-US.md create mode 100644 site/docs_spec/components/checkbox.zh-CN.md create mode 100644 site/docs_spec/components/comment.en-US.md create mode 100644 site/docs_spec/components/comment.zh-CN.md create mode 100644 site/docs_spec/components/config-provider.en-US.md create mode 100644 site/docs_spec/components/config-provider.zh-CN.md create mode 100644 site/docs_spec/components/descriptions.en-US.md create mode 100644 site/docs_spec/components/descriptions.zh-CN.md create mode 100644 site/docs_spec/components/drawer.en-US.md create mode 100644 site/docs_spec/components/drawer.zh-CN.md create mode 100644 site/docs_spec/components/dropdown.en-US.md create mode 100644 site/docs_spec/components/dropdown.zh-CN.md create mode 100644 site/docs_spec/components/empty.en-US.md create mode 100644 site/docs_spec/components/empty.zh-CN.md create mode 100644 site/docs_spec/components/grid.en-US.md create mode 100644 site/docs_spec/components/grid.zh-CN.md create mode 100644 site/docs_spec/components/input.en-US.md create mode 100644 site/docs_spec/components/input.zh-CN.md create mode 100644 site/docs_spec/components/layout.en-US.md create mode 100644 site/docs_spec/components/layout.zh-CN.md create mode 100644 site/docs_spec/components/link.en-US.md create mode 100644 site/docs_spec/components/link.zh-CN.md create mode 100644 site/docs_spec/components/list.en-US.md create mode 100644 site/docs_spec/components/list.zh-CN.md create mode 100644 site/docs_spec/components/menu.en-US.md create mode 100644 site/docs_spec/components/menu.zh-CN.md create mode 100644 site/docs_spec/components/message.en-US.md create mode 100644 site/docs_spec/components/message.zh-CN.md create mode 100644 site/docs_spec/components/modal.en-US.md create mode 100644 site/docs_spec/components/modal.zh-CN.md create mode 100644 site/docs_spec/components/notification.en-US.md create mode 100644 site/docs_spec/components/notification.zh-CN.md create mode 100644 site/docs_spec/components/popconfirm.en-US.md create mode 100644 site/docs_spec/components/popconfirm.zh-CN.md create mode 100644 site/docs_spec/components/popover.en-US.md create mode 100644 site/docs_spec/components/popover.zh-CN.md create mode 100644 site/docs_spec/components/progress.en-US.md create mode 100644 site/docs_spec/components/progress.zh-CN.md create mode 100644 site/docs_spec/components/radio.en-US.md create mode 100644 site/docs_spec/components/radio.zh-CN.md create mode 100644 site/docs_spec/components/select.en-US.md create mode 100644 site/docs_spec/components/select.zh-CN.md create mode 100644 site/docs_spec/components/skeleton.en-US.md create mode 100644 site/docs_spec/components/skeleton.zh-CN.md create mode 100644 site/docs_spec/components/space.en-US.md create mode 100644 site/docs_spec/components/space.zh-CN.md create mode 100644 site/docs_spec/components/table.en-US.md create mode 100644 site/docs_spec/components/table.zh-CN.md create mode 100644 site/docs_spec/components/tabs.en-US.md create mode 100644 site/docs_spec/components/tabs.zh-CN.md create mode 100644 site/docs_spec/components/tooltip.en-US.md create mode 100644 site/docs_spec/components/tooltip.zh-CN.md create mode 100644 site/docs_spec/components/transfer.en-US.md create mode 100644 site/docs_spec/components/transfer.zh-CN.md create mode 100644 site/docs_spec/components/typography.en-US.md create mode 100644 site/docs_spec/components/typography.zh-CN.md create mode 100644 site/docs_spec/components/upload.en-US.md create mode 100644 site/docs_spec/components/upload.zh-CN.md create mode 100644 site/docs_spec/introduce.en-US.md create mode 100644 site/docs_spec/introduce.zh-CN.md create mode 100644 site/docs_spec/philosophy.en-US.md create mode 100644 site/docs_spec/philosophy.zh-CN.md create mode 100644 site/docs_spec/style-guideline.en-US.md create mode 100644 site/docs_spec/style-guideline.zh-CN.md create mode 100644 site/docs_spec/values-of-arcodesign.en-US.md create mode 100644 site/docs_spec/values-of-arcodesign.zh-CN.md create mode 100644 site/package.json create mode 100644 site/public/index.ejs create mode 100644 site/src/App.js create mode 100644 site/src/assets/arco-logo.svg create mode 100755 site/src/assets/logo/cover1.png create mode 100755 site/src/assets/logo/cover2.png create mode 100755 site/src/assets/logo/cover3.png create mode 100644 site/src/assets/logo/logo_ArcoPro.svg create mode 100644 site/src/assets/logo/logo_DesignLab.svg create mode 100644 site/src/assets/logo/logo_IconBox.svg create mode 100644 site/src/assets/overview/Affix-dark.svg create mode 100644 site/src/assets/overview/Affix.svg create mode 100644 site/src/assets/overview/Alert-dark.svg create mode 100644 site/src/assets/overview/Alert.svg create mode 100644 site/src/assets/overview/Anchor-dark.svg create mode 100644 site/src/assets/overview/Anchor.svg create mode 100644 site/src/assets/overview/AutoComplete-dark.svg create mode 100644 site/src/assets/overview/AutoComplete.svg create mode 100644 site/src/assets/overview/Avatar-dark.svg create mode 100644 site/src/assets/overview/Avatar.svg create mode 100644 site/src/assets/overview/BackTop-dark.svg create mode 100644 site/src/assets/overview/BackTop.svg create mode 100644 site/src/assets/overview/Badge-dark.svg create mode 100644 site/src/assets/overview/Badge.svg create mode 100644 site/src/assets/overview/Breadcrumb-dark.svg create mode 100644 site/src/assets/overview/Breadcrumb.svg create mode 100644 site/src/assets/overview/Button-dark.svg create mode 100644 site/src/assets/overview/Button.svg create mode 100644 site/src/assets/overview/Calendar-dark.svg create mode 100644 site/src/assets/overview/Calendar.svg create mode 100644 site/src/assets/overview/Card-dark.svg create mode 100644 site/src/assets/overview/Card.svg create mode 100644 site/src/assets/overview/Carousel-dark.svg create mode 100644 site/src/assets/overview/Carousel.svg create mode 100644 site/src/assets/overview/Cascader-dark.svg create mode 100644 site/src/assets/overview/Cascader.svg create mode 100644 site/src/assets/overview/Checkbox-dark.svg create mode 100644 site/src/assets/overview/Checkbox.svg create mode 100644 site/src/assets/overview/Collapse-dark.svg create mode 100644 site/src/assets/overview/Collapse.svg create mode 100644 site/src/assets/overview/Comment-dark.svg create mode 100644 site/src/assets/overview/Comment.svg create mode 100644 site/src/assets/overview/ConfigProvider-dark.svg create mode 100644 site/src/assets/overview/ConfigProvider.svg create mode 100644 site/src/assets/overview/DatePicker-dark.svg create mode 100644 site/src/assets/overview/DatePicker.svg create mode 100644 site/src/assets/overview/Descriptions-dark.svg create mode 100644 site/src/assets/overview/Descriptions.svg create mode 100644 site/src/assets/overview/Divider-dark.svg create mode 100644 site/src/assets/overview/Divider.svg create mode 100644 site/src/assets/overview/Drawer-dark.svg create mode 100644 site/src/assets/overview/Drawer.svg create mode 100644 site/src/assets/overview/Dropdown-dark.svg create mode 100644 site/src/assets/overview/Dropdown.svg create mode 100644 site/src/assets/overview/Empty-dark.svg create mode 100644 site/src/assets/overview/Empty.svg create mode 100644 site/src/assets/overview/Form-dark.svg create mode 100644 site/src/assets/overview/Form.svg create mode 100644 site/src/assets/overview/Grid-dark.svg create mode 100644 site/src/assets/overview/Grid.svg create mode 100644 site/src/assets/overview/Icon-dark.svg create mode 100644 site/src/assets/overview/Icon.svg create mode 100644 site/src/assets/overview/Image-dark.svg create mode 100644 site/src/assets/overview/Image.svg create mode 100644 site/src/assets/overview/Input-dark.svg create mode 100644 site/src/assets/overview/Input.svg create mode 100644 site/src/assets/overview/InputNumber-dark.svg create mode 100644 site/src/assets/overview/InputNumber.svg create mode 100644 site/src/assets/overview/Layout-dark.svg create mode 100644 site/src/assets/overview/Layout.svg create mode 100644 site/src/assets/overview/Link-dark.svg create mode 100644 site/src/assets/overview/Link.svg create mode 100644 site/src/assets/overview/List-dark.svg create mode 100644 site/src/assets/overview/List.svg create mode 100644 site/src/assets/overview/Mentions-dark.svg create mode 100644 site/src/assets/overview/Mentions.svg create mode 100644 site/src/assets/overview/Menu-dark.svg create mode 100644 site/src/assets/overview/Menu.svg create mode 100644 site/src/assets/overview/Message-dark.svg create mode 100644 site/src/assets/overview/Message.svg create mode 100644 site/src/assets/overview/Modal-dark.svg create mode 100644 site/src/assets/overview/Modal.svg create mode 100644 site/src/assets/overview/Notification-dark.svg create mode 100644 site/src/assets/overview/Notification.svg create mode 100644 site/src/assets/overview/PageHeader-dark.svg create mode 100644 site/src/assets/overview/PageHeader.svg create mode 100644 site/src/assets/overview/Pagination-dark.svg create mode 100644 site/src/assets/overview/Pagination.svg create mode 100644 site/src/assets/overview/Popconfirm-dark.svg create mode 100644 site/src/assets/overview/Popconfirm.svg create mode 100644 site/src/assets/overview/Popover-dark.svg create mode 100644 site/src/assets/overview/Popover.svg create mode 100644 site/src/assets/overview/Progress-dark.svg create mode 100644 site/src/assets/overview/Progress.svg create mode 100644 site/src/assets/overview/Radio-dark.svg create mode 100644 site/src/assets/overview/Radio.svg create mode 100644 site/src/assets/overview/Rate-dark.svg create mode 100644 site/src/assets/overview/Rate.svg create mode 100644 site/src/assets/overview/ResizeBox-dark.svg create mode 100644 site/src/assets/overview/ResizeBox.svg create mode 100644 site/src/assets/overview/Result-dark.svg create mode 100644 site/src/assets/overview/Result.svg create mode 100644 site/src/assets/overview/Select-dark.svg create mode 100644 site/src/assets/overview/Select.svg create mode 100644 site/src/assets/overview/Skeleton-dark.svg create mode 100644 site/src/assets/overview/Skeleton.svg create mode 100644 site/src/assets/overview/Slider-dark.svg create mode 100644 site/src/assets/overview/Slider.svg create mode 100644 site/src/assets/overview/Space-dark.svg create mode 100644 site/src/assets/overview/Space.svg create mode 100644 site/src/assets/overview/Spin-dark.svg create mode 100644 site/src/assets/overview/Spin.svg create mode 100644 site/src/assets/overview/Statistic-dark.svg create mode 100644 site/src/assets/overview/Statistic.svg create mode 100644 site/src/assets/overview/Steps-dark.svg create mode 100644 site/src/assets/overview/Steps.svg create mode 100644 site/src/assets/overview/Switch-dark.svg create mode 100644 site/src/assets/overview/Switch.svg create mode 100644 site/src/assets/overview/Table-dark.svg create mode 100644 site/src/assets/overview/Table.svg create mode 100644 site/src/assets/overview/Tabs-dark.svg create mode 100644 site/src/assets/overview/Tabs.svg create mode 100644 site/src/assets/overview/Tag-dark.svg create mode 100644 site/src/assets/overview/Tag.svg create mode 100644 site/src/assets/overview/TimePicker-dark.svg create mode 100644 site/src/assets/overview/TimePicker.svg create mode 100644 site/src/assets/overview/Timeline-dark.svg create mode 100644 site/src/assets/overview/Timeline.svg create mode 100644 site/src/assets/overview/Tooltip-dark.svg create mode 100644 site/src/assets/overview/Tooltip.svg create mode 100644 site/src/assets/overview/Transfer-dark.svg create mode 100644 site/src/assets/overview/Transfer.svg create mode 100644 site/src/assets/overview/Tree-dark.svg create mode 100644 site/src/assets/overview/Tree.svg create mode 100644 site/src/assets/overview/TreeSelect-dark.svg create mode 100644 site/src/assets/overview/TreeSelect.svg create mode 100644 site/src/assets/overview/Trigger-dark.svg create mode 100644 site/src/assets/overview/Trigger.svg create mode 100644 site/src/assets/overview/Typography-dark.svg create mode 100644 site/src/assets/overview/Typography.svg create mode 100644 site/src/assets/overview/Upload-dark.svg create mode 100644 site/src/assets/overview/Upload.svg create mode 100644 site/src/assets/showcase/byted-effects-black.svg create mode 100644 site/src/assets/showcase/byted-effects.svg create mode 100644 site/src/assets/showcase/feilian-black.svg create mode 100644 site/src/assets/showcase/feilian.svg create mode 100644 site/src/assets/showcase/logo_DesignLab.svg create mode 100644 site/src/assets/showcase/starry-black.svg create mode 100644 site/src/assets/showcase/starry.svg create mode 100644 site/src/assets/showcase/toutiao-black.svg create mode 100644 site/src/assets/showcase/toutiao.svg create mode 100644 site/src/assets/showcase/volc-engine-black.svg create mode 100644 site/src/assets/showcase/volc-engine.svg create mode 100644 site/src/assets/showcase/volc-live-black.svg create mode 100644 site/src/assets/showcase/volc-live.svg create mode 100644 site/src/assets/showcase/volc-tanslate-black.svg create mode 100644 site/src/assets/showcase/volc-translate.svg create mode 100644 site/src/assets/showcase/volc-translive-black.svg create mode 100644 site/src/assets/showcase/volc-translive.svg create mode 100644 site/src/context.js create mode 100644 site/src/declaration.d.ts create mode 100644 site/src/getRoutes.js create mode 100644 site/src/hooks/useNavbarBorderStyle.ts create mode 100644 site/src/hooks/useShowCase.tsx create mode 100644 site/src/hooks/useTheme.ts create mode 100644 site/src/index-en.js create mode 100644 site/src/index.js create mode 100644 site/src/locale/en.js create mode 100644 site/src/locale/zh.js create mode 100644 site/src/page.js create mode 100644 site/src/pages/404/index.js create mode 100644 site/src/pages/changelog/v2.js create mode 100644 site/src/pages/customer/assets/banner/banner-slogan.svg create mode 100644 site/src/pages/customer/assets/banner/circle.svg create mode 100644 site/src/pages/customer/assets/banner/dongchedi.svg create mode 100644 site/src/pages/customer/assets/banner/fanqie-small.svg create mode 100644 site/src/pages/customer/assets/banner/fanqie.svg create mode 100644 site/src/pages/customer/assets/banner/vcloud.svg create mode 100644 site/src/pages/customer/assets/banner/xigua.svg create mode 100644 site/src/pages/customer/assets/banner/yinqin.svg create mode 100644 site/src/pages/customer/index.less create mode 100644 site/src/pages/customer/index.tsx create mode 100644 site/src/pages/customer/locale/en-US.ts create mode 100644 site/src/pages/customer/locale/zh-CN.ts create mode 100644 site/src/pages/customer/sections/Banner/iconWall.tsx create mode 100644 site/src/pages/customer/sections/Banner/index.tsx create mode 100644 site/src/pages/customer/sections/Banner/locale/en-US.ts create mode 100644 site/src/pages/customer/sections/Banner/locale/zh-CN.ts create mode 100644 site/src/pages/customer/sections/Banner/style/iconWall.module.less create mode 100644 site/src/pages/customer/sections/Banner/style/index.module.less create mode 100644 site/src/pages/customer/sections/Banner/style/text.module.less create mode 100644 site/src/pages/customer/sections/Banner/text.tsx create mode 100644 site/src/pages/customer/sections/Customers/anchor.tsx create mode 100644 site/src/pages/customer/sections/Customers/case.tsx create mode 100644 site/src/pages/customer/sections/Customers/index.tsx create mode 100644 site/src/pages/customer/sections/Customers/locale/en-US.ts create mode 100644 site/src/pages/customer/sections/Customers/locale/zh-CN.ts create mode 100644 site/src/pages/customer/sections/Customers/styles/anchor.module.less create mode 100644 site/src/pages/customer/sections/Customers/styles/case.module.less create mode 100644 site/src/pages/customer/sections/Customers/styles/index.module.less create mode 100644 site/src/pages/dark/index.js create mode 100644 site/src/pages/dark/md/header.en-US.md create mode 100644 site/src/pages/dark/md/header.zh-CN.md create mode 100644 site/src/pages/dark/style.less create mode 100644 site/src/pages/home/assets/arco_a.svg create mode 100644 site/src/pages/home/assets/arco_c.svg create mode 100644 site/src/pages/home/assets/arco_o.svg create mode 100644 site/src/pages/home/assets/arco_r.svg create mode 100644 site/src/pages/home/assets/banner/hero-banner-1.png create mode 100644 site/src/pages/home/assets/banner/hero-banner-2.png create mode 100644 site/src/pages/home/assets/banner/hero-banner-3.png create mode 100644 site/src/pages/home/assets/banner/ic_ball.svg create mode 100644 site/src/pages/home/assets/banner/ic_code.svg create mode 100644 site/src/pages/home/assets/banner/ic_font.svg create mode 100644 site/src/pages/home/assets/banner/ic_message.svg create mode 100644 site/src/pages/home/assets/banner/logo.svg create mode 100644 site/src/pages/home/assets/banner/logo_ArcoMaterial_w.svg create mode 100644 site/src/pages/home/assets/banner/logo_ArcoPro_w.svg create mode 100644 site/src/pages/home/assets/banner/logo_ChartSpace_w.svg create mode 100644 site/src/pages/home/assets/banner/logo_DesignLab_w.svg create mode 100644 site/src/pages/home/assets/bg-grid.png create mode 100644 site/src/pages/home/assets/cover_ArcoMaterial.png create mode 100644 site/src/pages/home/assets/ic_More.svg create mode 100644 site/src/pages/home/assets/ic_More_gray.svg create mode 100644 site/src/pages/home/assets/ic_arco.design.svg create mode 100644 site/src/pages/home/assets/ic_code.svg create mode 100644 site/src/pages/home/assets/ic_common_arrow.svg create mode 100644 site/src/pages/home/assets/ic_contact_1.svg create mode 100644 site/src/pages/home/assets/ic_contact_2.svg create mode 100644 site/src/pages/home/assets/ic_dark_code.svg create mode 100644 site/src/pages/home/assets/ic_dark_design.svg create mode 100644 site/src/pages/home/assets/ic_dark_section_custom.svg create mode 100644 site/src/pages/home/assets/ic_dark_section_design.svg create mode 100644 site/src/pages/home/assets/ic_dark_section_ecosystem.svg create mode 100644 site/src/pages/home/assets/ic_dark_section_usage.svg create mode 100644 site/src/pages/home/assets/ic_design.svg create mode 100644 site/src/pages/home/assets/ic_drag.svg create mode 100644 site/src/pages/home/assets/ic_mobile_QRcode.svg create mode 100644 site/src/pages/home/assets/ic_pointer.png create mode 100644 site/src/pages/home/assets/ic_round_arrow.svg create mode 100644 site/src/pages/home/assets/ic_section_custom.svg create mode 100644 site/src/pages/home/assets/ic_section_design.svg create mode 100644 site/src/pages/home/assets/ic_section_ecosystem.svg create mode 100644 site/src/pages/home/assets/ic_section_usage.svg create mode 100644 site/src/pages/home/assets/iconbox_active.svg create mode 100644 site/src/pages/home/assets/img-quick-start-design.svg create mode 100644 site/src/pages/home/assets/img_dark_mobile.png create mode 100644 site/src/pages/home/assets/img_mobile.png create mode 100644 site/src/pages/home/assets/img_product_ArcoMaterial.jpg create mode 100644 site/src/pages/home/assets/img_product_ArcoPro.jpg create mode 100644 site/src/pages/home/assets/img_product_BrandStore.jpg create mode 100644 site/src/pages/home/assets/img_product_ChartSpace.jpg create mode 100644 site/src/pages/home/assets/img_product_DesignLab.jpg create mode 100644 site/src/pages/home/assets/img_product_FontMall.jpg create mode 100644 site/src/pages/home/assets/logo.svg create mode 100644 site/src/pages/home/assets/logo_ArcoCli_white.svg create mode 100644 site/src/pages/home/assets/logo_ArcoCodemod_white.svg create mode 100644 site/src/pages/home/assets/logo_ArcoDesign.svg create mode 100644 site/src/pages/home/assets/logo_ArcoMaterial.svg create mode 100644 site/src/pages/home/assets/logo_ArcoMaterial_blue.svg create mode 100644 site/src/pages/home/assets/logo_ArcoMaterial_gray.svg create mode 100644 site/src/pages/home/assets/logo_ArcoMaterial_w.svg create mode 100644 site/src/pages/home/assets/logo_ArcoMobile.svg create mode 100644 site/src/pages/home/assets/logo_ArcoPro.svg create mode 100644 site/src/pages/home/assets/logo_ArcoPro_blue.svg create mode 100644 site/src/pages/home/assets/logo_ArcoPro_gray.svg create mode 100644 site/src/pages/home/assets/logo_ArcoPro_w.svg create mode 100644 site/src/pages/home/assets/logo_ArcoWebpackPlugin_white.svg create mode 100644 site/src/pages/home/assets/logo_ArtBoard.svg create mode 100644 site/src/pages/home/assets/logo_ArtBoard_blue.svg create mode 100644 site/src/pages/home/assets/logo_Axure_blue.svg create mode 100644 site/src/pages/home/assets/logo_BrandStore.svg create mode 100644 site/src/pages/home/assets/logo_BrandStore_blue.svg create mode 100644 site/src/pages/home/assets/logo_ChartSpace.svg create mode 100644 site/src/pages/home/assets/logo_ChartSpace_blue.svg create mode 100644 site/src/pages/home/assets/logo_ChartSpace_w.svg create mode 100644 site/src/pages/home/assets/logo_DesignLab.svg create mode 100644 site/src/pages/home/assets/logo_DesignLab_blue.svg create mode 100644 site/src/pages/home/assets/logo_DesignLab_gray.svg create mode 100644 site/src/pages/home/assets/logo_DesignLab_w.svg create mode 100644 site/src/pages/home/assets/logo_Figma.svg create mode 100644 site/src/pages/home/assets/logo_Figma_blue.svg create mode 100644 site/src/pages/home/assets/logo_Figma_w.svg create mode 100644 site/src/pages/home/assets/logo_FontMall.svg create mode 100644 site/src/pages/home/assets/logo_FontMall_blue.svg create mode 100644 site/src/pages/home/assets/logo_Gitlab_white.svg create mode 100644 site/src/pages/home/assets/logo_IconBox.svg create mode 100644 site/src/pages/home/assets/logo_IconBox_blue.svg create mode 100644 site/src/pages/home/assets/logo_IconBox_gray.svg create mode 100644 site/src/pages/home/assets/logo_Palette.svg create mode 100644 site/src/pages/home/assets/logo_Palette_gray.svg create mode 100644 site/src/pages/home/assets/logo_Palette_w.svg create mode 100644 site/src/pages/home/assets/logo_Sketch_blue.svg create mode 100644 site/src/pages/home/assets/logo_Sparrow.svg create mode 100644 site/src/pages/home/assets/logo_Sparrow_blue.svg create mode 100644 site/src/pages/home/assets/logo_dark_ArcoDesign.svg create mode 100644 site/src/pages/home/assets/logo_react.svg create mode 100644 site/src/pages/home/assets/logo_vue.svg create mode 100644 site/src/pages/home/assets/logo_w.svg create mode 100644 site/src/pages/home/assets/mobile_hero.jpg create mode 100644 site/src/pages/home/assets/mobile_hero_dark.jpg create mode 100644 site/src/pages/home/assets/mobile_link_QRcode.svg create mode 100644 site/src/pages/home/assets/more_link.svg create mode 100644 site/src/pages/home/assets/products/index.js create mode 100644 site/src/pages/home/assets/products/logo_color_01.svg create mode 100644 site/src/pages/home/assets/products/logo_color_02.svg create mode 100644 site/src/pages/home/assets/products/logo_color_03.svg create mode 100644 site/src/pages/home/assets/products/logo_color_04.svg create mode 100644 site/src/pages/home/assets/products/logo_color_05.svg create mode 100644 site/src/pages/home/assets/products/logo_color_06.svg create mode 100644 site/src/pages/home/assets/products/logo_color_07.svg create mode 100644 site/src/pages/home/assets/products/logo_color_08.svg create mode 100644 site/src/pages/home/assets/products/logo_color_09.svg create mode 100644 site/src/pages/home/assets/products/logo_color_10.svg create mode 100644 site/src/pages/home/assets/products/logo_color_11.svg create mode 100644 site/src/pages/home/assets/products/logo_color_12.svg create mode 100644 site/src/pages/home/assets/products/logo_color_13.svg create mode 100644 site/src/pages/home/assets/products/logo_color_14.svg create mode 100644 site/src/pages/home/assets/products/logo_color_15.svg create mode 100644 site/src/pages/home/assets/products/logo_color_16.svg create mode 100644 site/src/pages/home/assets/products/logo_dark_01.svg create mode 100644 site/src/pages/home/assets/products/logo_dark_02.svg create mode 100644 site/src/pages/home/assets/products/logo_dark_03.svg create mode 100644 site/src/pages/home/assets/products/logo_dark_04.svg create mode 100644 site/src/pages/home/assets/products/logo_dark_05.svg create mode 100644 site/src/pages/home/assets/products/logo_dark_06.svg create mode 100644 site/src/pages/home/assets/products/logo_dark_07.svg create mode 100644 site/src/pages/home/assets/products/logo_dark_08.svg create mode 100644 site/src/pages/home/assets/products/logo_dark_09.svg create mode 100644 site/src/pages/home/assets/products/logo_dark_10.svg create mode 100644 site/src/pages/home/assets/products/logo_dark_11.svg create mode 100644 site/src/pages/home/assets/products/logo_dark_12.svg create mode 100644 site/src/pages/home/assets/products/logo_dark_13.svg create mode 100644 site/src/pages/home/assets/products/logo_dark_14.svg create mode 100644 site/src/pages/home/assets/products/logo_dark_15.svg create mode 100644 site/src/pages/home/assets/products/logo_dark_16.svg create mode 100644 site/src/pages/home/assets/products/logo_white_01.svg create mode 100644 site/src/pages/home/assets/products/logo_white_02.svg create mode 100644 site/src/pages/home/assets/products/logo_white_03.svg create mode 100644 site/src/pages/home/assets/products/logo_white_04.svg create mode 100644 site/src/pages/home/assets/products/logo_white_05.svg create mode 100644 site/src/pages/home/assets/products/logo_white_06.svg create mode 100644 site/src/pages/home/assets/products/logo_white_07.svg create mode 100644 site/src/pages/home/assets/products/logo_white_08.svg create mode 100644 site/src/pages/home/assets/products/logo_white_09.svg create mode 100644 site/src/pages/home/assets/products/logo_white_10.svg create mode 100644 site/src/pages/home/assets/products/logo_white_11.svg create mode 100644 site/src/pages/home/assets/products/logo_white_12.svg create mode 100644 site/src/pages/home/assets/products/logo_white_13.svg create mode 100644 site/src/pages/home/assets/products/logo_white_14.svg create mode 100644 site/src/pages/home/assets/products/logo_white_15.svg create mode 100644 site/src/pages/home/assets/products/logo_white_16.svg create mode 100644 site/src/pages/home/assets/quick-start/ic_design_1.svg create mode 100644 site/src/pages/home/assets/quick-start/ic_design_2.svg create mode 100644 site/src/pages/home/assets/quick-start/ic_design_3.svg create mode 100644 site/src/pages/home/assets/showcase/huoshan.png create mode 100644 site/src/pages/home/assets/showcase/logo_toutiao.svg create mode 100644 site/src/pages/home/assets/showcase/logo_toutiao_dark.svg create mode 100644 site/src/pages/home/assets/showcase/logo_volc_engine.svg create mode 100644 site/src/pages/home/assets/showcase/logo_volc_engine_dark.svg create mode 100644 site/src/pages/home/assets/showcase/logo_volc_engine_feilian.svg create mode 100644 site/src/pages/home/assets/showcase/logo_volc_engine_feilian_dark.svg create mode 100644 site/src/pages/home/assets/showcase/logo_volc_engine_translate.svg create mode 100644 site/src/pages/home/assets/showcase/logo_volc_engine_translate_dark.svg create mode 100644 site/src/pages/home/assets/showcase/logo_volc_live.svg create mode 100644 site/src/pages/home/assets/showcase/logo_volc_live_dark.svg create mode 100644 site/src/pages/home/assets/showcase/tou_tiao.png create mode 100644 site/src/pages/home/assets/showcase/volc_engine.png create mode 100644 site/src/pages/home/assets/showcase/volc_engine_feilian.png create mode 100644 site/src/pages/home/assets/showcase/volc_engine_translate.png create mode 100644 site/src/pages/home/assets/showcase/volc_live.png create mode 100644 site/src/pages/home/assets/stack/ic_color_babel.svg create mode 100644 site/src/pages/home/assets/stack/ic_color_github.svg create mode 100644 site/src/pages/home/assets/stack/ic_color_js.svg create mode 100644 site/src/pages/home/assets/stack/ic_color_nextjs.svg create mode 100644 site/src/pages/home/assets/stack/ic_color_npm.svg create mode 100644 site/src/pages/home/assets/stack/ic_color_react.svg create mode 100644 site/src/pages/home/assets/stack/ic_color_redux.svg create mode 100644 site/src/pages/home/assets/stack/ic_color_vue.svg create mode 100644 site/src/pages/home/assets/stack/ic_color_webpack.svg create mode 100644 site/src/pages/home/assets/stack/ic_gray_babel.svg create mode 100644 site/src/pages/home/assets/stack/ic_gray_github.svg create mode 100644 site/src/pages/home/assets/stack/ic_gray_js.svg create mode 100644 site/src/pages/home/assets/stack/ic_gray_nextjs.svg create mode 100644 site/src/pages/home/assets/stack/ic_gray_npm.svg create mode 100644 site/src/pages/home/assets/stack/ic_gray_react.svg create mode 100644 site/src/pages/home/assets/stack/ic_gray_redux.svg create mode 100644 site/src/pages/home/assets/stack/ic_gray_vue.svg create mode 100644 site/src/pages/home/assets/stack/ic_gray_webpack.svg create mode 100644 site/src/pages/home/components/CardIntroduce/index.tsx create mode 100644 site/src/pages/home/components/CardIntroduce/style/index.module.less create mode 100644 site/src/pages/home/components/CodeCopy/index.tsx create mode 100644 site/src/pages/home/components/CodeCopy/style/index.module.less create mode 100644 site/src/pages/home/components/ColorPicker/index.tsx create mode 100644 site/src/pages/home/components/ColorPicker/style/index.module.less create mode 100644 site/src/pages/home/components/EditorSkin/index.tsx create mode 100644 site/src/pages/home/components/EditorSkin/style/index.module.less create mode 100644 site/src/pages/home/components/LogoWrapper/index.tsx create mode 100644 site/src/pages/home/components/LogoWrapper/style/index.module.less create mode 100644 site/src/pages/home/components/Section/index.module.less create mode 100644 site/src/pages/home/components/Section/index.tsx create mode 100644 site/src/pages/home/components/SectionHeader/index.tsx create mode 100644 site/src/pages/home/components/SectionHeader/style/index.module.less create mode 100644 site/src/pages/home/components/StartBtn/index.tsx create mode 100644 site/src/pages/home/components/StartBtn/locale/en-US.ts create mode 100644 site/src/pages/home/components/StartBtn/locale/zh-CN.ts create mode 100644 site/src/pages/home/components/StartBtn/style/index.module.less create mode 100644 site/src/pages/home/constant/links.ts create mode 100644 site/src/pages/home/content/Icons/index.module.less create mode 100644 site/src/pages/home/content/Icons/index.tsx create mode 100644 site/src/pages/home/content/Icons/locale/en-US.ts create mode 100644 site/src/pages/home/content/Icons/locale/zh-CN.ts create mode 100644 site/src/pages/home/content/Material/index.module.less create mode 100644 site/src/pages/home/content/Material/index.tsx create mode 100644 site/src/pages/home/content/Palette/index.module.less create mode 100644 site/src/pages/home/content/Palette/index.tsx create mode 100644 site/src/pages/home/content/Palette/locale/en-US.ts create mode 100644 site/src/pages/home/content/Palette/locale/zh-CN.ts create mode 100644 site/src/pages/home/content/Pro/chart.tsx create mode 100644 site/src/pages/home/content/Pro/chartData.ts create mode 100644 site/src/pages/home/content/Pro/demo1.tsx create mode 100644 site/src/pages/home/content/Pro/demo2.tsx create mode 100644 site/src/pages/home/content/Pro/editorCard.tsx create mode 100644 site/src/pages/home/content/Pro/form.tsx create mode 100644 site/src/pages/home/content/Pro/iconDrag.tsx create mode 100644 site/src/pages/home/content/Pro/index.tsx create mode 100644 site/src/pages/home/content/Pro/locale/en-US.ts create mode 100644 site/src/pages/home/content/Pro/locale/zh-CN.ts create mode 100644 site/src/pages/home/content/Pro/recentProjects.tsx create mode 100644 site/src/pages/home/content/Pro/style/chart.module.less create mode 100644 site/src/pages/home/content/Pro/style/editor-card.module.less create mode 100644 site/src/pages/home/content/Pro/style/form.module.less create mode 100644 site/src/pages/home/content/Pro/style/index.module.less create mode 100644 site/src/pages/home/content/Pro/style/recent-projects.module.less create mode 100644 site/src/pages/home/content/Token/index.module.less create mode 100644 site/src/pages/home/content/Token/index.tsx create mode 100644 site/src/pages/home/content/Token/locale/en-US.ts create mode 100644 site/src/pages/home/content/Token/locale/zh-CN.ts create mode 100644 site/src/pages/home/context.ts create mode 100644 site/src/pages/home/declaration.d.ts create mode 100644 site/src/pages/home/hooks/useHomeContext.ts create mode 100644 site/src/pages/home/hooks/useIsFirstRender.ts create mode 100644 site/src/pages/home/hooks/useLocale.ts create mode 100644 site/src/pages/home/hooks/useTheme.ts create mode 100644 site/src/pages/home/index.tsx create mode 100644 site/src/pages/home/locale/en-US.ts create mode 100644 site/src/pages/home/locale/zh-CN.ts create mode 100644 site/src/pages/home/sections/Banner/animationIcon.tsx create mode 100644 site/src/pages/home/sections/Banner/content.tsx create mode 100644 site/src/pages/home/sections/Banner/iconReact.tsx create mode 100644 site/src/pages/home/sections/Banner/images.tsx create mode 100644 site/src/pages/home/sections/Banner/imagesForMobile.tsx create mode 100644 site/src/pages/home/sections/Banner/index.tsx create mode 100644 site/src/pages/home/sections/Banner/locale/en-US.ts create mode 100644 site/src/pages/home/sections/Banner/locale/zh-CN.ts create mode 100644 site/src/pages/home/sections/Banner/motion.tsx create mode 100644 site/src/pages/home/sections/Banner/products.tsx create mode 100644 site/src/pages/home/sections/Banner/style/content.module.less create mode 100644 site/src/pages/home/sections/Banner/style/images-for-mobile.module.less create mode 100644 site/src/pages/home/sections/Banner/style/images.module.less create mode 100644 site/src/pages/home/sections/Banner/style/index.module.less create mode 100644 site/src/pages/home/sections/Banner/style/motion.module.less create mode 100644 site/src/pages/home/sections/Banner/style/products.module.less create mode 100644 site/src/pages/home/sections/Ecosystem/components/block/index.module.less create mode 100644 site/src/pages/home/sections/Ecosystem/components/block/index.tsx create mode 100644 site/src/pages/home/sections/Ecosystem/components/blockList/index.module.less create mode 100644 site/src/pages/home/sections/Ecosystem/components/blockList/index.tsx create mode 100644 site/src/pages/home/sections/Ecosystem/components/tabList/index.module.less create mode 100644 site/src/pages/home/sections/Ecosystem/components/tabList/index.tsx create mode 100644 site/src/pages/home/sections/Ecosystem/index.tsx create mode 100644 site/src/pages/home/sections/Ecosystem/interface.ts create mode 100644 site/src/pages/home/sections/Ecosystem/locale/en-US.ts create mode 100644 site/src/pages/home/sections/Ecosystem/locale/zh-CN.ts create mode 100644 site/src/pages/home/sections/Footer/index.tsx create mode 100644 site/src/pages/home/sections/Footer/locale/en-US.ts create mode 100644 site/src/pages/home/sections/Footer/locale/zh-CN.ts create mode 100644 site/src/pages/home/sections/Footer/style/index.module.less create mode 100644 site/src/pages/home/sections/QuickStart/index.tsx create mode 100644 site/src/pages/home/sections/QuickStart/locale/en-US.ts create mode 100644 site/src/pages/home/sections/QuickStart/locale/zh-CN.ts create mode 100644 site/src/pages/home/sections/QuickStart/style/index.module.less create mode 100644 site/src/pages/home/sections/Resource/components/Card/index.module.less create mode 100644 site/src/pages/home/sections/Resource/components/Card/index.tsx create mode 100644 site/src/pages/home/sections/Resource/components/DesignValues/index.module.less create mode 100644 site/src/pages/home/sections/Resource/components/DesignValues/index.tsx create mode 100644 site/src/pages/home/sections/Resource/index.tsx create mode 100644 site/src/pages/home/sections/Resource/locale/en-US.ts create mode 100644 site/src/pages/home/sections/Resource/locale/zh-CN.ts create mode 100644 site/src/pages/home/sections/ShowCase/components/Card/index.module.less create mode 100644 site/src/pages/home/sections/ShowCase/components/Card/index.tsx create mode 100644 site/src/pages/home/sections/ShowCase/index.tsx create mode 100644 site/src/pages/home/sections/ShowCase/locale/en-US.ts create mode 100644 site/src/pages/home/sections/ShowCase/locale/zh-CN.ts create mode 100644 site/src/pages/home/sections/ShowCase/style/index.module.less create mode 100644 site/src/pages/home/sections/ShowCase/useShowcaseData.tsx create mode 100644 site/src/pages/home/sections/Teams/index.tsx create mode 100644 site/src/pages/home/sections/Teams/locale/en-US.ts create mode 100644 site/src/pages/home/sections/Teams/locale/zh-CN.ts create mode 100644 site/src/pages/home/sections/Teams/style/index.module.less create mode 100644 site/src/pages/home/style/app.module.less create mode 100644 site/src/pages/home/style/base.less create mode 100644 site/src/pages/home/style/common.less create mode 100644 site/src/pages/home/style/font/FiraMono-Regular.ttf create mode 100644 site/src/pages/home/style/global.less create mode 100644 site/src/pages/home/style/index.less create mode 100644 site/src/pages/home/style/mixin.less create mode 100644 site/src/pages/home/style/navbar.module.less create mode 100644 site/src/pages/home/style/token.less create mode 100644 site/src/pages/home/utils/animation.ts create mode 100644 site/src/pages/home/utils/cdn-resource.ts create mode 100644 site/src/pages/home/utils/classNames.ts create mode 100644 site/src/pages/home/utils/debounce.ts create mode 100644 site/src/pages/home/utils/dom.ts create mode 100644 site/src/pages/home/utils/is.ts create mode 100644 site/src/pages/home/utils/joinChat.js create mode 100644 site/src/pages/home/utils/lazyload.js create mode 100644 site/src/pages/home/utils/resizeObserver.tsx create mode 100644 site/src/pages/home/utils/responsiveObserve.ts create mode 100644 site/src/pages/home/utils/useIsMobile.ts create mode 100644 site/src/pages/icon/index.js create mode 100644 site/src/pages/icon/md/Iron Man.svg create mode 100644 site/src/pages/icon/md/__changelog__/index.en-US.md create mode 100644 site/src/pages/icon/md/__changelog__/index.zh-CN.md create mode 100644 site/src/pages/icon/md/__demo__/basic.md create mode 100644 site/src/pages/icon/md/__demo__/custom.md create mode 100644 site/src/pages/icon/md/__demo__/iconfont.md create mode 100644 site/src/pages/icon/md/__demo__/spin.md create mode 100644 site/src/pages/icon/md/footer.en-US.md create mode 100644 site/src/pages/icon/md/footer.zh-CN.md create mode 100644 site/src/pages/icon/style.less create mode 100644 site/src/pages/overview/index.js create mode 100644 site/src/pages/overview/meta.js create mode 100644 site/src/pages/overview/style.less create mode 100644 site/src/pages/palette/card.js create mode 100644 site/src/pages/palette/index.js create mode 100644 site/src/pages/palette/md/header.en-US.md create mode 100644 site/src/pages/palette/md/header.zh-CN.md create mode 100644 site/src/pages/palette/style.less create mode 100644 site/src/pages/palette/utils.js create mode 100644 site/src/r.js create mode 100644 site/src/routes.js create mode 100644 site/src/style/changelog.less create mode 100644 site/src/style/demo.less create mode 100644 site/src/style/index.less create mode 100644 site/src/style/markdown.less create mode 100644 site/src/style/navbar.less create mode 100644 site/src/style/page.less create mode 100644 site/src/utils/case.js create mode 100644 site/src/utils/config.js create mode 100644 site/src/utils/env.js create mode 100644 site/src/utils/i18n.js create mode 100644 site/src/utils/lazyload.js create mode 100644 site/src/utils/navbarProps.js create mode 100644 site/src/utils/tea.js create mode 100644 site/src/widget/Anchor/index.jsx create mode 100644 site/src/widget/Anchor/index.less create mode 100644 site/src/widget/Body/index.jsx create mode 100644 site/src/widget/Body/index.less create mode 100644 site/src/widget/Card/index.js create mode 100644 site/src/widget/Card/index.less create mode 100644 site/src/widget/Menu/index.jsx create mode 100644 site/src/widget/Menu/index.less create mode 100644 site/src/widget/MenuHeader/index.jsx create mode 100644 site/src/widget/MenuHeader/index.less create mode 100644 site/src/widget/ThemeBox/index.less create mode 100644 site/src/widget/ThemeBox/index.tsx create mode 100644 site/src/widget/ThemeBox/locale.ts create mode 100644 site/src/widget/scrollTop.js create mode 100644 site/src/widget/style/index.less create mode 100644 stories/components/Affix.jsx create mode 100644 stories/components/Alert.jsx create mode 100644 stories/components/Anchor.jsx create mode 100644 stories/components/AutoComplete.jsx create mode 100644 stories/components/Avatar.jsx create mode 100644 stories/components/BackTop.jsx create mode 100644 stories/components/Badge.jsx create mode 100644 stories/components/Breadcrumb.jsx create mode 100644 stories/components/Button.jsx create mode 100644 stories/components/Card.jsx create mode 100644 stories/components/Carousel.jsx create mode 100644 stories/components/Cascader.jsx create mode 100644 stories/components/Checkbox.jsx create mode 100644 stories/components/Collapse.jsx create mode 100644 stories/components/DatePicker.jsx create mode 100644 stories/components/Divider.jsx create mode 100644 stories/components/Drawer.jsx create mode 100644 stories/components/Dropdown.jsx create mode 100644 stories/components/Form.jsx create mode 100644 stories/components/Grid.jsx create mode 100644 stories/components/Image.jsx create mode 100644 stories/components/Input.jsx create mode 100644 stories/components/InputNumber.jsx create mode 100644 stories/components/InputTag.jsx create mode 100644 stories/components/Layout.jsx create mode 100644 stories/components/List.jsx create mode 100644 stories/components/Mentions.jsx create mode 100644 stories/components/Menu.jsx create mode 100644 stories/components/Message.jsx create mode 100644 stories/components/Modal.jsx create mode 100644 stories/components/Notification.jsx create mode 100644 stories/components/Pagination.jsx create mode 100644 stories/components/Popconfirm.jsx create mode 100644 stories/components/Popover.jsx create mode 100644 stories/components/Progress.jsx create mode 100644 stories/components/Radio.jsx create mode 100644 stories/components/Rate.jsx create mode 100644 stories/components/Select.jsx create mode 100644 stories/components/Skeleton.jsx create mode 100644 stories/components/Slider.jsx create mode 100644 stories/components/Space.jsx create mode 100644 stories/components/Spin.jsx create mode 100644 stories/components/Statistic.jsx create mode 100644 stories/components/Steps.jsx create mode 100644 stories/components/Switch.jsx create mode 100644 stories/components/Tab.jsx create mode 100644 stories/components/Table.jsx create mode 100644 stories/components/Tag.jsx create mode 100644 stories/components/TimePicker.jsx create mode 100644 stories/components/Timeline.jsx create mode 100644 stories/components/Tooltip.jsx create mode 100644 stories/components/Transfer.jsx create mode 100644 stories/components/Tree.jsx create mode 100644 stories/components/Upload.jsx create mode 100644 stories/components/VirtualList.jsx create mode 100644 stories/index.less create mode 100644 stories/index.stories.js create mode 100644 tests/componentConfigTest.tsx create mode 100644 tests/demoTest.ts create mode 100644 tests/mockDate.js create mode 100644 tests/mockRAF.ts create mode 100644 tests/mountTest.tsx create mode 100644 tests/setup.js create mode 100644 tests/util.js create mode 100644 tsconfig.json create mode 100644 tsdoc.json diff --git a/.config/docgen.config.js b/.config/docgen.config.js new file mode 100644 index 0000000000..7b13e3f227 --- /dev/null +++ b/.config/docgen.config.js @@ -0,0 +1,6 @@ +module.exports = (config) => { + config.languages = ['zh-CN', 'en-US']; + config.template = '__template__/index.[language].md'; + config.outputFileName = 'README.[language].md'; + config.tsParseTool = ['ts-document']; +}; diff --git a/.config/jest.config.js b/.config/jest.config.js new file mode 100644 index 0000000000..a2c20814b6 --- /dev/null +++ b/.config/jest.config.js @@ -0,0 +1,27 @@ +// 自定义 Jest 配置 +exports.node = (config) => { + config.moduleNameMapper = { + '^@arco-design/web-react/(.+)$': '/$1', + '^@arco-design/web-react$': '', + }; +}; +exports.client = (config) => { + config.collectCoverageFrom = [ + 'components/**/*.{ts,tsx}', + '!components/**/style/*', + '!components/**/api/*', + ]; + config.coveragePathIgnorePatterns = [ + '/node_modules/', + '/lib/', + '/es/', + '/dist/', + '/icon/', + '/components/index.tsx', + '/components/locale/', + ]; + config.moduleNameMapper = { + '^@arco-design/web-react/(.+)$': '/$1', + '^@arco-design/web-react$': '', + }; +}; diff --git a/.config/style.config.js b/.config/style.config.js new file mode 100644 index 0000000000..48da004763 --- /dev/null +++ b/.config/style.config.js @@ -0,0 +1,13 @@ +module.exports = function StyleConfig(config) { + config.less.cssJsEntry = ['components/**/style/index.ts']; + config.less.output.dist.cssFileName = 'arco.css'; + config.less.watch = [ + 'components/**/*.{less,woff,woff2,png,jpg}', + 'components/style/theme/color/*.js', + ]; + config.less.watchBase = { + ['components/**/*.{less,woff,woff2,png,jpg}']: 'components', + ['components/style/theme/color/*.js']: 'components', + }; + config.jsEntry.autoInjectArcoDep = false; +}; diff --git a/.config/webpack.config.js b/.config/webpack.config.js new file mode 100644 index 0000000000..6a92d4e1ce --- /dev/null +++ b/.config/webpack.config.js @@ -0,0 +1,90 @@ +// 自定义 webpack 构建配置 +const path = require('path'); +const HtmlWebpackPlugin = require('html-webpack-plugin'); +const webpack = require('webpack'); +const { version } = require('../package.json'); + +// 组件 dist 打包 +exports.component = (config) => { + config.entry = path.resolve(__dirname, '../components/index.tsx'); + config.plugins.pop(); + config.plugins.push( + new webpack.BannerPlugin({ + banner: `ArcoDesign v${version}\n\nCopyright 2019-present, Bytedance, Inc.\nAll rights reserved.\n`, + }) + ); +}; + +// 图标 dist 打包 +exports.icon = (config) => { + config.plugins.pop(); + config.plugins.push( + new webpack.BannerPlugin({ + banner: `ArcoDesign v${version}\n\nCopyright 2019-present, Bytedance, Inc.\nAll rights reserved.\n`, + }) + ); +}; + +// 官网 +exports.site = (config, env) => { + if (env === 'prod') { + config.output.publicPath = '/'; + } + + config.entry = { + react: path.resolve(__dirname, '../site/src/index.js'), + 'react-en': path.resolve(__dirname, '../site/src/index-en.js'), + }; + + config.module.rules[1].use[1].options.demoDir = '__demo__'; + + config.module.rules[1].use[1].options.autoHelmet = { + formatTitle: (value) => `${value} | ArcoDesign`, + }; + + // esbuild + config.module.rules[0].loader = 'esbuild-loader'; + config.module.rules[0].options = { + loader: 'tsx', + target: 'es2015', + }; + config.module.rules[1].use[0].loader = 'esbuild-loader'; + config.module.rules[1].use[0].options = { + loader: 'tsx', + target: 'es2015', + }; + + config.plugins[0] = new HtmlWebpackPlugin({ + template: path.resolve(__dirname, '../site/public/index.ejs'), + templateParameters: { + title: 'Arco Design - 企业级产品的完整设计和开发解决方案', + lang: 'zh', + }, + chunks: ['react'], + }); + + config.plugins.push( + new HtmlWebpackPlugin({ + filename: 'index-en.html', + template: path.resolve(__dirname, '../site/public/index.ejs'), + templateParameters: { + title: + 'Arco Design - Complete design and development solutions for enterprise-level products', + lang: 'en', + }, + chunks: ['react-en'], + }) + ); + + config.resolve.alias['@arco-design/web-react'] = path.resolve(__dirname, '..'); + // config.resolve.alias['dayjs$'] = 'moment-timezone'; + + if (env === 'dev') { + config.devServer.historyApiFallback = { + rewrites: [ + { from: /^(\/(react|docs|showcase)){0,1}\/en-US/, to: '/index-en.html' }, + { from: /^\/$/, to: '/index.html' }, + ], + }; + } +}; diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000000..4f30d82fb1 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,10 @@ +root = true + +[*] +charset = utf-8 +end_of_line = lf +indent_style = space +indent_size = 2 +insert_final_newline = true +max_line_length = 100 +trim_trailing_whitespace = true diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000000..3de5be9d02 --- /dev/null +++ b/.eslintignore @@ -0,0 +1,8 @@ +icon/index.js +icon/index.es.js +icon/demo.js +icon/index.d.ts +stories/**/*.jsx +*.json +react-icon/ +react-icon-cjs/ diff --git a/.eslintrc b/.eslintrc new file mode 100644 index 0000000000..f79fc35a26 --- /dev/null +++ b/.eslintrc @@ -0,0 +1,131 @@ +{ + "root": true, + "env": { + "browser": true, + "commonjs": true, + "es6": true, + "node": true, + "jest": true + }, + "parser": "@typescript-eslint/parser", + "extends": [ + "airbnb", + "plugin:react/recommended", + "plugin:prettier/recommended", + "plugin:react-hooks/recommended", + ], + "parserOptions": { + "ecmaFeatures": { + "experimentalObjectRestSpread": true, + "jsx": true + }, + "sourceType": "module" + }, + "plugins": ["react", "babel", "@typescript-eslint/eslint-plugin", "eslint-plugin-tsdoc"], + "globals": { + "ActiveXObject": false, + "describe": false, + "it": false, + "expect": false, + "jest": false, + "$": false, + "afterEach": false, + "beforeEach": false + }, + "overrides": [ + { + "files": ["*.ts", "*.tsx"], + "rules": { + "@typescript-eslint/no-unused-vars": [2, { "args": "none" }], + "@typescript-eslint/no-use-before-define": [2, { "functions": false, "classes": false }] + } + } + ], + "rules": { + "prettier/prettier": ["error", { "trailingComma": "es5", "printWidth": 100 }], + "linebreak-style": ["error", "unix"], + "no-console": ["error", { "allow": ["warn", "error"] }], + "no-case-declarations": 0, + "no-param-reassign": 0, + "no-underscore-dangle": 0, + "no-useless-constructor": 0, + "no-unused-vars": [2, { "vars": "all", "args": "none" }], + "no-restricted-syntax": 0, + "no-unused-expressions": ["error", { "allowShortCircuit": true, "allowTernary": true }], + "no-plusplus": 0, + "no-return-assign": 0, + "no-script-url": 0, + "no-extend-native": 0, + "no-restricted-globals": 0, + "no-nested-ternary": 0, + "no-empty": 0, + "no-void": 0, + "no-useless-escape": 0, + "no-bitwise": 0, + "no-mixed-operators": 0, + "consistent-return": 0, + "one-var": 0, + "prefer-promise-reject-errors": 0, + "prefer-destructuring": 0, + "global-require": 0, + "guard-for-in": 0, + "func-names": 0, + "strict": 0, + "radix": 0, + "no-prototype-builtins": 0, + "class-methods-use-this": 0, + "import/no-dynamic-require": 0, + "import/no-unresolved": 0, + "import/extensions": 0, + "import/no-extraneous-dependencies": 0, + "import/prefer-default-export": 0, + "react/no-danger": 0, + "react/forbid-prop-types": 0, + "react/prop-types": 0, + "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx", "ts", "tsx"] }], + "react/sort-comp": 0, + "react/no-did-update-set-state": 0, + "react/prefer-stateless-function": 0, + "react/jsx-closing-tag-location": 0, + "react/jsx-no-bind": 0, + "react/no-array-index-key": 0, + "react/no-children-prop": 0, + "react/no-did-mount-set-state": 0, + "react/no-find-dom-node": 0, + "react/default-props-match-prop-types": 0, + "react/jsx-one-expression-per-line": 0, + "jsx-a11y/anchor-is-valid": 0, + "jsx-a11y/no-static-element-interactions": 0, + "jsx-a11y/click-events-have-key-events": 0, + "jsx-a11y/no-noninteractive-element-interactions": 0, + "jsx-a11y/alt-text": 0, + "jsx-a11y/label-has-for": 0, + "jsx-a11y/label-has-associated-control": 0, + "jsx-a11y/no-noninteractive-tabindex": 0, + "jsx-a11y/tabindex-no-positive": 0, + "react/jsx-indent": 0, + "react/display-name": 0, + "react/no-multi-comp": 0, + "react/destructuring-assignment": 0, + "react/no-access-state-in-setstate": 0, + "react/button-has-type": 0, + "react/require-default-props": 0, + "react/jsx-wrap-multilines": 0, + "react/no-render-return-value": 0, + "array-callback-return": 0, + "no-cond-assign": 0, + "@typescript-eslint/explicit-function-return-type": 0, + "no-use-before-define": 0, + "@typescript-eslint/no-use-before-define": 2, + "@typescript-eslint/no-var-requires": 0, + "@typescript-eslint/no-empty-function": 0, + "no-shadow": 0, + "no-continue": 0, + "no-loop-func": 0, + "prefer-spread": 0, + "react-hooks/rules-of-hooks": "error", + "react-hooks/exhaustive-deps": "warn", + "tsdoc/syntax": "warn", + "no-undef": 0 + } +} diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml new file mode 100644 index 0000000000..73651c0fbf --- /dev/null +++ b/.github/ISSUE_TEMPLATE/config.yml @@ -0,0 +1,5 @@ +blank_issues_enabled: false +contact_links: + - name: Create new issue + url: https://arco.design/issue-helper?repo=arco-design + about: Please use the following link to create a new issue. diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md new file mode 100644 index 0000000000..b494626771 --- /dev/null +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -0,0 +1,52 @@ + + + + +## Types of changes + + +- [ ] New feature +- [ ] Bug fix +- [ ] Documentation change +- [ ] Coding style change +- [ ] Component style change +- [ ] Refactoring +- [ ] Performance improvement +- [ ] Test cases +- [ ] Continuous integration +- [ ] Typescript definition change +- [ ] Breaking change + +## Background and context + + + + +## Solution + + + +## How is the change tested? + + + + +## Changelog + +| Component | Changelog(CN) | Changelog(EN) | Related issues | +| --------- | ------------- | ------------- | -------------- | +| | | | | + +## Checklist: + +- [ ] Test suite passes (`npm run test`) +- [ ] Provide changelog for relevant changes (e.g. bug fixes and new features) if applicable. +- [ ] Changes are submitted to the appropriate branch (e.g. features should be submitted to `feature` branch and others should be submitted to `master` branch) + +## Other information + + diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000000..88cac60d2f --- /dev/null +++ b/.gitignore @@ -0,0 +1,75 @@ +# Logs +logs +*.log +npm-debug.log* + +# Runtime data +pids +*.pid +*.seed + +# Directory for instrumented libs generated by jscoverage/JSCover +lib-cov + +# Coverage directory used by tools like istanbul +coverage +.coverage + +# nyc test coverage +.nyc_output + +# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) +.grunt + +# node-waf configuration +.lock-wscript + +# Compiled binary addons (http://nodejs.org/api/addons.html) +build/Release + +# Dependency directories +node_modules +jspm_packages + +# Optional npm cache directory +.npm + +# Optional REPL history +.node_repl_history + +# eslint +.eslintcache + +# stylelint +.stylelintcache + +# my test +/test + +# gh-pages +examples/.gitignore + +# Mac files +**/.DS_Store + +# package file +site/package-lock.json +site/package-lock.json + +# idea file +/.idea/ + +# bundle files +/es +/lib +/css +.docz/ +storybook-static/ +icon/react-icon/ +icon/react-icon-cjs/ +dist/ + +# typescript cache +.rpt2_cache/ + +package-lock.json diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000000..cc9aae6562 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,3 @@ +components/index.tsx +*.md +!**/demo/*.md diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000000..30dc9e0524 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,11 @@ +{ + "arrowParens": "always", + "semi": true, + "singleQuote": true, + "jsxBracketSameLine": false, + "jsxSingleQuote": false, + "printWidth": 100, + "useTabs": false, + "tabWidth": 2, + "trailingComma": "es5" +} diff --git a/.storybook/main.js b/.storybook/main.js new file mode 100644 index 0000000000..449743a55a --- /dev/null +++ b/.storybook/main.js @@ -0,0 +1,59 @@ +const path = require('path'); + +const lessRegex = /\.less$/; +const lessModuleRegex = /\.module\.less$/; + +function getLoaderForStyle(isCssModule) { + return [ + { + loader: 'style-loader', + }, + { + loader: 'css-loader', + options: isCssModule ? { modules: true } : {}, + }, + { + loader: 'less-loader', + options: { + javascriptEnabled: true, + }, + }, + ]; +} + +module.exports = { + stories: ['../stories/index.stories.js'], + webpackFinal: (config) => { + config.resolve.alias['@self/icon'] = path.resolve(__dirname, '../icon'); + config.resolve.alias['@self'] = path.resolve(__dirname, '../es'); + + // 解决 webpack 编译警告 + config.module.rules[0].use[0].options.plugins.push([ + '@babel/plugin-proposal-private-property-in-object', + { loose: true }, + ]); + + // 支持 import less + config.module.rules.push({ + test: lessRegex, + exclude: lessModuleRegex, + use: getLoaderForStyle(), + }); + + // less css modules + config.module.rules.push({ + test: lessModuleRegex, + use: getLoaderForStyle(true), + }); + + // 支持 import svg + const fileLoaderRule = config.module.rules.find((rule) => rule.test && rule.test.test('.svg')); + fileLoaderRule.exclude = /\.svg$/; + config.module.rules.push({ + test: /\.svg$/, + loader: ['@svgr/webpack'], + }); + + return config; + }, +}; diff --git a/.storybook/preview.js b/.storybook/preview.js new file mode 100644 index 0000000000..b285aacafd --- /dev/null +++ b/.storybook/preview.js @@ -0,0 +1,3 @@ +export const parameters = { + actions: { argTypesRegex: '^on[A-Z].*' }, +}; diff --git a/.stylelintignore b/.stylelintignore new file mode 100644 index 0000000000..1aaf99f028 --- /dev/null +++ b/.stylelintignore @@ -0,0 +1,2 @@ +components/style/theme/color +*.tsx diff --git a/.stylelintrc b/.stylelintrc new file mode 100644 index 0000000000..11921f75b0 --- /dev/null +++ b/.stylelintrc @@ -0,0 +1,13 @@ +{ + "extends": "stylelint-config-standard", + "rules": { + "no-descending-specificity": null, + "no-duplicate-selectors": null, + "font-family-no-missing-generic-family-keyword": null, + "block-opening-brace-space-before": "always", + "declaration-block-trailing-semicolon": null, + "declaration-colon-newline-after": null, + "indentation": null, + "selector-descendant-combinator-no-non-space": null + } +} diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md new file mode 100644 index 0000000000..198fd8813c --- /dev/null +++ b/CODE_OF_CONDUCT.md @@ -0,0 +1,47 @@ +# Contributor Covenant Code of Conduct + +## Our Pledge + +In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, sex characteristics, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, religion, or sexual identity and orientation. + +## Our Standards + +Examples of behavior that contributes to creating a positive environment include: + +- Using welcoming and inclusive language +- Being respectful of differing viewpoints and experiences +- Gracefully accepting constructive criticism +- Focusing on what is best for the community +- Showing empathy towards other community members + +Examples of unacceptable behavior by participants include: + +- The use of sexualized language or imagery and unwelcome sexual attention or advances +- Trolling, insulting/derogatory comments, and personal or political attacks +- Public or private harassment +- Publishing others' private information, such as a physical or electronic address, without explicit permission +- Other conduct which could reasonably be considered inappropriate in a professional setting + +## Our Responsibilities + +Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior. + +Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful. + +## Scope + +This Code of Conduct applies within all project spaces, and it also applies when an individual is representing the project or its community in public spaces. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers. + +## Enforcement + +Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at pengjiyuan@bytendance.com. All complaints will be reviewed and investigated and will result in a response that is deemed necessary and appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately. + +Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership. + +## Attribution + +This Code of Conduct is adapted from the [Contributor Covenant](https://www.contributor-covenant.org), version 1.4, +available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html + +For answers to common questions about this code of conduct, see +https://www.contributor-covenant.org/faq \ No newline at end of file diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 0000000000..e1f3d17d17 --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,141 @@ + +> English | [简体中文](./CONTRIBUTING.zh-CN.md) +# Contributing + +Thank you for taking your time to contribute and make this project better! Here are some guidelines to help you get started. Please make sure to take a moment and read through them before submitting your contributions. + +## Code of Conduct + +This project is governed by the [Contributor Covenant Code of Conduct](./CODE_OF_CONDUCT.md). By participating, you are expected to adhere to it. + +## Open Development + +All work happens directly on GitHub. Both core team members and external contributors send pull requests which go through the same review process. + +## Semantic Versioning + +This project follows semantic versioning. We release patch versions for bug fixes or other changes that do not change the behavior of the API, minor versions for new features that are backward-compatible, and major versions for any breaking changes. + +Every significant change is documented in the changelog file. + +## Reporting Issues + +We use [Github issues](https://github.com/arco-design/arco-design/issues) for bug reports and feature requests. Before reporting an issue, please make sure you have searched for similar [issues](https://github.com/arco-design/arco-design/issues) as they may have been already answered or being fixed. A new issue should be submitted via [issue helper](https://arco-design/issue-helper?repo=arco-design). For bug reporting, please include the minimum code that can be used to reproduce the problem. For feature request, please specify what changes you want and what behavior you expect. + +## Sending a pull request + +1. Fork [the repository](https://github.com/arco-design/arco-design) and create your branch from `master`. For new feature, please submit your changes directly to the `feature` branch. Other changes should go against `master` branch. +1. Run `npm run init` in the repository root. +1. Run `npm run start` to start and preview site. +1. Make changes to the codebase. Please add tests if applicable. +1. Make sure the test suite passes with `npm run test`. To watch for specific changes in development, use `npm run test --watch TestName`. +1. If you made any `props` changes (i.e. `interface.ts` file), DON'T manually update `README` file under the component. Instead, run `yarn run docgen` to generate the `README` file automatically. +1. Commit your changes, adhering to the [Commit Guidelines](#commit-guidelines) +1. Open a new pull request, [referencing corresponding issues](https://docs.github.com/en/issues/tracking-your-work-with-issues/linking-a-pull-request-to-an-issue#linking-a-pull-request-to-an-issue-using-a-keyword) if available. + +### Commonly used npm scripts + +```bash +# start and preview site locally +$ npm run site + +# checks the javascript code style. +$ npm run eslint + +# checks the css code style +$ npm run stylelint + +# automatically generate docs +$ npm run docgen + +# format code with prettier +$ npm run format + +# create a build of the components +$ npm run build + +# run the complete test suite +$ npm run test +``` + +## Commit Guidelines + +Commit messages are required to follow the [conventional-changelog standard](https://www.conventionalcommits.org/en/v1.0.0/): + +```bash +[optional scope]: + +[optional body] + +[optional footer(s)] +``` + +### Commit types + +The following is a list of commit types: + +- feat: A new feature or functionality +- fix: A bug fix +- docs: Documentation only changes +- style: Code formatting or component style changes +- refactor: Code changes that neither fixes a bug nor adds a feature. +- perf: Improve performance. +- test: Add missing or correct existing tests. +- chore: Other commits that don’t modify src or test files. + +## Project Structure + +### Component directory + +> components/componentName + +``` +├── README.zh-CN.md (Note：Don't edit this file, it's generated by script) +├── README.en-US.md (Note：Don't edit this file, it's generated by script) +├── __template__ （Template used to generate README file） +│ ├── index.en-US.md (EN template) +│ └── index.zh-CN.md （CN template） +├── __changelog__ +├── __test__ +│ ├── __snapshots__ +│ │ └── demo.test.js.snap （Snapshot） +│ ├── demo.test.ts (Snapshot test) +│ └── index.test.ts （Unit test） +├── __demo__ （Demos for each component） +│ ├── basic.md +│ └── advanced.md +├── index.tsx（Component export） +└── style + └── index.less（Component style） + └── index.ts (Component style entry) +``` + +### Template + +Template in `__template__` directory is used to generate component's README with `npm run docgen` command. It should follow the structure below: + +~~~markdown +--- +file: index (Inform react-docgen-typescript where to look up interfaces information) +--- + +````` +Component / Feedback + +# Alert + +Used to display warning information in a way that attracts attention. +````` + +%%Content%% (Placeholder for demos) + +## Props + +%%Props%% (Placeholder for props) +~~~ + +Please note that if you make changes that will affect README (e.g. `props` changes), make sure to run `npm run docgen` to update README of the component. + +## License + +By contributing your code to the repository, you agree to license your contribution under the [MIT license](./LICENSE). diff --git a/CONTRIBUTING.zh-CN.md b/CONTRIBUTING.zh-CN.md new file mode 100644 index 0000000000..e718dd15b7 --- /dev/null +++ b/CONTRIBUTING.zh-CN.md @@ -0,0 +1,142 @@ + +> [English](./CONTRIBUTING.md) | 简体中文 + +# 贡献指南 + +感谢你的宝贵时间。你的贡献将使这个项目变得更好！在提交贡献之前，请务必花点时间阅读下面的入门指南。 + +## 行为准则 + +该项目有一份 [行为准则](./CODE_OF_CONDUCT.md)，希望参与项目的贡献者都能严格遵守。 + +## 透明的开发 + +所有工作都直接透明地在 GitHub 上进行。核心团队成员和外部贡献者的 pull requests 都需要经过相同的 review 流程。 + +## 语义化版本 + +该项目遵循语义化版本。我们对重要的漏洞修复发布修订号，对新特性或不重要的变更发布次版本号，对重大且不兼容的变更发布主版本号。 + +每个重大更改都将记录在 changelog 中。 + +## 报告 Issues + +我们使用 [Github issues](https://github.com/arco-design/arco-design/issues) 进行 bug 报告和新 feature 建议。在报告 bug 之前，请确保已经搜索过类似的 [问题](https://github.com/arco-design/arco-design/issues)，因为它们可能已经得到解答或正在被修复。新问题应通过 [问题助手](https://arco-design/issue-helper?repo=arco-design) 提交。对于 bug 报告，请包含可用于重现问题的代码。对于新 feature 建议，请指出你想要的更改以及期望的行为。 + +## 提交 Pull Request + +1. Fork [此仓库](https://github.com/arco-design/arco-design)，从 `master` 创建分支。新功能实现请发 pull request 到 `feature` 分支。其他更改发到 `master` 分支。 +1. 在仓库根目录下执行 `npm run init`。 +1. 执行 `npm run start` 启动和预览站点. +1. 对代码库进行更改。如果适用的话，请确保写了相应的测试。 +1. 确认执行 `npm run test` 后所有的测试都是通过的。开发过程中可以用 `npm run test --watch TestName` 来运行指定的测试。 +1. 如果进行了任何 `props` 更改（即 `interface.ts` 文件），请不要手动更新组件下的 `README` 文件。运行 `yarn run docgen` 会自动生成 `README` 文件。 +1. 提交 git commit, 请同时遵守 [Commit 规范](#commit-guidelines)。 +1. 提交 pull request, 如果有对应的 issue，请进行[关联](https://docs.github.com/en/issues/tracking-your-work-with-issues/linking-a-pull-request-to-an-issue#linking-a-pull-request-to-an-issue-using-a-keyword)。 + +### 常用的命令 + +```bash +# 本地启动和预览站点 +$ npm run site + +# 检查 javascript 代码规范 +$ npm run eslint + +# 检查 样式 代码规范 +$ npm run stylelint + +# 自动化生成文档 +$ npm run docgen + +# 格式化代码 +$ npm run format + +# 组件构建 +$ npm run build + +# 运行完整的单元测试 +$ npm run test +``` + +## Commit 指南 + +Commit messages 请遵循[conventional-changelog 标准](https://www.conventionalcommits.org/en/v1.0.0/)： + +```bash +<类型>[可选 范围]: <描述> + +[可选 正文] + +[可选 脚注] +``` + +### Commit 类型 + +以下是 commit 类型列表: + +- feat: 新特性或功能 +- fix: 缺陷修复 +- docs: 文档更新 +- style: 代码风格或者组件样式更新 +- refactor: 代码重构，不引入新功能和缺陷修复 +- perf: 性能优化 +- test: 单元测试 +- chore: 其他不修改 src 或测试文件的提交 + +## 项目结构 + +### 组件目录 + +> components/componentName + +``` +├── README.zh-CN.md (注意：不要编辑这个文件，它是由脚本自动生成的) +├── README.en-US.md (注意：不要编辑这个文件，它是由脚本自动生成的) +├── __template__ （用于生成 README 文件的模板） +│ ├── index.en-US.md (英文模版) +│ └── index.zh-CN.md （中文模版） +├── __changelog__ +├── __test__ +│ ├── __snapshots__ +│ │ └── demo.test.js.snap +│ ├── demo.test.ts (快照测试) +│ └── index.test.ts （单元测试） +├── __demo__ （组件演示） +│ ├── basic.md +│ └── advanced.md +├── index.tsx（组件导出） +└── style + └── index.less（组件样式） + └── index.ts (组件样式导出) +``` + +### 模版 + +`__template__` 目录中的模板用于通过 `npm run docgen` 命令生成组件的 README。它遵循以下结构： + +~~~markdown +--- +file: interface (指定查找 interface 信息的位置，用于生成 props) +--- + +````` +组件 / 反馈 + +# 警告提示 Alert + +向用户显示警告的信息时，通过警告提示，展现需要关注的信息。 +````` + +%%Content%% (演示占位符) + +## API + +%%Props%% (Props 占位符) +~~~ + +请注意: 如果进行了会影响 README 的变更（例如 `props` 变更），请确保运行 `npm run docgen` 来更新组件的 README。 + +## License + +[MIT 协议](./LICENSE). diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000000..e252026bf9 --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2021 Bytedance, Inc. and its affiliates. + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000000..6e52b35fea --- /dev/null +++ b/README.md @@ -0,0 +1,107 @@ + +
+

Arco Design

+
+ +
+ +A comprehensive React UI components library based on the [Arco Design](https://arco.design/) system. + +[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/arco-design/arco-design/blob/master/LICENSE) + +
+ +
+ +English | [简体中文](./README.zh-CN.md) + +
+ + +# Features + +## Comprehensive + +With more than 60 crafted components that you can use out of the box. + +## Customizable theme + +Extensive theme tokens can be customized to build your own theme. Two ways +of customization are supported: + +* [With less-loader](https://arco.design/react/docs/theme) +* [Design Lab](https://arco.design/themes) - Recommended! + +## TypeScript friendly + +All components are written in TypeScript so it's type friendly. + +## Wide browser support + +All modern browsers including IE11 (using [polyfills](https://stackoverflow.com/questions/57020976/polyfills-in-2019-for-ie11)), are supported. + +# Installation + +Available as an [npm package](https://www.npmjs.com/package/@arco-design/web-react) + +```bash +// with npm +npm install @arco-design/web-react + +// with yarn +yarn add @arco-design/web-react +``` + +# Examples + +```typescript +import React from 'react'; +import ReactDOM from 'react-dom'; +import Button from '@arco-design/web-react'; + +function App() { + return ( + + ); +} + +ReactDOM.render(, document.getElementById('app')); +``` + +# Useful Links + +* [Documentation website](https://arco.design/) +* [Components documentation](https://arco.design/react/components/overview) +* [Dark mode](https://arco.design/react/docs/dark) +* [Theme customization](https://arco.design/react/docs/theme) +* [Figma component library](https://www.figma.com/file/FVu1DydEeXvJqXrkOb90Oi/ArcoDesign%E7%BB%84%E4%BB%B6%E8%AE%BE%E8%AE%A1_2.0?node-id=5472%3A308) + +# Ecosystems + +| Project | Description | +| --------------------- | ------------------------------------------------------- | +| [Vue Component Library] | A comprehensive Vue UI components library based on the Arco Design system | +| [Design Lab] | A platform to create and manage your themes with ease. | +| [Material Market] | A platform that provides massive high-quality customized materials to greatly boost development efficiency. | +| [Icon Box] | One-stop platform to manage your icons. | +| [Arco Pro] | A solution to quickly building applications from scratch. | + +[Vue Component Library]: https://arco.design/vue/docs/start +[Design Lab]: https://arco.design/themes +[Material Market]: https://arco.design/material +[Icon Box]: https://arco.design/iconbox +[Arco Pro]: https://arco.design/pro/ + +# Contributing + +Developers interested in contributing should read the [Code of Conduct](./CODE_OF_CONDUCT.md) and the [Contributing Guide](./CONTRIBUTING.md). + +# License + +Ths project is [MIT licensed](./LICENSE). diff --git a/README.zh-CN.md b/README.zh-CN.md new file mode 100644 index 0000000000..6aab76b518 --- /dev/null +++ b/README.zh-CN.md @@ -0,0 +1,106 @@ + + +
+

Arco Design

+
+ +
+ +基于 [Arco Design](https://arco.design/) 的 React UI 组件库。 + +[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/arco-design/arco-design/blob/master/LICENSE) + +
+ +
+ +[English](./README.md) | 简体中文 + +
+ +# 特性 + +## 全面 + +60多个开箱即用的高质量组件, 可以覆盖绝大部份的业务场景。 + +## 主题配置 + +海量的样式 tokens, 支持全局以及组件级别的主题配置。有以下2种方式可以定制主题： + +* [Less-loader](https://arco.design/react/docs/theme) +* [风格配置平台](https://arco.design/themes) - 推荐! + +## TypeScript 友好 + +所有组件都是用 TypeScript 编写的，所以天然的类型友好。 + +## 广泛的浏览器支持 + +支持所有现代浏览器，包括 IE11 (需要[polyfills](https://stackoverflow.com/questions/57020976/polyfills-in-2019-for-ie11))。 + +# 安装 + +[npm package](https://www.npmjs.com/package/@arco-design/web-react) + +```bash +// npm +npm install @arco-design/web-react + +// yarn +yarn add @arco-design/web-react +``` + +# 例子 + +```typescript +import React from 'react'; +import ReactDOM from 'react-dom'; +import Button from '@arco-design/web-react'; + +function App() { + return ( + + ); +} + +ReactDOM.render(, document.getElementById('app')); +``` + +# 相关链接 + +* [官网](https://arco.design/) +* [组件文档](https://arco.design/react/components/overview) +* [暗黑模式](https://arco.design/react/docs/dark) +* [主题配置](https://arco.design/react/docs/theme) +* [Figma 设计资源](https://www.figma.com/file/M66cTiLXHa4SVyZIlfY5Pb/arco-Design-System?node-id=8253%3A44145) + +# 生态 + +| 项目 | 介绍 | +| --------------------- | ------------------------------------------------------- | +| [Vue 组件库] | 基于 [Arco Design](https://arco.design/) 的 Vue UI 组件库。 | +| [风格配置平台] | 精确到组件级的主题视觉配置平台 | +| [物料市场] | 丰富可共享的业务定制物料，让效率突破猛进 | +| [图标平台] | 一站式图标管理平台 | +| [Arco Pro] | 快速构建中后台的前端解决方案 | + +[Vue 组件库]: https://arco.design/vue/docs/start +[风格配置平台]: https://arco.design/themes +[物料市场]: https://arco.design/material +[图标平台]: https://arco.design/iconbox +[Arco Pro]: https://arco.design/pro/ + +# 参与贡献 + +贡献之前请先阅读 [行为准则](./CODE_OF_CONDUCT.md) 和 [贡献指南](./CONTRIBUTING.zh-CN.md)。 + +# License + +[MIT 协议](./LICENSE) diff --git a/components/Affix/README.en-US.md b/components/Affix/README.en-US.md new file mode 100644 index 0000000000..6bd8b96703 --- /dev/null +++ b/components/Affix/README.en-US.md @@ -0,0 +1,25 @@ +````` +Component / Other + +# Affix + +Pin the elements to the visible range. When the content area is relatively long and the page needs to scroll, the Affix can fix the element on the screen. Often used for side menu and button group. +````` + +%%Content%% + +## API + +### Affix + +|Property|Description|Type|DefaultValue|Version| +|---|---|---|---|---| +|className|Additional css class|`string \| string[]`|`-`|-| +|style|Additional style|`CSSProperties`|`-`|-| +|affixClassName|ClassName of the fixed element.|`string \| string[]`|`-`|2.8.0| +|affixStyle|Style of the fixed elements. Don't set `position` `top` `width` `height` attributes as they are used for positioning when the element is fixed.|`CSSProperties`|`-`|2.8.0| +|offsetTop|Offset from the top of the viewport (in pixels)|`number`|`0`|-| +|offsetBottom|Offset from the bottom of the viewport (in pixels)|`number`|`-`|-| +|target|Specifies the scrollable area DOM Element|`() => HTMLElement \| null \| Window`|`() => window`|-| +|targetContainer|Outer scrollable DOM element of `target`. `Affix` will listen to the container's scroll event and update the its position correspondingly.It's to solve the problem that Affix may escape the container when the container is not `window`.|`() => HTMLElement \| null \| Window`|`-`|-| +|onChange|Callback fired when Affix state is changed|`(affixed: boolean) => void`|`-`|-| diff --git a/components/Affix/README.zh-CN.md b/components/Affix/README.zh-CN.md new file mode 100644 index 0000000000..007724dd48 --- /dev/null +++ b/components/Affix/README.zh-CN.md @@ -0,0 +1,25 @@ +````` +组件 / 其他 + +# 固钉 Affix + +将页面元素钉在可视范围。当内容区域比较长，需要滚动页面时，固钉可以将内容固定在屏幕上。常用于侧边菜单和按钮组合。 +````` + +%%Content%% + +## API + +### Affix + +|参数名|描述|类型|默认值|版本| +|---|---|---|---|---| +|className|节点类名|`string \| string[]`|`-`|-| +|style|节点样式|`CSSProperties`|`-`|-| +|affixClassName|给 `fixed` 的元素设置 className。|`string \| string[]`|`-`|2.8.0| +|affixStyle|给 `fixed` 的元素设置 style，注意不要设置 `position` `top` `width` `height`， 因为这几个属性是在元素 fixed 时候用于定位的。|`CSSProperties`|`-`|2.8.0| +|offsetTop|距离窗口顶部达到指定偏移量后触发|`number`|`0`|-| +|offsetBottom|距离窗口底部达到指定偏移量后触发|`number`|`-`|-| +|target|滚动容器|`() => HTMLElement \| null \| Window`|`() => window`|-| +|targetContainer|`target` 的外层滚动元素。`Affix` 将会监听该元素的滚动事件，并实时更新固钉的位置。主要是为了解决 `target` 属性指定为非 `window` 元素时，如果外层元素滚动，可能会导致固钉跑出容器问题。|`() => HTMLElement \| null \| Window`|`-`|-| +|onChange|固定状态发生改变时触发|`(affixed: boolean) => void`|`-`|-| diff --git a/components/Affix/__changelog__/index.en-US.md b/components/Affix/__changelog__/index.en-US.md new file mode 100644 index 0000000000..5e18af87ce --- /dev/null +++ b/components/Affix/__changelog__/index.en-US.md @@ -0,0 +1,27 @@ +## 2.20.2 + +2021-08-09 + +### 🐛 Bugfix + +- Fix the bug that the `onChange` callback of the `Affix` component is triggered frequently. + + + +## 2.20.1 + +2021-08-06 + +### 🐛 Bugfix + +- Fix the bug that the content of the `Affix` component is not updated in the `fixed` state or the position of the modified parameter is not updated. + +## 2.18.2 + +2021-07-09 + +### 🐛 Bugfix + +- Fix the bug that the position of the element is not updated when the height of the element is changed when the `Affix` component is in the `fixed` state. +- Fix the bug that the position of the element is not updated when the height of the element is changed when the `Affix` component is in the `fixed` state. + diff --git a/components/Affix/__changelog__/index.zh-CN.md b/components/Affix/__changelog__/index.zh-CN.md new file mode 100644 index 0000000000..e842ec2d6a --- /dev/null +++ b/components/Affix/__changelog__/index.zh-CN.md @@ -0,0 +1,35 @@ +## 2.20.2 + +2021-08-09 + +### 🐛 Bugfix + +- 修复 `Affix` 组件的 `onChange` 回调被频繁触发的 bug。 + +## 2.20.1 + +2021-08-06 + +### 🐛 Bugfix + +- 修复 `Affix` 组件在 `fixed` 状态下更新内容或者修改参数位置没有更新的 bug。 + +## 2.18.2 + +2021-07-09 + +### 🐛 Bugfix + +- 修复 `Affix` 组件在`fixed`状态时，改变元素高度时未调更新位置的 bug。 +- 修复 `Affix` 组件在`fixed`状态时，改变元素高度时未调更新位置的 bug。 + +## 2.1.0 + +2020-11-06 + +### 🆕 Feature + +- `Affix` 组件 ref 暴露 `updatePosition` 接口。 + + + diff --git a/components/Affix/__demo__/basic.md b/components/Affix/__demo__/basic.md new file mode 100644 index 0000000000..03f4e9d795 --- /dev/null +++ b/components/Affix/__demo__/basic.md @@ -0,0 +1,25 @@ +--- +order: 0 +title: + zh-CN: 基本用法 + en-US: Basic +--- + +## zh-CN + +基本用法，不设置固定位置时，当页面滚动元素不可见时，元素固定在页面最顶部。 + +## en-US + +Basic usage. If the fixed position is not set, the element will be fixed at the top of the page when it scrolls outside the page. + +```js +import { Affix, Button } from '@arco-design/web-react'; + +ReactDOM.render( + + + , + CONTAINER +); +``` diff --git a/components/Affix/__demo__/bottom.md b/components/Affix/__demo__/bottom.md new file mode 100644 index 0000000000..be53f90808 --- /dev/null +++ b/components/Affix/__demo__/bottom.md @@ -0,0 +1,25 @@ +--- +order: 2 +title: + zh-CN: 底部固定 + en-US: Fixed Bottom +--- + +## zh-CN + +元素向下滚动到距底部一定距离时固定。 + +## en-US + +The element will be fixed when it scrolls down to a certain distance from the bottom of the viewport. + +```js +import { Affix, Button } from '@arco-design/web-react'; + +ReactDOM.render( + + + , + CONTAINER +); +``` diff --git a/components/Affix/__demo__/container.md b/components/Affix/__demo__/container.md new file mode 100644 index 0000000000..1c13bed90a --- /dev/null +++ b/components/Affix/__demo__/container.md @@ -0,0 +1,63 @@ +--- +order: 4 +title: + zh-CN: 滚动容器 + en-US: Container +--- + +## zh-CN + +用 `target` 设置需要监听其滚动事件的元素，默认为 `window`。 + +`target` 指定为非 window 容器时，可能会出现 `target` 外层元素滚动，固钉元素跑出滚动容器的问题。这个时候可以通过传入 `targetContainer` 设置 `target` 外层的滚动元素。`Affix` 会监听该元素的滚动事件来实时更新滚钉元素的位置。也可以在业务代码中自己监听 `target` 外层滚动元素的 `scroll` 事件，并调用 `this.affixRef.updatePosition()` 去更新固钉的位置。 + +## en-US + +Use `target` to set the element whose scroll event needs to be listened to. The default value is `window`. + +If `target` is specified as a non-window container, the fixed element may escape the container when the outer element scrolls. You can pass in `targetContainer` to set the scrollable element outside `target`. `Affix` will listen to the scroll event of the element and update the position of `Affix` correspondingly. You can also listen to the `scroll` event of the outer scrollable element and call `this.affixRef.updatePosition()` to update the position. + +```js +import { Affix, Button } from '@arco-design/web-react'; + +class Demo extends React.Component { + container = null; + + render() { + return ( +
{ + this.container = node; + }} + > +
+ (this.affixRef = ref)} + target={() => this.container} + offsetTop={20} + style={{ margin: 40 }} + targetContainer={() => window} + > + + +
+
+ ); + } +} + +ReactDOM.render(, CONTAINER); +``` diff --git a/components/Affix/__demo__/fixChange.md b/components/Affix/__demo__/fixChange.md new file mode 100644 index 0000000000..970ee31add --- /dev/null +++ b/components/Affix/__demo__/fixChange.md @@ -0,0 +1,30 @@ +--- +order: 3 +title: + zh-CN: 固定状态改变回调 + en-US: Callback +--- + +## zh-CN + +当固定状态发生改变时，会触发事件。 + +## en-US + +Callback when the fixed state changes. + +```js +import { Affix, Button, Message } from '@arco-design/web-react'; + +ReactDOM.render( + { + Message.info({ content: `${fixed}`, showIcon: true }); + }} + > + + , + CONTAINER +); +``` diff --git a/components/Affix/__demo__/top.md b/components/Affix/__demo__/top.md new file mode 100644 index 0000000000..fb99788aca --- /dev/null +++ b/components/Affix/__demo__/top.md @@ -0,0 +1,25 @@ +--- +order: 1 +title: + zh-CN: 顶部固定 + en-US: Fixed Top +--- + +## zh-CN + +元素向上滚动到距顶部一定距离时固定。 + +## en-US + +The element will be fixed when it scrolls down to a certain distance from the top of the viewport. + +```js +import { Affix, Button } from '@arco-design/web-react'; + +ReactDOM.render( + + + , + CONTAINER +); +``` diff --git a/components/Affix/__template__/index.en-US.md b/components/Affix/__template__/index.en-US.md new file mode 100644 index 0000000000..4e7b579a6d --- /dev/null +++ b/components/Affix/__template__/index.en-US.md @@ -0,0 +1,17 @@ +--- +file: interface +--- + +````` +Component / Other + +# Affix + +Pin the elements to the visible range. When the content area is relatively long and the page needs to scroll, the Affix can fix the element on the screen. Often used for side menu and button group. +````` + +%%Content%% + +## API + +%%Props%% diff --git a/components/Affix/__template__/index.zh-CN.md b/components/Affix/__template__/index.zh-CN.md new file mode 100644 index 0000000000..905e561da9 --- /dev/null +++ b/components/Affix/__template__/index.zh-CN.md @@ -0,0 +1,17 @@ +--- +file: interface +--- + +````` +组件 / 其他 + +# 固钉 Affix + +将页面元素钉在可视范围。当内容区域比较长，需要滚动页面时，固钉可以将内容固定在屏幕上。常用于侧边菜单和按钮组合。 +````` + +%%Content%% + +## API + +%%Props%% diff --git a/components/Affix/__test__/__snapshots__/demo.test.ts.snap b/components/Affix/__test__/__snapshots__/demo.test.ts.snap new file mode 100644 index 0000000000..e1df619f8a --- /dev/null +++ b/components/Affix/__test__/__snapshots__/demo.test.ts.snap @@ -0,0 +1,107 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders Affix/demo/basic.md correctly 1`] = ` +
+
+ +
+
+`; + +exports[`renders Affix/demo/bottom.md correctly 1`] = ` +
+
+ +
+
+`; + +exports[`renders Affix/demo/container.md correctly 1`] = ` +
+
+
+
+ +
+
+
+
+`; + +exports[`renders Affix/demo/fixChange.md correctly 1`] = ` +
+
+ +
+
+`; + +exports[`renders Affix/demo/top.md correctly 1`] = ` +
+
+ +
+
+`; diff --git a/components/Affix/__test__/__snapshots__/index.test.tsx.snap b/components/Affix/__test__/__snapshots__/index.test.tsx.snap new file mode 100644 index 0000000000..0de9025f8a --- /dev/null +++ b/components/Affix/__test__/__snapshots__/index.test.tsx.snap @@ -0,0 +1,37 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ConfigProvider componentConfig.Affix default 1`] = ` +
+
+ +
+
+`; + +exports[`ConfigProvider componentConfig.Affix set className globally 1`] = ` +
+
+ +
+
+`; + +exports[`ConfigProvider componentConfig.Affix set className globally and component set className itself. 1`] = ` +
+
+ +
+
+`; diff --git a/components/Affix/__test__/demo.test.ts b/components/Affix/__test__/demo.test.ts new file mode 100644 index 0000000000..8100ef9183 --- /dev/null +++ b/components/Affix/__test__/demo.test.ts @@ -0,0 +1,3 @@ +import demoTest from '../../../tests/demoTest'; + +demoTest('Affix'); diff --git a/components/Affix/__test__/index.test.tsx b/components/Affix/__test__/index.test.tsx new file mode 100644 index 0000000000..b79bbb0d5b --- /dev/null +++ b/components/Affix/__test__/index.test.tsx @@ -0,0 +1,106 @@ +import React from 'react'; +import { mount } from 'enzyme'; +import mountTest from '../../../tests/mountTest'; +import componentConfigTest from '../../../tests/componentConfigTest'; +import Affix from '..'; +import Button from '../../Button'; +import { sleep } from '../../../tests/util'; + +mountTest(Affix); +componentConfigTest(Affix, 'Affix'); + +const events: Partial) => void>> = {}; + +interface TestProps { + offsetBottom?: number; + offsetTop?: number; + onChange?: () => void; +} + +class Test extends React.Component { + private container: HTMLDivElement; + + componentDidMount() { + this.container.addEventListener = jest + .fn() + .mockImplementation((event: keyof HTMLElementEventMap, cb: (ev: Partial) => void) => { + events[event] = cb; + }); + } + + getTarget = () => this.container; + + render() { + return ( +
{ + this.container = node; + }} + className="container" + > + + + +
+ ); + } +} + +function mountTestComp(component: React.ReactElement) { + return mount>(component); +} + +describe('Affix', () => { + it('should trigger onChange when fixed changed', async () => { + const onChange = jest.fn(); + + const componentWrapper = mountTestComp(); + + const containerElement = componentWrapper + .find('.container') + .first() + .getDOMNode(); + const wrapperElement = componentWrapper + .find('.affix') + .first() + .getDOMNode(); + + let wrapperRect = { + top: 0, + bottom: 0, + }; + const movePlaceholder = async (top: number) => { + wrapperRect = { + top, + bottom: top, + } as DOMRect; + + if (events.scroll == null) { + throw new Error('scroll should be set'); + } + events.scroll({ + type: 'scroll', + }); + await sleep(100); + }; + + jest.spyOn(containerElement, 'getBoundingClientRect').mockImplementation(() => { + return { + top: 0, + bottom: 0, + } as DOMRect; + }); + jest.spyOn(wrapperElement, 'getBoundingClientRect').mockImplementation(() => { + return wrapperRect as DOMRect; + }); + + await sleep(100); + + await movePlaceholder(-100); + expect(onChange).toBeCalledTimes(1); + expect(onChange).toHaveBeenCalledWith(true); + + await movePlaceholder(-200); + expect(onChange).toBeCalledTimes(1); + }); +}); diff --git a/components/Affix/index.tsx b/components/Affix/index.tsx new file mode 100644 index 0000000000..9ce312525b --- /dev/null +++ b/components/Affix/index.tsx @@ -0,0 +1,191 @@ +import React, { + CSSProperties, + forwardRef, + useRef, + useImperativeHandle, + useContext, + PropsWithChildren, + useState, + useEffect, + useCallback, +} from 'react'; +import throttleByRaf from '../_util/throttleByRaf'; +import cs from '../_util/classNames'; +import { ConfigContext } from '../ConfigProvider'; +import { on, off } from '../_util/dom'; +import ResizeObserver from '../_util/resizeObserver'; +import { isWindow, isUndefined, isFunction, isObject } from '../_util/is'; +import useIsomorphicLayoutEffect from '../_util/hooks/useIsomorphicLayoutEffect'; +import { AffixProps } from './interface'; +import useMergeProps from '../_util/hooks/useMergeProps'; + +function getTargetRect(target: HTMLElement | Window) { + return isWindow(target) + ? { + top: 0, + bottom: window.innerHeight, + } + : target.getBoundingClientRect(); +} + +type AffixHandle = { + updatePosition: () => void; +}; + +const defaultProps = { + offsetTop: 0, + target: () => window, +}; + +function Affix(baseProps: PropsWithChildren, ref) { + const { getPrefixCls, componentConfig } = useContext(ConfigContext); + const props = useMergeProps>( + baseProps, + defaultProps, + componentConfig?.Affix + ); + const { + className, + style, + affixClassName, + affixStyle, + offsetTop, + offsetBottom, + target, + targetContainer, + children, + onChange, + } = props; + + const [state, setState] = useState<{ + status: 'MEASURE_DONE' | 'MEASURE_START'; + isFixed: boolean; + sizeStyles: CSSProperties; + fixedStyles: CSSProperties; + }>({ + status: 'MEASURE_DONE', + isFixed: false, + sizeStyles: {}, + fixedStyles: {}, + }); + const { isFixed, sizeStyles, fixedStyles } = state; + const lastIsFixed = useRef(isFixed); + + const prefixCls = getPrefixCls('affix'); + const classNames = cs({ [prefixCls]: isFixed }, affixClassName); + const wrapperRef = useRef(null); + const targetRef = useRef(null); + + const updatePosition = useCallback( + throttleByRaf(() => { + setState({ + status: 'MEASURE_START', + isFixed: false, + fixedStyles: {}, + sizeStyles: {}, + }); + }), + [] + ); + + useIsomorphicLayoutEffect(() => { + const { status } = state; + if (status !== 'MEASURE_START' || !wrapperRef.current || !targetRef.current) return; + + const offsetType = isUndefined(offsetBottom) ? 'top' : 'bottom'; + const wrapperRect = wrapperRef.current.getBoundingClientRect(); + const targetRect = getTargetRect(targetRef.current); + + let newIsFixed = false; + let newFixedStyles = {}; + if (offsetType === 'top') { + newIsFixed = wrapperRect.top - targetRect.top < (offsetTop || 0); + newFixedStyles = newIsFixed + ? { + position: 'fixed', + top: targetRect.top + (offsetTop || 0), + } + : {}; + } else { + newIsFixed = targetRect.bottom - wrapperRect.bottom < (offsetBottom || 0); + newFixedStyles = newIsFixed + ? { + position: 'fixed', + bottom: window.innerHeight - targetRect.bottom + (offsetBottom || 0), + } + : {}; + } + const newSizeStyles = newIsFixed + ? { + width: wrapperRef.current.offsetWidth, + height: wrapperRef.current.offsetHeight, + } + : {}; + + setState({ + status: 'MEASURE_DONE', + isFixed: newIsFixed, + sizeStyles: newSizeStyles, + fixedStyles: { ...newFixedStyles, ...newSizeStyles }, + }); + + if (newIsFixed !== lastIsFixed.current) { + lastIsFixed.current = newIsFixed; + isFunction(onChange) && onChange(newIsFixed); + } + }, [state, offsetBottom, offsetTop, onChange]); + + useEffect(() => { + updatePosition(); + }, [target, targetContainer, offsetBottom, offsetTop, updatePosition]); + + // listen to scroll and resize event of target and update position correspondingly + useEffect(() => { + targetRef.current = target && isFunction(target) ? target() : null; + if (targetRef.current) { + on(targetRef.current, 'scroll', updatePosition); + on(targetRef.current, 'resize', updatePosition); + return () => { + off(targetRef.current, 'scroll', updatePosition); + off(targetRef.current, 'resize', updatePosition); + }; + } + }, [target, updatePosition]); + + useEffect(() => { + const container = targetContainer && isFunction(targetContainer) ? targetContainer() : null; + // listen to scroll event of container if target is not window + if (targetRef.current !== window && container) { + on(container, 'scroll', updatePosition); + return () => { + off(container, 'scroll', updatePosition); + }; + } + }, [targetContainer, updatePosition]); + + useImperativeHandle(ref, () => ({ + updatePosition, + })); + + return ( + +
+ {isFixed &&
} +
+ {children || } +
+
+ + ); +} + +const AffixComponent = forwardRef>(Affix); + +AffixComponent.displayName = 'Affix'; + +export default AffixComponent; + +export { AffixProps }; diff --git a/components/Affix/interface.ts b/components/Affix/interface.ts new file mode 100644 index 0000000000..1f5e419818 --- /dev/null +++ b/components/Affix/interface.ts @@ -0,0 +1,53 @@ +import { CSSProperties } from 'react'; + +/** + * @title Affix + */ +export interface AffixProps { + className?: string | string[]; + style?: CSSProperties; + /** + * @zh 给 `fixed` 的元素设置 className。 + * @en ClassName of the fixed element. + * @version 2.8.0 + */ + affixClassName?: string | string[]; + /** + * @zh + * 给 `fixed` 的元素设置 style，注意不要设置 `position` `top` `width` `height`， 因为这几个属性是在元素 fixed 时候用于定位的。 + * @en Style of the fixed elements. Don't set `position` `top` `width` `height` attributes as they are used for positioning when the element is fixed. + * @version 2.8.0 + */ + affixStyle?: CSSProperties; + /** + * @zh 距离窗口顶部达到指定偏移量后触发 + * @en Offset from the top of the viewport (in pixels) + * @defaultValue 0 + */ + offsetTop?: number; + /** + * @zh 距离窗口底部达到指定偏移量后触发 + * @en Offset from the bottom of the viewport (in pixels) + */ + offsetBottom?: number; + /** + * @zh 滚动容器 + * @en Specifies the scrollable area DOM Element + * @defaultValue () => window + */ + target?: () => HTMLElement | null | Window; + /** + * @zh + * `target` 的外层滚动元素。`Affix` 将会监听该元素的滚动事件，并实时更新固钉的位置。 + * 主要是为了解决 `target` 属性指定为非 `window` 元素时，如果外层元素滚动，可能会导致固钉跑出容器问题。 + * @en + * Outer scrollable DOM element of `target`. `Affix` will listen to the container's scroll event and update the its position correspondingly. + * It's to solve the problem that Affix may escape the container when the container is not `window`. + */ + targetContainer?: () => HTMLElement | null | Window; + /** + * @zh 固定状态发生改变时触发 + * @en Callback fired when Affix state is changed + */ + onChange?: (affixed: boolean) => void; +} diff --git a/components/Affix/style/index.less b/components/Affix/style/index.less new file mode 100644 index 0000000000..15a876f973 --- /dev/null +++ b/components/Affix/style/index.less @@ -0,0 +1,8 @@ +@import '../../style/theme/default.less'; + +@affix-prefix-cls: ~'@{prefix}-affix'; + +.@{affix-prefix-cls} { + position: fixed; + z-index: @z-index-affix; +} diff --git a/components/Affix/style/index.ts b/components/Affix/style/index.ts new file mode 100644 index 0000000000..3a3ab0de59 --- /dev/null +++ b/components/Affix/style/index.ts @@ -0,0 +1,2 @@ +import '../../style/index.less'; +import './index.less'; diff --git a/components/Alert/README.en-US.md b/components/Alert/README.en-US.md new file mode 100644 index 0000000000..e35d391783 --- /dev/null +++ b/components/Alert/README.en-US.md @@ -0,0 +1,29 @@ +````` +Component / Feedback + +# Alert + +Used to display warning information in a way that attracts attention. +````` + +%%Content%% + +## API + +### Alert + +|Property|Description|Type|DefaultValue| +|---|---|---|---| +|style|Additional style|`CSSProperties`|`-`| +|className|Additional css class|`string \| string[]`|`-`| +|action|Custom action item|`ReactNode`|`-`| +|closable|Whether Alert can be closed|`boolean`|`-`| +|onClose|Callback when Alert is closed|`(e) => void`|`-`| +|afterClose|Callback when Alert close animation is complete|`() => void`|`-`| +|type|Type of Alert|`'info' \| 'success' \| 'warning' \| 'error'`|`info`| +|title|Alert title|`ReactNode`|`-`| +|content|Alert content|`ReactNode`|`-`| +|icon|Custom icon, effective when `showIcon` is `true`|`ReactNode`|`-`| +|closeElement|Custom close button|`ReactNode`|`-`| +|showIcon|Whether to show icon|`boolean`|`true`| +|banner|Whether to show as banner|`boolean`|`-`| diff --git a/components/Alert/README.zh-CN.md b/components/Alert/README.zh-CN.md new file mode 100644 index 0000000000..c58313ce84 --- /dev/null +++ b/components/Alert/README.zh-CN.md @@ -0,0 +1,29 @@ +````` +组件 / 反馈 + +# 警告提示 Alert + +向用户显示警告的信息时，通过警告提示，展现需要关注的信息。 +````` + +%%Content%% + +## API + +### Alert + +|参数名|描述|类型|默认值| +|---|---|---|---| +|style|节点样式|`CSSProperties`|`-`| +|className|节点类名|`string \| string[]`|`-`| +|action|自定义操作项|`ReactNode`|`-`| +|closable|是否可关闭|`boolean`|`-`| +|onClose|关闭的回调|`(e) => void`|`-`| +|afterClose|关闭动画结束后执行的回调|`() => void`|`-`| +|type|警告的类型|`'info' \| 'success' \| 'warning' \| 'error'`|`info`| +|title|标题|`ReactNode`|`-`| +|content|内容|`ReactNode`|`-`| +|icon|可以指定自定义图标，`showIcon` 为 `true` 时生效。|`ReactNode`|`-`| +|closeElement|自定义关闭按钮|`ReactNode`|`-`| +|showIcon|是否显示图标|`boolean`|`true`| +|banner|是否用作顶部公告|`boolean`|`-`| diff --git a/components/Alert/__changelog__/index.en-US.md b/components/Alert/__changelog__/index.en-US.md new file mode 100644 index 0000000000..121b111d26 --- /dev/null +++ b/components/Alert/__changelog__/index.en-US.md @@ -0,0 +1,16 @@ +## 2.20.0 + +2021-07-30 + +### 🆎 TypeScript + +- Modify the TS definition of the `title` property of the `Alert` component. + +## 2.11.0 + +2021-03-12 + +### 🆕 Feature + +- The `Alert` component supports `action` custom action items. + diff --git a/components/Alert/__changelog__/index.zh-CN.md b/components/Alert/__changelog__/index.zh-CN.md new file mode 100644 index 0000000000..348f75748b --- /dev/null +++ b/components/Alert/__changelog__/index.zh-CN.md @@ -0,0 +1,16 @@ +## 2.20.0 + +2021-07-30 + +### 🆎 TypeScript + +- 修改 `Alert` 组件 `title` 属性的 TS 定义。 + +## 2.11.0 + +2021-03-12 + +### 🆕 Feature + +- `Alert` 组件支持 `action` 定制操作项。 + diff --git a/components/Alert/__demo__/action.md b/components/Alert/__demo__/action.md new file mode 100644 index 0000000000..acbf0a6032 --- /dev/null +++ b/components/Alert/__demo__/action.md @@ -0,0 +1,47 @@ +--- +order: 7 +title: + zh-CN: 操作项 + en-US: Action +--- + +## zh-CN + +通过 `action` 可以自定义右上角操作项。 + +## en-US + +Customize the action items through `action`. + +```js +import { Alert, Button, Space } from '@arco-design/web-react'; + +ReactDOM.render( +
+ Detail} + closable + /> + Detail} + closable + style={{ marginTop: 10 }} + /> + + + + + } + style={{ marginTop: 10 }} + /> +
, + CONTAINER +); +``` diff --git a/components/Alert/__demo__/banner.md b/components/Alert/__demo__/banner.md new file mode 100644 index 0000000000..29a9c89af0 --- /dev/null +++ b/components/Alert/__demo__/banner.md @@ -0,0 +1,49 @@ +--- +order: 6 +title: + zh-CN: 顶部公告 + en-US: Top Banner +browser: true +--- + +## zh-CN + +设置 `banner = true`，可以当作顶部公告使用。 + +## en-US + +Use `banner = true` to display Alert as a banner on top of the page. + +```js +import { Alert } from '@arco-design/web-react'; + +ReactDOM.render( +
+ + + + +
, + CONTAINER +); +``` diff --git a/components/Alert/__demo__/basic.md b/components/Alert/__demo__/basic.md new file mode 100644 index 0000000000..9e46a1973f --- /dev/null +++ b/components/Alert/__demo__/basic.md @@ -0,0 +1,20 @@ +--- +order: 0 +title: + zh-CN: 基本用法 + en-US: Basic +--- + +## zh-CN + +警告提示，展现需要关注的信息，适用于简短的警告提示。 + +## en-US + +Warning prompts. Suitable for displaying short warning prompts in a way that attracts attention. + +```js +import { Alert } from '@arco-design/web-react'; + +ReactDOM.render(, CONTAINER); +``` diff --git a/components/Alert/__demo__/closable.md b/components/Alert/__demo__/closable.md new file mode 100644 index 0000000000..e309ae7fdb --- /dev/null +++ b/components/Alert/__demo__/closable.md @@ -0,0 +1,53 @@ +--- +order: 2 +title: + zh-CN: 可关闭 + en-US: Closable +--- + +## zh-CN + +指定 `closable = true`，可开启关闭按钮。 + +## en-US + +Use `closable = true` to turn on the close button. + +```js +import { Alert, Grid } from '@arco-design/web-react'; + +const { Row, Col } = Grid; + +ReactDOM.render( +
+ + + + + + + + + + +
, + CONTAINER +); +``` diff --git a/components/Alert/__demo__/closeElement.md b/components/Alert/__demo__/closeElement.md new file mode 100644 index 0000000000..a19ea823a7 --- /dev/null +++ b/components/Alert/__demo__/closeElement.md @@ -0,0 +1,45 @@ +--- +order: 3 +title: + zh-CN: 自定义关闭元素 + en-US: Custom close element +--- + +## zh-CN + +指定 `closeElement`，自定义关闭元素。`closeElement` 可以接收 `onClick`，并且自带 `close` 参数，调用 `close()` 可以关闭。 + +## en-US + +Use `closeElement` to customize the close element. `closeElement` can receive `onClick`, has its own `close` parameter, and can be closed by calling `close()`. + +```js +import { Alert, Grid } from '@arco-design/web-react'; +import { IconCheck } from '@arco-design/web-react/icon'; + +const { Row, Col } = Grid; + +ReactDOM.render( + + + } + /> + + + + + , + CONTAINER +); +``` diff --git a/components/Alert/__demo__/type.md b/components/Alert/__demo__/type.md new file mode 100644 index 0000000000..fda02883e7 --- /dev/null +++ b/components/Alert/__demo__/type.md @@ -0,0 +1,36 @@ +--- +order: 1 +title: + zh-CN: 不同类型 + en-US: Different type +--- + +## zh-CN + +警告提示的类型有 `info`, `success`, `warning`, `error` 四种。 + +## en-US + +There are four types of warnings: `info`, `success`, `warning`, and `error`. + +```js +import { Alert, Grid } from '@arco-design/web-react'; + +const { Row, Col } = Grid; + +ReactDOM.render( +
+ + + + + + + + + + +
, + CONTAINER +); +``` diff --git a/components/Alert/__demo__/with-title.md b/components/Alert/__demo__/with-title.md new file mode 100644 index 0000000000..0dd42fdbc5 --- /dev/null +++ b/components/Alert/__demo__/with-title.md @@ -0,0 +1,46 @@ +--- +order: 4 +title: + zh-CN: 含有标题 + en-US: With title +--- + +## zh-CN + +通过设置 `title` 可以给添加标题，将 `content` 变为辅助性介绍文字。 + +## en-US + +`content` is turned into auxiliary introduction text with presence of `title`. + +```js +import { Alert, Grid } from '@arco-design/web-react'; + +const { Row, Col } = Grid; + +ReactDOM.render( +
+ + + + + + + + + + +
, + CONTAINER +); +``` diff --git a/components/Alert/__demo__/without-icon.md b/components/Alert/__demo__/without-icon.md new file mode 100644 index 0000000000..3b518f7f38 --- /dev/null +++ b/components/Alert/__demo__/without-icon.md @@ -0,0 +1,56 @@ +--- +order: 5 +title: + zh-CN: 不含图标 + en-US: Without icon +--- + +## zh-CN + +通过指定 `showIcon=false` 来不显示图标。 + +## en-US + +Use `showIcon=false` to hide the icon. + +```js +import { Alert, Grid } from '@arco-design/web-react'; + +const { Row, Col } = Grid; + +ReactDOM.render( + + + + + + + + + + , + CONTAINER +); +``` diff --git a/components/Alert/__template__/index.en-US.md b/components/Alert/__template__/index.en-US.md new file mode 100644 index 0000000000..39279d0d57 --- /dev/null +++ b/components/Alert/__template__/index.en-US.md @@ -0,0 +1,17 @@ +--- +file: interface +--- + +````` +Component / Feedback + +# Alert + +Used to display warning information in a way that attracts attention. +````` + +%%Content%% + +## API + +%%Props%% diff --git a/components/Alert/__template__/index.zh-CN.md b/components/Alert/__template__/index.zh-CN.md new file mode 100644 index 0000000000..c9bbadb680 --- /dev/null +++ b/components/Alert/__template__/index.zh-CN.md @@ -0,0 +1,17 @@ +--- +file: interface +--- + +````` +组件 / 反馈 + +# 警告提示 Alert + +向用户显示警告的信息时，通过警告提示，展现需要关注的信息。 +````` + +%%Content%% + +## API + +%%Props%% diff --git a/components/Alert/__test__/__snapshots__/demo.test.ts.snap b/components/Alert/__test__/__snapshots__/demo.test.ts.snap new file mode 100644 index 0000000000..0fd69926f1 --- /dev/null +++ b/components/Alert/__test__/__snapshots__/demo.test.ts.snap @@ -0,0 +1,1183 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders Alert/demo/action.md correctly 1`] = ` +
+
+
+ + + +
+
+
+ Here is an example text +
+
+
+ +
+ +
+
+
+ + + +
+
+
+ Example +
+
+ Here is an example text +
+
+
+ +
+ +
+
+
+ + + +
+
+
+ Example +
+
+ Here is an example text +
+
+
+
+
+ +
+
+ +
+
+
+
+
+`; + +exports[`renders Alert/demo/banner.md correctly 1`] = ` +
+
+
+ + + +
+
+
+ General text +
+
+
+
+
+ + + +
+
+
+ General text +
+
+ +
+
+
+ + + +
+
+
+ General text +
+
+ Here is an example text +
+
+
+
+
+ + + +
+
+
+ Success text +
+
+
+
+`; + +exports[`renders Alert/demo/basic.md correctly 1`] = ` +
+
+ + + +
+
+
+ Here is an example text +
+
+
+`; + +exports[`renders Alert/demo/closable.md correctly 1`] = ` +
+
+
+
+
+ + + +
+
+
+ Here is an info text +
+
+ +
+
+
+ + + +
+
+
+ Warning +
+
+ Here is a warning text +
+
+ +
+
+
+
+
+ + + +
+
+
+ Here is a success text +
+
+ +
+
+
+ + + +
+
+
+ Error +
+
+ Here is an error text +
+
+ +
+
+
+
+`; + +exports[`renders Alert/demo/closeElement.md correctly 1`] = ` +
+
+
+
+ + + +
+
+
+ Here is a success text +
+
+ +
+
+
+
+
+ + + +
+
+
+ Here is a success text +
+
+ +
+
+
+`; + +exports[`renders Alert/demo/type.md correctly 1`] = ` +
+
+
+
+
+ + + +
+
+
+ Here is an info text +
+
+
+
+
+ + + +
+
+
+ Here is a warning text +
+
+
+
+
+
+
+ + + +
+
+
+ Here is a success text +
+
+
+
+
+ + + +
+
+
+ Here is an error text +
+
+
+
+
+
+`; + +exports[`renders Alert/demo/with-title.md correctly 1`] = ` +
+
+
+
+
+ + + +
+
+
+ Info +
+
+ Here is an info text +
+
+
+
+
+ + + +
+
+
+ Warning +
+
+ Here is a warning text +
+
+
+
+
+
+
+ + + +
+
+
+ Success +
+
+ Here is a success text +
+
+
+
+
+ + + +
+
+
+ Error +
+
+ Here is an error text +
+
+
+
+
+
+`; + +exports[`renders Alert/demo/without-icon.md correctly 1`] = ` +
+
+
+
+
+ Here is an info text +
+
+
+
+
+
+ Warning +
+
+ Here is a warning text +
+
+
+
+
+
+
+
+ Here is a success text +
+
+
+
+
+
+ Error +
+
+ Here is an error text +
+
+
+
+
+`; diff --git a/components/Alert/__test__/__snapshots__/index.test.tsx.snap b/components/Alert/__test__/__snapshots__/index.test.tsx.snap new file mode 100644 index 0000000000..85cc2a8aaa --- /dev/null +++ b/components/Alert/__test__/__snapshots__/index.test.tsx.snap @@ -0,0 +1,94 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ConfigProvider componentConfig.Alert default 1`] = ` +
+
+ + + +
+
+
+`; + +exports[`ConfigProvider componentConfig.Alert set className globally 1`] = ` +
+
+ + + +
+
+
+`; + +exports[`ConfigProvider componentConfig.Alert set className globally and component set className itself. 1`] = ` +
+
+ + + +
+
+
+`; diff --git a/components/Alert/__test__/demo.test.ts b/components/Alert/__test__/demo.test.ts new file mode 100644 index 0000000000..e10be1a346 --- /dev/null +++ b/components/Alert/__test__/demo.test.ts @@ -0,0 +1,3 @@ +import demoTest from '../../../tests/demoTest'; + +demoTest('Alert'); diff --git a/components/Alert/__test__/index.test.tsx b/components/Alert/__test__/index.test.tsx new file mode 100644 index 0000000000..495bcca957 --- /dev/null +++ b/components/Alert/__test__/index.test.tsx @@ -0,0 +1,41 @@ +import React from 'react'; +import { mount } from 'enzyme'; +import mountTest from '../../../tests/mountTest'; +import componentConfigTest from '../../../tests/componentConfigTest'; +import Alert from '..'; + +mountTest(Alert); +componentConfigTest(Alert, 'Alert'); + +describe('Alert', () => { + it('showIcon correctly', () => { + const alert = mount(); + + expect(alert.find('.arco-icon-close-circle-fill').length).toBe(1); + }); + + it('onClose and afterClose', () => { + const closeFn = jest.fn(); + const afterCloseFn = jest.fn(); + const alert = mount( + + ); + + jest.useFakeTimers(); + alert + .find('.arco-alert-close-btn') + .at(0) + .simulate('click'); + + expect(closeFn.mock.calls.length).toBe(1); + jest.runAllTimers(); + expect(afterCloseFn.mock.calls.length).toBe(1); + }); +}); diff --git a/components/Alert/index.tsx b/components/Alert/index.tsx new file mode 100644 index 0000000000..2402f77716 --- /dev/null +++ b/components/Alert/index.tsx @@ -0,0 +1,108 @@ +import React, { useState, useContext, ReactNode, forwardRef } from 'react'; +import { CSSTransition } from 'react-transition-group'; +import IconCheckCircleFill from '../../icon/react-icon/IconCheckCircleFill'; +import IconCloseCircleFill from '../../icon/react-icon/IconCloseCircleFill'; +import IconInfoCircleFill from '../../icon/react-icon/IconInfoCircleFill'; +import IconExclamationCircleFill from '../../icon/react-icon/IconExclamationCircleFill'; +import IconClose from '../../icon/react-icon/IconClose'; +import cs from '../_util/classNames'; +import { ConfigContext } from '../ConfigProvider'; +import { AlertProps } from './interface'; +import useMergeProps from '../_util/hooks/useMergeProps'; + +const defaultProps: AlertProps = { + showIcon: true, + type: 'info', +}; + +function Alert(baseProps: AlertProps, ref) { + const { getPrefixCls, componentConfig } = useContext(ConfigContext); + const props = useMergeProps(baseProps, defaultProps, componentConfig?.Alert); + const { + style, + className, + action, + type = 'info', + title, + content, + icon, + showIcon, + closable, + closeable, + afterClose, + onClose, + closeElement, + banner, + } = props; + + const prefixCls = getPrefixCls('alert'); + const [visible, setVisible] = useState(true); + + function renderIcon(type: string | void): ReactNode | null { + if (icon) { + return icon; + } + switch (type) { + case 'info': + return ; + case 'success': + return ; + case 'warning': + return ; + case 'error': + return ; + default: + return null; + } + } + + function onHandleClose(e) { + setVisible(false); + onClose && onClose(e); + } + + const classNames = cs( + prefixCls, + `${prefixCls}-${type}`, + { + [`${prefixCls}-with-title`]: title, + [`${prefixCls}-banner`]: banner, + }, + className + ); + const _closable = 'closeable' in props ? closeable : closable; + + return ( + { + afterClose && afterClose(); + }} + > +
+ {showIcon &&
{renderIcon(type)}
} +
+ {title &&
{title}
} + {content &&
{content}
} +
+ {action &&
{action}
} + {_closable && ( + + )} +
+ + ); +} + +const AlertComponent = forwardRef(Alert); + +AlertComponent.displayName = 'Alert'; + +export default AlertComponent; + +export { AlertProps }; diff --git a/components/Alert/interface.ts b/components/Alert/interface.ts new file mode 100644 index 0000000000..e8367c6a66 --- /dev/null +++ b/components/Alert/interface.ts @@ -0,0 +1,67 @@ +import { CSSProperties, ReactNode } from 'react'; + +/** + * @title Alert + */ +export interface AlertProps { + style?: CSSProperties; + className?: string | string[]; + /** + * @zh 自定义操作项 + * @en Custom action item + */ + action?: ReactNode; + /** + * @zh 是否可关闭 + * @en Whether Alert can be closed + */ + closable?: boolean; + closeable?: boolean; // typo + /** + * @zh 关闭的回调 + * @en Callback when Alert is closed + */ + onClose?: (e) => void; + /** + * @zh 关闭动画结束后执行的回调 + * @en Callback when Alert close animation is complete + */ + afterClose?: () => void; + /** + * @zh 警告的类型 + * @en Type of Alert + * @defaultValue info + */ + type?: 'info' | 'success' | 'warning' | 'error'; + /** + * @zh 标题 + * @en Alert title + */ + title?: ReactNode; + /** + * @zh 内容 + * @en Alert content + */ + content?: ReactNode; + /** + * @zh 可以指定自定义图标，`showIcon` 为 `true` 时生效。 + * @en Custom icon, effective when `showIcon` is `true` + */ + icon?: ReactNode; + /** + * @zh 自定义关闭按钮 + * @en Custom close button + */ + closeElement?: ReactNode; + /** + * @zh 是否显示图标 + * @en Whether to show icon + * @defaultValue true + */ + showIcon?: boolean; + /** + * @zh 是否用作顶部公告 + * @en Whether to show as banner + */ + banner?: boolean; +} diff --git a/components/Alert/style/index.less b/components/Alert/style/index.less new file mode 100644 index 0000000000..4c7fa43659 --- /dev/null +++ b/components/Alert/style/index.less @@ -0,0 +1,179 @@ +@import '../../style/theme/default.less'; +@import './token.less'; + +@alert-prefix-cls: ~'@{prefix}-alert'; + +.@{alert-prefix-cls} { + box-sizing: border-box; + border-radius: @alert-border-radius; + padding: (@alert-padding-vertical - @alert-border-width) + (@alert-padding-horizontal - @alert-border-width); + font-size: @alert-font-size-text-content; + overflow: hidden; + display: flex; + width: 100%; + text-align: left; + align-items: center; + line-height: @alert-line-height; + + &-with-title { + padding: (@alert-padding-vertical_with_title - @alert-border-width) + (@alert-padding-horizontal_with_title - @alert-border-width); + } + + &-with-title { + align-items: flex-start; + } + + &-info { + border: @alert-border-width solid @alert-info-color-border; + background-color: @alert-info-color-bg; + } + + &-success { + border: @alert-border-width solid @alert-success-color-border; + background-color: @alert-success-color-bg; + } + + &-warning { + border: @alert-border-width solid @alert-warning-color-border; + background-color: @alert-warning-color-bg; + } + + &-error { + border: @alert-border-width solid @alert-error-color-border; + background-color: @alert-error-color-bg; + } + + &-banner { + border: none; + border-radius: 0; + } + + &-content-wrapper { + position: relative; + flex: 1; + } + + &-title { + font-size: @alert-font-size-text-title; + font-weight: @alert-font-weight-title; + line-height: @alert-title-line-height; + margin-bottom: @alert-title-margin-bottom; + } + + &-info &-title { + color: @alert-info-color-text-title; + } + + &-info &-content { + color: @alert-info-color-text-content; + } + + &-info&-with-title &-content { + color: @alert-info-color-text-content_title; + } + + &-success &-title { + color: @alert-success-color-text-title; + } + + &-success &-content { + color: @alert-success-color-text-content; + } + + &-success&-with-title &-content { + color: @alert-success-color-text-content_title; + } + + &-warning &-title { + color: @alert-warning-color-text-title; + } + + &-warning &-content { + color: @alert-warning-color-text-content; + } + + &-warning&-with-title &-content { + color: @alert-warning-color-text-content_title; + } + + &-error &-title { + color: @alert-error-color-text-title; + } + + &-error &-content { + color: @alert-error-color-text-content; + } + + &-error&-with-title &-content { + color: @alert-error-color-text-content_title; + } + + &-icon-wrapper { + margin-right: @alert-margin-icon-right; + height: @alert-line-height * @alert-font-size-text-content; + display: flex; + align-items: center; + + svg { + font-size: @alert-font-size-icon; + } + } + + &-with-title &-icon-wrapper { + height: @alert-title-line-height * @alert-font-size-text-title; + } + + &-with-title &-icon-wrapper svg { + font-size: @alert-font-size-icon_with_title; + } + + &-info &-icon-wrapper svg { + color: @alert-info-color-icon; + } + + &-success &-icon-wrapper svg { + color: @alert-success-color-icon; + } + + &-warning &-icon-wrapper svg { + color: @alert-warning-color-icon; + } + + &-error &-icon-wrapper svg { + color: @alert-error-color-icon; + } + + &-close-btn { + box-sizing: border-box; + padding: 0; + border: none; + outline: none; + font-size: @alert-font-size-close-icon; + color: @alert-color-close-icon; + background-color: transparent; + cursor: pointer; + transition: color @transition-duration-1 @transition-timing-function-linear; + margin-left: @alert-margin-close-icon-left; + top: 4px; + right: 0; + + &:hover { + color: @alert-color-close-icon_hover; + } + } + + &-action + &-close-btn { + margin-left: @alert-margin-action-right; + } + + &-action { + margin-left: @alert-margin-action-left; + } + + &-with-title &-close-btn { + margin-top: 0; + margin-right: 0; + } +} diff --git a/components/Alert/style/index.ts b/components/Alert/style/index.ts new file mode 100644 index 0000000000..3a3ab0de59 --- /dev/null +++ b/components/Alert/style/index.ts @@ -0,0 +1,2 @@ +import '../../style/index.less'; +import './index.less'; diff --git a/components/Alert/style/token.less b/components/Alert/style/token.less new file mode 100644 index 0000000000..f643543dad --- /dev/null +++ b/components/Alert/style/token.less @@ -0,0 +1,56 @@ +@import '../../style/theme/default.less'; + +@alert-border-width: @border-1; +@alert-margin-close-icon-left: @spacing-4; +@alert-margin-icon-right: @spacing-4; +@alert-margin-action-right: @spacing-4; +@alert-margin-action-left: @spacing-4; +@alert-border-radius: @radius-small; +@alert-line-height: 1.5715; +@alert-title-line-height: 1.5; +@alert-title-margin-bottom: @spacing-2; + +@alert-padding-horizontal: @spacing-7; +@alert-padding-vertical: 9px; +@alert-padding-horizontal_with_title: @spacing-7; +@alert-padding-vertical_with_title: @spacing-7; + +@alert-font-weight-title: @font-weight-500; +@alert-font-size-text-title: @font-size-title-1; +@alert-font-size-text-content: @font-size-body-3; +@alert-font-size-icon: 16px; +@alert-font-size-icon_with_title: 18px; +@alert-font-size-close-icon: 12px; +@alert-color-close-icon: var(--color-text-2); +@alert-color-close-icon_hover: var(--color-text-1); + +/***************************************************** + * type: info / warning / error /success + *****************************************************/ +@alert-info-color-bg: var(--color-primary-light-1); +@alert-info-color-border: @color-transparent; +@alert-info-color-icon: @color-primary-6; +@alert-info-color-text-title: var(--color-text-1); +@alert-info-color-text-content: var(--color-text-1); +@alert-info-color-text-content_title: var(--color-text-2); + +@alert-warning-color-bg: var(--color-warning-light-1); +@alert-warning-color-border: @color-transparent; +@alert-warning-color-icon: @color-warning-6; +@alert-warning-color-text-title: var(--color-text-1); +@alert-warning-color-text-content: var(--color-text-1); +@alert-warning-color-text-content_title: var(--color-text-2); + +@alert-error-color-bg: var(--color-danger-light-1); +@alert-error-color-border: @color-transparent; +@alert-error-color-icon: @color-danger-6; +@alert-error-color-text-title: var(--color-text-1); +@alert-error-color-text-content: var(--color-text-1); +@alert-error-color-text-content_title: var(--color-text-2); + +@alert-success-color-bg: var(--color-success-light-1); +@alert-success-color-border: @color-transparent; +@alert-success-color-icon: @color-success-6; +@alert-success-color-text-title: var(--color-text-1); +@alert-success-color-text-content: var(--color-text-1); +@alert-success-color-text-content_title: var(--color-text-2); diff --git a/components/Anchor/README.en-US.md b/components/Anchor/README.en-US.md new file mode 100644 index 0000000000..0d55956160 --- /dev/null +++ b/components/Anchor/README.en-US.md @@ -0,0 +1,39 @@ +````` +Component / Other + +# Anchor + +By the Anchor can quickly find the information content of the current page. +````` + +%%Content%% + +## API + +### Anchor + +|Property|Description|Type|DefaultValue|Version| +|---|---|---|---|---| +|className|Additional css class|`string \| string[]`|`-`|-| +|style|Additional style|`CSSProperties`|`-`|-| +|animation|Whether to enable smooth scrolling|`boolean`|`true`|-| +|scrollContainer|Scrolling container. Pass in selector or DOM Element|`string \| HTMLElement \| Window`|`-`|-| +|boundary|Scrolling boundary.For number values, the target element stops scrolling when reaches the bounding distance.For `end`, `start`, `center`, the target scrolls to the bottom, top, and center of the container.|`number \| 'end' \| 'start' \| 'center' \| 'nearest'`|`start`|-| +|hash|Whether to change the URL hash|`boolean`|`true`|-| +|affix|Whether to wrap anchor within [Affix](/react/components/affix)|`boolean`|`true`|-| +|affixStyle|The style to be applied to `Affix`|`CSSProperties`|`-`|-| +|offsetTop|Offset from the top of the viewport (in pixels). i.e. `Affix`'s `offsetTop` props|`number`|`-`|-| +|offsetBottom|Offset from the bottom of the viewport (in pixels). i.e. `Affix`'s `offsetBottom` props|`number`|`-`|-| +|onChange|Callback fired when anchor state changes|`(newLink: string, oldLink: string) => void`|`-`|-| +|onSelect|Callback fired when anchor is clicked|`(newLink: string, oldLink: string) => void`|`-`|-| +|lineless|Whether to hide axis line of the left|`boolean`|`-`|-| +|targetOffset|The offset of the baseline relative to the top of the container.The value is half of the height of the scrolling container if not specified.The status of the anchor will be updated when the anchor reaches or leaves the baseline.|`number`|`-`|2.22.0| + +### Anchor.Link + +|Property|Description|Type|DefaultValue| +|---|---|---|---| +|className|Additional css class|`string \| string[]`|`-`| +|style|Additional style|`CSSProperties`|`-`| +|href|The target that the hyperlink points to|`string`|`#`| +|title|The content of the hyperlink|`string \| React.ReactNode`|`-`| diff --git a/components/Anchor/README.zh-CN.md b/components/Anchor/README.zh-CN.md new file mode 100644 index 0000000000..f70a0a65c5 --- /dev/null +++ b/components/Anchor/README.zh-CN.md @@ -0,0 +1,39 @@ +````` +组件 / 其他 + +# 锚点 Anchor + +通过锚点可快速找到信息内容在当前页面的位置。 +````` + +%%Content%% + +## API + +### Anchor + +|参数名|描述|类型|默认值|版本| +|---|---|---|---|---| +|className|节点类名|`string \| string[]`|`-`|-| +|style|节点样式|`CSSProperties`|`-`|-| +|animation|是否平滑滚动|`boolean`|`true`|-| +|scrollContainer|滚动容器。传入选择器或者dom元素。|`string \| HTMLElement \| Window`|`-`|-| +|boundary|滚动边界值，设置该值为数字后，将会在距离滚动容器 boundary 距离时停止滚动。设置为 end, start, center，目标元素将会对应滚动到底部，顶部，中间位置。|`number \| 'end' \| 'start' \| 'center' \| 'nearest'`|`start`|-| +|hash|是否改变 hash，设置为 `false` 点击锚点不会改变页面 hash。|`boolean`|`true`|-| +|affix|是否固定。当设置为 `true`时，锚点组件将会嵌套在[固钉](/react/components/affix) 组件内|`boolean`|`true`|-| +|affixStyle|通过该属性可以设置 `Affix` 组件的样式|`CSSProperties`|`-`|-| +|offsetTop|距离窗口顶部达到指定偏移量后触发。即 `Affix` 固钉组件的 `offsetTop` 属性|`number`|`-`|-| +|offsetBottom|距离窗口底部达到指定偏移量后触发。 `Affix` 固钉组件的 `offsetBottom` 属性|`number`|`-`|-| +|onChange|滚动时锚点改变或点击锚点时触发|`(newLink: string, oldLink: string) => void`|`-`|-| +|onSelect|点击锚点时候触发|`(newLink: string, oldLink: string) => void`|`-`|-| +|lineless|没有左侧轴线的样式。|`boolean`|`-`|-| +|targetOffset|容器中基准线的位置相对容器顶部的偏移量，在没有设置的时候，取值为滚动容器高度的一半。当锚点到达或离开基准线的时候会更新锚点的状态。|`number`|`-`|2.22.0| + +### Anchor.Link + +|参数名|描述|类型|默认值| +|---|---|---|---| +|className|节点类名|`string \| string[]`|`-`| +|style|节点样式|`CSSProperties`|`-`| +|href|锚点链接|`string`|`#`| +|title|文本内容。可以是字符串或者自定义节点。|`string \| React.ReactNode`|`-`| diff --git a/components/Anchor/__changelog__/index.en-US.md b/components/Anchor/__changelog__/index.en-US.md new file mode 100644 index 0000000000..6ae9683a19 --- /dev/null +++ b/components/Anchor/__changelog__/index.en-US.md @@ -0,0 +1,24 @@ +## 2.22.0 + +2021-09-10 + +### 🆕 Feature + +- The `Anchor` component adds a new attribute `targetOffset` to support setting the offset of the scrolling baseline in the container. + +## 2.17.0 + +2021-06-18 + +### 🐛 Bugfix + +- Fix the bug that the scroll position is not updated when clicking the link when the `animation` and `hash` of the `Anchor` component are both `false`. + +## 2.14.2 + +2021-04-23 + +### 🐛 Bugfix + +- Fix a bug that may cause an error when `Anchor` switches page routing because the dom node does not exist. + diff --git a/components/Anchor/__changelog__/index.zh-CN.md b/components/Anchor/__changelog__/index.zh-CN.md new file mode 100644 index 0000000000..114b357a9c --- /dev/null +++ b/components/Anchor/__changelog__/index.zh-CN.md @@ -0,0 +1,35 @@ +## 2.22.0 + +2021-09-10 + +### 🆕 功能升级 + +- `Anchor` 组件新增一个属性 `targetOffset` 用于支持设置容器中滚动基准线的偏移量。 + +## 2.17.0 + +2021-06-18 + +### 🐛 Bugfix + +- 修复 `Anchor` 组件 `animation` 和 `hash` 都为 `false` 时，点击链接不更新滚动位置的 bug。 + +## 2.14.2 + +2021-04-23 + +### 🐛 Bugfix + +- 修复 `Anchor` 在切换页面路由时由于 dom 节点不存在可能导致报错的 bug。 + +## 2.1.0 + +2020-11-06 + +### 🐛 Bugfix + +- 修复 `Anchor` 组件更新 `scrollContainer` 未生效的 bug。 +- 修复 `Anchor` 组件加上固定高的情况下，左侧线不完整的 bug。 + + + diff --git a/components/Anchor/__demo__/affix.md b/components/Anchor/__demo__/affix.md new file mode 100644 index 0000000000..ea81de6fa5 --- /dev/null +++ b/components/Anchor/__demo__/affix.md @@ -0,0 +1,39 @@ +--- +order: 3 +title: + zh-CN: 固钉样式 + en-US: Affix +--- + +## zh-CN + +示例中的锚点将会出现在页面右侧。 + +当设置 `affix` 为 `true` 时，锚点组件将会嵌套在[固钉](/react/components/affix)组件内。通过 `affixStyle` 属性可以设置 `Affix` 组件的样式。 + +## en-US + +The anchor in the example will appear on the right side of the page. + +Use `affix=true` to wrap the anchor within [Affix](/react/components/affix) component. `affixStyle` can be used to set the style of `Affix` component. + +```js +import { Anchor } from '@arco-design/web-react'; + +const AnchorLink = Anchor.Link; + +ReactDOM.render( + + + + + + + + , + CONTAINER +); +``` diff --git a/components/Anchor/__demo__/basic.md b/components/Anchor/__demo__/basic.md new file mode 100644 index 0000000000..94addb3690 --- /dev/null +++ b/components/Anchor/__demo__/basic.md @@ -0,0 +1,34 @@ +--- +order: 0 +title: + zh-CN: 基本用法 + en-US: Basic +--- + +## zh-CN + +基本用法，随着页面滚动，锚点浮动在页面固定位置。 + +## en-US + +Basic usage. The anchor will be fixed on the page as the page scrolls. + +```js +import { Anchor } from '@arco-design/web-react'; + +const AnchorLink = Anchor.Link; + +ReactDOM.render( + + + + + + + + + + , + CONTAINER +); +``` diff --git a/components/Anchor/__demo__/boundary.md b/components/Anchor/__demo__/boundary.md new file mode 100644 index 0000000000..3827b47d3d --- /dev/null +++ b/components/Anchor/__demo__/boundary.md @@ -0,0 +1,32 @@ +--- +order: 4 +title: + zh-CN: 设置锚点滚动偏移量 + en-US: Scroll boundary +--- + +## zh-CN + +可以设置 `boundary` 来定制锚点滚动偏移量。 + +## en-US + +Use `boundary` to customize the scrolling offset of the anchor. + +```js +import { Anchor } from '@arco-design/web-react'; + +const AnchorLink = Anchor.Link; + +ReactDOM.render( + + + + + + + + , + CONTAINER +); +``` diff --git a/components/Anchor/__demo__/hash.md b/components/Anchor/__demo__/hash.md new file mode 100644 index 0000000000..b134e7ccdf --- /dev/null +++ b/components/Anchor/__demo__/hash.md @@ -0,0 +1,32 @@ +--- +order: 5 +title: + zh-CN: 点击锚点不记录历史 + en-US: Hash mode +--- + +## zh-CN + +可以设置点击锚点而不改变浏览器历史。 + +## en-US + +Click anchor without changing the browser history. + +```js +import { Anchor } from '@arco-design/web-react'; + +const AnchorLink = Anchor.Link; + +ReactDOM.render( + + + + + + + + , + CONTAINER +); +``` diff --git a/components/Anchor/__demo__/lineless.md b/components/Anchor/__demo__/lineless.md new file mode 100644 index 0000000000..fc7e6fbd0a --- /dev/null +++ b/components/Anchor/__demo__/lineless.md @@ -0,0 +1,32 @@ +--- +order: 2 +title: + zh-CN: 无轴线模式 + en-US: Lineless mode +--- + +## zh-CN + +设置 `lineless` 时，可以使用无左侧轴线的锚点样式。 + +## en-US + +Use `lineless=true` to hide axis line on the left. + +```js +import { Anchor } from '@arco-design/web-react'; + +const AnchorLink = Anchor.Link; + +ReactDOM.render( + + + + + + + + , + CONTAINER +); +``` diff --git a/components/Anchor/__demo__/static.md b/components/Anchor/__demo__/static.md new file mode 100644 index 0000000000..40038a1f6c --- /dev/null +++ b/components/Anchor/__demo__/static.md @@ -0,0 +1,32 @@ +--- +order: 1 +title: + zh-CN: 静态位置 + en-US: Static +--- + +## zh-CN + +设置 `affix=false` 不随着页面滚动，锚点处于固定位置。 + +## en-US + +Setting `affix=false`, the anchor is on a fixed position and does't scroll with the page. + +```js +import { Anchor } from '@arco-design/web-react'; + +const AnchorLink = Anchor.Link; + +ReactDOM.render( + + + + + + + + , + CONTAINER +); +``` diff --git a/components/Anchor/__template__/index.en-US.md b/components/Anchor/__template__/index.en-US.md new file mode 100644 index 0000000000..9dd2e95a93 --- /dev/null +++ b/components/Anchor/__template__/index.en-US.md @@ -0,0 +1,17 @@ +--- +file: interface +--- + +````` +Component / Other + +# Anchor + +By the Anchor can quickly find the information content of the current page. +````` + +%%Content%% + +## API + +%%Props%% diff --git a/components/Anchor/__template__/index.zh-CN.md b/components/Anchor/__template__/index.zh-CN.md new file mode 100644 index 0000000000..8d168c331b --- /dev/null +++ b/components/Anchor/__template__/index.zh-CN.md @@ -0,0 +1,17 @@ +--- +file: interface +--- + +````` +组件 / 其他 + +# 锚点 Anchor + +通过锚点可快速找到信息内容在当前页面的位置。 +````` + +%%Content%% + +## API + +%%Props%% diff --git a/components/Anchor/__test__/__snapshots__/demo.test.ts.snap b/components/Anchor/__test__/__snapshots__/demo.test.ts.snap new file mode 100644 index 0000000000..fc9bee8fde --- /dev/null +++ b/components/Anchor/__test__/__snapshots__/demo.test.ts.snap @@ -0,0 +1,517 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders Anchor/demo/affix.md correctly 1`] = ` + +`; + +exports[`renders Anchor/demo/basic.md correctly 1`] = ` + +`; + +exports[`renders Anchor/demo/boundary.md correctly 1`] = ` +
+
+
+ + Basic + +
+
+ + Static + +
+
+ + Lineless mode + +
+
+ + Affix + +
+
+ + Scroll boundary + +
+
+ + Hash mode + +
+
+
+`; + +exports[`renders Anchor/demo/hash.md correctly 1`] = ` +
+
+
+ + Basic + +
+
+ + Static + +
+
+ + Lineless mode + +
+
+ + Affix + +
+
+ + Scroll boundary + +
+
+ + Hash mode + +
+
+
+`; + +exports[`renders Anchor/demo/lineless.md correctly 1`] = ` +
+
+
+ + Basic + +
+
+ + Static + +
+
+ + Lineless mode + +
+
+ + Affix + +
+
+ + Scroll boundary + +
+
+ + Hash mode + +
+
+
+`; + +exports[`renders Anchor/demo/static.md correctly 1`] = ` +
+
+
+ + Basic + +
+
+ + Static + +
+
+ + Lineless mode + +
+
+ + Affix + +
+
+ + Scroll boundary + +
+
+ + Hash mode + +
+
+
+`; diff --git a/components/Anchor/__test__/__snapshots__/index.test.tsx.snap b/components/Anchor/__test__/__snapshots__/index.test.tsx.snap new file mode 100644 index 0000000000..d4e2410415 --- /dev/null +++ b/components/Anchor/__test__/__snapshots__/index.test.tsx.snap @@ -0,0 +1,55 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ConfigProvider componentConfig.Anchor default 1`] = ` +
+
+
+
+
+
+
+`; + +exports[`ConfigProvider componentConfig.Anchor set className globally 1`] = ` +
+
+
+
+
+
+
+`; + +exports[`ConfigProvider componentConfig.Anchor set className globally and component set className itself. 1`] = ` +
+
+
+
+
+
+
+`; diff --git a/components/Anchor/__test__/demo.test.ts b/components/Anchor/__test__/demo.test.ts new file mode 100644 index 0000000000..456674883f --- /dev/null +++ b/components/Anchor/__test__/demo.test.ts @@ -0,0 +1,3 @@ +import demoTest from '../../../tests/demoTest'; + +demoTest('Anchor'); diff --git a/components/Anchor/__test__/index.test.tsx b/components/Anchor/__test__/index.test.tsx new file mode 100644 index 0000000000..74ec1fe769 --- /dev/null +++ b/components/Anchor/__test__/index.test.tsx @@ -0,0 +1,313 @@ +import React from 'react'; +import { mount } from 'enzyme'; +import { act } from 'react-test-renderer'; +import mountTest from '../../../tests/mountTest'; +import Anchor, { AnchorProps } from '..'; +import { isString } from '../../_util/is'; +import { findNode } from '../utils'; +import * as utilModal from '../utils'; +import componentConfigTest from '../../../tests/componentConfigTest'; + +const { Link } = Anchor; + +mountTest(Anchor); +componentConfigTest(Anchor, 'Anchor'); + +jest.mock('compute-scroll-into-view', () => ({ + __esModule: true, + default: jest.fn().mockImplementation(() => { + return [ + { + el: window, + top: 100, + left: 0, + }, + ]; + }), +})); + +interface TestAnchorState { + currentLink: string; +} + +type TestAnchorProps = AnchorProps; + +class TestAnchor extends React.Component { + state: { + currentLink: ''; + }; + + scrollEventHandler() {} + + getContainer() { + return ( + (isString(this.props.scrollContainer) + ? findNode(document, this.props.scrollContainer) + : this.props.scrollContainer) || window + ); + } + + render() { + return ( + { + this.setState({ + ...this.state, + currentLink: val, + }); + this.props.onChange && this.props.onChange(val, last); + }} + > + {this.props.children} + + ); + } +} + +function mountTestAnchor(component: React.ReactElement) { + return mount, TestAnchorState>(component); +} + +function mountAnchor(component: React.ReactElement) { + return mount>(component); +} + +function AnchorContainer(props: { num?: number }) { + const { num = 20 } = props; + return ( +
+ {[...new Array(num)].map((_, i) => ( +
+

{i}

+ {[...new Array(10)].map((_, _key) => ( +

{i}

+ ))} +

{i}

+
+ ))} +
+ ); +} + +let container = document.createElement('div'); +let mockFindNode: jest.SpyInstance; + +beforeAll(() => { + document.body.appendChild(container); +}); + +afterEach(() => { + if (mockFindNode && mockFindNode.mockReset) { + mockFindNode.mockReset(); + } +}); + +afterAll(() => { + document.body.removeChild(container); + container = undefined; + jest.clearAllMocks(); +}); + +describe('Anchor', () => { + it('Anchor to the link correctly', async () => { + const handleClick = jest.fn(); + const handleSelect = jest.fn(); + const wrapper = mountTestAnchor( + + + + ); + wrapper.find('a[href="#b"]').simulate('click'); + await new Promise((resolve) => setTimeout(resolve, 500)); + expect(wrapper.state().currentLink).toBe('#b'); + expect(handleClick.mock.calls.length).toBe(1); + expect(handleSelect.mock.calls.length).toBe(1); + expect(wrapper.props); + }); + + it('Anchor correctly when scroll', async () => { + const root = document.createElement('div'); + root.setAttribute('id', 'root'); + document.body.appendChild(root); + mount(
demo A
, { attachTo: root }); + const wrapper = mountTestAnchor( + + + + ); + await new Promise((resolve) => setTimeout(resolve, 500)); + expect(wrapper.state().currentLink).toBe('#a'); + expect(wrapper.find('Affix').exists()).toBeTruthy(); + }); + + it('Anchor not fixed', () => { + const wrapper = mountAnchor( + + + + ); + expect(wrapper.find('Affix').exists()).toBeFalsy(); + }); + + it('should run correctly when set scrollContainer', async () => { + const handleClick = jest.fn(); + const wrapper = mount( +
+
+
+ {[...new Array(20)].map((_, i) => ( +
+ {i} +
+ ))} +
+
+ + {[...new Array(20)].map((_, i) => ( + + ))} + +
+ ); + wrapper + .find('Anchor') + .find("a[href='#anchor4']") + .simulate('click'); + await new Promise((resolve) => setTimeout(resolve, 500)); + expect(handleClick.mock.calls.length).toBe(1); + }); + + it('should remove listener when unmount', async () => { + const wrapper = mountAnchor( + + + + ); + const add = jest.spyOn(window, 'addEventListener'); + wrapper.mount(); + expect(add).toHaveBeenCalled(); + const remove = jest.spyOn(window, 'removeEventListener'); + wrapper.unmount(); + expect(remove).toHaveBeenCalled(); + }); + + it('should unregister link when unmount children', async () => { + const wrapper = mountTestAnchor( + + + + + ); + expect(wrapper.find('.arco-anchor-link')).toHaveLength(2); + wrapper.setProps({ children: null }); + expect(wrapper.find('.arco-anchor-link')).toHaveLength(0); + }); + + // it('can refresh links when the hash not render in Anchor.Link', () => { + // const customerHashId = 'custom'; + // const wrapper = mount( + //
+ // + // + // + // + //
+ // ); + + // container.id = customerHashId; + // mockFindNode = jest.spyOn(utilModal, 'findNode').mockImplementation(() => { + // return container; + // }); + // const currentCount = mockFindNode.mock.calls.length; + + // const AnchorInstance = wrapper.find('Anchor').instance() as Anchor; + // AnchorInstance.handleAnchorChange(`#${customerHashId}`); + // expect(mockFindNode).toHaveBeenCalledTimes(currentCount + 1); + // expect(AnchorInstance.links[`#${customerHashId}`]).not.toBeUndefined(); + + // container.id = undefined; + // }); + + // it('support the scrollContainer scene', async () => { + // const wrapper = mount( + //
+ // + // + // {[...new Array(20)].map((_, i) => ( + // + // ))} + // + //
+ // ); + // const AnchorElment: ReactWrapper = wrapper.find('Anchor'); + + // const scrollContainer = (AnchorElment.instance() as Anchor).getContainerElement(); + + // expect((scrollContainer as HTMLElement).id === 'scrollContainer'); + // }); + + it('scrollContainer can be changed', () => { + const containerMock = jest.spyOn(utilModal, 'getContainer'); + + const wrapper = mountTestAnchor( + + + + + ); + + act(() => { + wrapper.setProps({ + scrollContainer: document.body, + }); + }); + + // 去除原来监听1次。 + // 监听新的scrollContainer1次。 + expect(containerMock).toHaveBeenCalledTimes(2); + }); + + it('should call utils function correctly', () => { + const anchorId = 'anchor4'; + const mockSlide = jest.spyOn(utilModal, 'slide'); + mockFindNode = jest.spyOn(utilModal, 'findNode').mockImplementation(() => { + return container; + }); + const wrapper = mount( +
+ + + {[...new Array(20)].map((_, i) => ( + + ))} + +
+ ); + + const currentCount = mockFindNode.mock.calls.length; + expect(currentCount > 0 && currentCount <= 20).toBeTruthy(); + + act(() => { + wrapper + .find('Anchor') + .find(`a[href='#${anchorId}']`) + .simulate('click'); + }); + + expect(mockFindNode).toHaveBeenCalledTimes(currentCount + 1); + expect(mockFindNode.mock.calls[currentCount][1]).toBe(`#${anchorId}`); + expect(mockSlide).toHaveBeenCalledTimes(1); + + // mockSlide第一次调用的第二个参数，即top。mock结果是100 + expect(mockSlide.mock.calls[0][1]).toEqual(100); + }); +}); diff --git a/components/Anchor/anchor.tsx b/components/Anchor/anchor.tsx new file mode 100644 index 0000000000..90e1a2e950 --- /dev/null +++ b/components/Anchor/anchor.tsx @@ -0,0 +1,266 @@ +import React, { + forwardRef, + useCallback, + useContext, + useEffect, + useImperativeHandle, + useRef, +} from 'react'; +import throttle from 'lodash/throttle'; +import compute from 'compute-scroll-into-view'; +import scrollIntoViewIfNeeded from 'scroll-into-view-if-needed'; +import { isFunction, isNumber, isWindow } from '../_util/is'; +import { on, off } from '../_util/dom'; +import cs from '../_util/classNames'; +import useIsFirstRender from '../_util/hooks/useIsFirstRender'; +import Affix from '../Affix'; +import { ConfigContext } from '../ConfigProvider'; +import { AnchorProps } from './interface'; +import AnchorContext from './context'; +import { findNode, slide, getContainer, getContainerElement } from './utils'; +import useStateWithPromise from '../_util/hooks/useStateWithPromise'; +import Link from './link'; +import useMergeProps from '../_util/hooks/useMergeProps'; + +type AnchorPropsWithChildren = React.PropsWithChildren; + +const defaultProps: AnchorProps = { + animation: true, + affix: true, + hash: true, + boundary: 'start', +}; + +function Anchor(baseProps: AnchorPropsWithChildren, ref) { + const { getPrefixCls, componentConfig } = useContext(ConfigContext); + const props = useMergeProps( + baseProps, + defaultProps, + componentConfig?.Anchor + ); + const { + className, + style, + scrollContainer: propScrollContainer, + animation = true, + lineless, + affix = true, + affixStyle, + offsetBottom, + offsetTop, + hash: willChangeHash = true, + boundary = 'start', + targetOffset, + children, + onSelect, + onChange, + } = props; + const prefixCls = getPrefixCls('anchor'); + const classNames = cs(prefixCls, className, { + [`${prefixCls}-lineless`]: lineless, + }); + const wrapperRef = useRef(null); + const sliderLineRef = useRef(null); + const linkMap = useRef>(new Map()); + const isScrolling = useRef(false); + const [currentLink, setCurrentLink] = useStateWithPromise(''); + const isFirstRender = useIsFirstRender(); + + const scrollContainer = useRef(null); + useEffect(() => { + const container = getContainer(propScrollContainer); + scrollContainer.current = container; + }, [propScrollContainer]); + + useImperativeHandle( + ref, + () => ({ + dom: wrapperRef.current, + }), + [] + ); + + function addLink(hash: string, element: HTMLElement) { + if (hash) { + linkMap.current.set(hash, element); + } + } + + function removeLink(hash: string) { + linkMap.current.delete(hash); + } + + const setActiveLink = useCallback( + (hash: string) => { + if (!hash || !wrapperRef.current) return; + // Try to add when there is no corresponding link + if (!linkMap.current.has(hash)) { + const node = findNode(wrapperRef.current, `a[data-href='${hash}']`); + node && addLink(hash, node); + } + + const node = linkMap.current.get(hash); + + if (node && hash !== currentLink) { + scrollIntoViewIfNeeded(node, { + behavior: 'instant', + block: 'nearest', + scrollMode: 'if-needed', + boundary: wrapperRef.current, + }); + + setCurrentLink(hash).then(() => { + isFunction(onChange) && onChange(hash, currentLink); + }); + } + }, + [currentLink, onChange] + ); + + const getEleInViewport = useCallback(() => { + let result; + const startTop = isNumber(boundary) ? boundary : 0; + const container = scrollContainer.current; + const containerElement = getContainerElement(container); + const containerRect = containerElement.getBoundingClientRect(); + const documentHeight = document.documentElement.clientHeight; + [...linkMap.current.keys()].some((hash) => { + const element = findNode(document, hash); + let inView = false; + if (element) { + const { top } = element.getBoundingClientRect(); + if (isWindow(container)) { + inView = top >= startTop && top <= (targetOffset ?? documentHeight / 2); + } else { + const offsetTop = top - containerRect.top - startTop; + inView = offsetTop >= 0 && offsetTop <= (targetOffset ?? containerRect.height / 2); + } + if (inView) { + result = element; + } + } + return inView; + }); + return result; + }, [boundary, targetOffset]); + + const onScroll = useCallback( + throttle( + () => { + if (isScrolling.current) return; + const element = getEleInViewport(); + + if (element && element.id) { + const hash = `#${element.id}`; + setActiveLink(hash); + } + }, + 30, + { trailing: true } + ), + [getEleInViewport, setActiveLink] + ); + + function scrollIntoView(hash: string) { + if (!hash) return; + try { + const element = findNode(document, hash); + if (!element) return; + const block = isNumber(boundary) ? 'start' : boundary; + const offset = isNumber(boundary) ? boundary : 0; + const actions = compute(element, { block }); + if (!actions.length) return; + const { el, top } = actions[0]; + const targetTop = top - offset; + if (!animation) { + // Manually trigger scrolling as browser's default action is prevented when `props.hash` is false + if (!willChangeHash) { + el.scrollTop = targetTop; + } + return; + } + slide(el as HTMLElement, targetTop, () => { + isScrolling.current = false; + }); + isScrolling.current = true; + } catch (e) { + console.error(e); + } + } + + function onLinkClick(e: React.MouseEvent, hash: string) { + if (!willChangeHash) { + e.preventDefault(); + } + setActiveLink(hash); + scrollIntoView(hash); + isFunction(onSelect) && onSelect(hash, currentLink); + } + + useEffect(() => { + const hash = decodeURIComponent(location.hash); + if (hash) { + setActiveLink(hash); + scrollIntoView(hash); + } else { + // compute current active anchor + onScroll(); + } + }, []); + + useEffect(() => { + if (!isFirstRender) { + onScroll(); + } + + on(scrollContainer.current, 'scroll', onScroll); + return () => { + off(scrollContainer.current, 'scroll', onScroll); + }; + }, [propScrollContainer, onScroll]); + + useEffect(() => { + const link = linkMap.current.get(currentLink); + if (link && !lineless && sliderLineRef.current) { + sliderLineRef.current.style.top = `${link.offsetTop}px`; + } + }, [currentLink, lineless]); + + const content = ( +
+ {!lineless && currentLink && ( +
+ )} + +
{children}
+ +
+ ); + + return affix ? ( + + {content} + + ) : ( + content + ); +} + +const ForwardRefAnchor = forwardRef(Anchor); + +const AnchorComponent = ForwardRefAnchor as typeof ForwardRefAnchor & { + Link: typeof Link; +}; + +AnchorComponent.displayName = 'Anchor'; + +AnchorComponent.Link = Link; + +export default AnchorComponent; diff --git a/components/Anchor/context.ts b/components/Anchor/context.ts new file mode 100644 index 0000000000..9a7892d050 --- /dev/null +++ b/components/Anchor/context.ts @@ -0,0 +1,15 @@ +import { createContext } from 'react'; + +interface AnchorContext { + currentLink: string; + onLinkClick: (e: React.MouseEvent, href: string) => void; + addLink: (href: string, node: HTMLElement) => void; + removeLink: (href: string) => void; +} + +export default createContext({ + currentLink: '', + onLinkClick: () => {}, + addLink: () => {}, + removeLink: () => {}, +}); diff --git a/components/Anchor/index.tsx b/components/Anchor/index.tsx new file mode 100644 index 0000000000..6b1583d898 --- /dev/null +++ b/components/Anchor/index.tsx @@ -0,0 +1,6 @@ +import Anchor from './anchor'; +import { AnchorProps } from './interface'; + +export default Anchor; + +export { AnchorProps }; diff --git a/components/Anchor/interface.ts b/components/Anchor/interface.ts new file mode 100644 index 0000000000..5a436782d1 --- /dev/null +++ b/components/Anchor/interface.ts @@ -0,0 +1,100 @@ +import { CSSProperties } from 'react'; + +/** + * @title Anchor + */ +export interface AnchorProps { + className?: string | string[]; + style?: CSSProperties; + /** + * @zh 是否平滑滚动 + * @en Whether to enable smooth scrolling + * @defaultValue true + */ + animation?: boolean; + /** + * @zh 滚动容器。传入选择器或者dom元素。 + * @en Scrolling container. Pass in selector or DOM Element + */ + scrollContainer?: string | HTMLElement | Window; + /** + * @zh + * 滚动边界值，设置该值为数字后，将会在距离滚动容器 boundary 距离时停止滚动。 + * 设置为 end, start, center，目标元素将会对应滚动到底部，顶部，中间位置。 + * @en + * Scrolling boundary. + * For number values, the target element stops scrolling when reaches the bounding distance. + * For `end`, `start`, `center`, the target scrolls to the bottom, top, and center of the container. + * @defaultValue start + */ + boundary?: number | 'end' | 'start' | 'center' | 'nearest'; + /** + * @zh 是否改变 hash，设置为 `false` 点击锚点不会改变页面 hash。 + * @en Whether to change the URL hash + * @defaultValue true + */ + hash?: boolean; + /** + * @zh 是否固定。当设置为 `true`时，锚点组件将会嵌套在[固钉](/react/components/affix) 组件内 + * @en Whether to wrap anchor within [Affix](/react/components/affix) + * @defaultValue true + */ + affix?: boolean; + /** + * @zh 通过该属性可以设置 `Affix` 组件的样式 + * @en The style to be applied to `Affix` + */ + affixStyle?: CSSProperties; + /** + * @zh 距离窗口顶部达到指定偏移量后触发。即 `Affix` 固钉组件的 `offsetTop` 属性 + * @en Offset from the top of the viewport (in pixels). i.e. `Affix`'s `offsetTop` props + */ + offsetTop?: number; + /** + * @zh 距离窗口底部达到指定偏移量后触发。 `Affix` 固钉组件的 `offsetBottom` 属性 + * @en Offset from the bottom of the viewport (in pixels). i.e. `Affix`'s `offsetBottom` props + */ + offsetBottom?: number; + /** + * @zh 滚动时锚点改变或点击锚点时触发 + * @en Callback fired when anchor state changes + */ + onChange?: (newLink: string, oldLink: string) => void; + /** + * @zh 点击锚点时候触发 + * @en Callback fired when anchor is clicked + */ + onSelect?: (newLink: string, oldLink: string) => void; + /** + * @zh 没有左侧轴线的样式。 + * @en Whether to hide axis line of the left + */ + lineless?: boolean; + /** + * @version 2.22.0 + * @zh 容器中基准线的位置相对容器顶部的偏移量，在没有设置的时候，取值为滚动容器高度的一半。当锚点到达或离开基准线的时候会更新锚点的状态。 + * @en The offset of the baseline relative to the top of the container. + * The value is half of the height of the scrolling container if not specified. + * The status of the anchor will be updated when the anchor reaches or leaves the baseline. + */ + targetOffset?: number; +} + +/** + * @title Anchor.Link + */ +export interface AnchorLinkProps { + className?: string | string[]; + style?: CSSProperties; + /** + * @zh 锚点链接 + * @en The target that the hyperlink points to + * @defaultValue # + */ + href?: string; + /** + * @zh 文本内容。可以是字符串或者自定义节点。 + * @en The content of the hyperlink + */ + title?: string | React.ReactNode; +} diff --git a/components/Anchor/link.tsx b/components/Anchor/link.tsx new file mode 100644 index 0000000000..612a5f595f --- /dev/null +++ b/components/Anchor/link.tsx @@ -0,0 +1,90 @@ +import React, { + forwardRef, + useContext, + useEffect, + useImperativeHandle, + useRef, + isValidElement, +} from 'react'; +import AnchorContext from './context'; +import { AnchorLinkProps } from './interface'; +import { ConfigContext } from '../ConfigProvider'; +import cs from '../_util/classNames'; +import { isString, isObject } from '../_util/is'; +import useMergeProps from '../_util/hooks/useMergeProps'; + +type AnchorLinkHandle = HTMLDivElement; + +type AnchorLinkPropsWithChildren = React.PropsWithChildren; + +const DISPLAY_NAME = 'AnchorLink'; + +const defaultProps = { + href: '#', +}; + +function isNamedComponent(type: any): type is React.ForwardRefExoticComponent { + return isObject(type) && type.hasOwnProperty('displayName'); +} + +function Link(baseProps: AnchorLinkPropsWithChildren, ref) { + const { getPrefixCls, componentConfig } = useContext(ConfigContext); + const { className, style, href, title, children } = useMergeProps( + baseProps, + defaultProps, + componentConfig?.['Anchor.Link'] + ); + const anchorContext = useContext(AnchorContext); + const { currentLink, addLink, removeLink, onLinkClick } = anchorContext; + const prefixCls = getPrefixCls('anchor-link'); + const classNames = cs( + prefixCls, + { + [`${prefixCls}-active`]: currentLink === href, + }, + className + ); + const linkRef = useRef(null); + + useImperativeHandle(ref, () => linkRef.current, []); + + useEffect(() => { + addLink && addLink(href, linkRef.current); + return () => { + removeLink && removeLink(href); + }; + }, [href]); + + return ( +
+ { + onLinkClick && onLinkClick(e, href); + }} + > + {title} + + {children && + React.Children.map(children, (item) => { + return ( + isValidElement(item) && + isNamedComponent(item.type) && + item.type.displayName === DISPLAY_NAME && + item + ); + })} +
+ ); +} + +const AnchorLinkComponent = forwardRef>( + Link +); + +AnchorLinkComponent.displayName = DISPLAY_NAME; + +export default AnchorLinkComponent; diff --git a/components/Anchor/style/index.less b/components/Anchor/style/index.less new file mode 100644 index 0000000000..bbe1b96211 --- /dev/null +++ b/components/Anchor/style/index.less @@ -0,0 +1,87 @@ +@import './token.less'; + +@anchor-prefix-cls: ~'@{prefix}-anchor'; + +.@{anchor-prefix-cls} { + position: relative; + width: @anchor-width; + overflow: auto; + + &-line { + &-slider { + position: absolute; + height: @anchor-line-slider-height; + width: @anchor-line-width; + margin-top: 4px + @anchor-title-padding-vertical; + background-color: @anchor-color-bg-line_active; + left: 0; + top: 0; + transition: top @transition-duration-2 @transition-timing-function-standard; + z-index: 1; + } + } + + &-list { + margin-left: @anchor-line-margin-right - @anchor-title-padding-horizontal; + position: relative; + + &:before { + content: ''; + position: absolute; + height: 100%; + background-color: @anchor-color-bg-line; + width: @anchor-line-width; + left: -(@anchor-line-margin-right - @anchor-title-padding-horizontal); + } + } + + &-link { + margin-bottom: @anchor-title-margin-bottom; + + &-title { + color: @anchor-color-title; + line-height: @line-height-base; + font-size: @anchor-font-size-title; + margin-bottom: @anchor-title-margin-bottom; + padding: @anchor-title-padding-vertical @anchor-title-padding-horizontal; + text-decoration: none; + cursor: pointer; + text-overflow: ellipsis; + overflow: hidden; + display: block; + white-space: nowrap; + border-radius: @anchor-border-radius-title-hover; + } + + &-title:hover { + background-color: @anchor-color-bg-title_hover; + color: @anchor-color-title_hover; + font-weight: @anchor-font-weight-title_hover; + } + + &-active > &-title { + transition: all @transition-duration-1 @transition-timing-function-linear; + + color: @anchor-color-title_active; + font-weight: @anchor-font-weight-title_active; + } + } + + &-link &-link { + margin-left: @anchor-item-inner-margin-left; + } + + // Lineless + &-lineless &-list { + margin-left: 0; + &::before { + display: none; + } + } + + &-lineless &-link-active > &-link-title { + background-color: @anchor-lineless-bg-title_active; + color: @anchor-lineless-color-title_active; + font-weight: @anchor-lineless-font-weight-title_active; + } +} diff --git a/components/Anchor/style/index.ts b/components/Anchor/style/index.ts new file mode 100644 index 0000000000..343fcff1fc --- /dev/null +++ b/components/Anchor/style/index.ts @@ -0,0 +1,3 @@ +import '../../style/index.less'; +import '../../Affix/style'; +import './index.less'; diff --git a/components/Anchor/style/token.less b/components/Anchor/style/token.less new file mode 100644 index 0000000000..f4153c8df8 --- /dev/null +++ b/components/Anchor/style/token.less @@ -0,0 +1,30 @@ +@import '../../style/theme/default.less'; + +// Line +@anchor-width: 150px; +@anchor-line-width: 2px; +@anchor-line-slider-height: 12px; +@anchor-line-margin-right: 12px; +@anchor-color-bg-line: var(--color-fill-3); +@anchor-color-bg-line_active: @color-primary-6; + +@anchor-border-radius-title-hover: @radius-small; + +@anchor-item-inner-margin-left: @spacing-7; + +@anchor-title-padding-horizontal: @spacing-4; +@anchor-title-padding-vertical: @spacing-2; +@anchor-title-margin-bottom: @spacing-1; + +@anchor-color-title: var(--color-text-2); +@anchor-color-title_hover: var(--color-text-1); +@anchor-color-title_active: var(--color-text-1); +@anchor-font-weight-title_hover: @font-weight-500; +@anchor-font-weight-title_active: @font-weight-500; +@anchor-color-bg-title_hover: var(--color-fill-2); +@anchor-font-size-title: 14px; + +// Lineless +@anchor-lineless-color-title_active: @color-primary-6; +@anchor-lineless-bg-title_active: var(--color-fill-2); +@anchor-lineless-font-weight-title_active: @font-weight-500; diff --git a/components/Anchor/utils.ts b/components/Anchor/utils.ts new file mode 100644 index 0000000000..6c9f7d523b --- /dev/null +++ b/components/Anchor/utils.ts @@ -0,0 +1,46 @@ +import BTween from 'b-tween'; +import { isString, isWindow } from '../_util/is'; + +export function findNode(dom: HTMLElement | Document, selector: string): HTMLElement | null { + // handle id start with number + // e.g. id #123 + const s = + isString(selector) && selector[0] === '#' ? `[id='${selector.replace('#', '')}']` : selector; + try { + return dom.querySelector(s); + } catch (e) { + console.error(e); + return null; + } +} + +export function slide(el: HTMLElement, top: number, cb: Function) { + const tween = new BTween({ + from: { + scrollTop: el.scrollTop, + }, + to: { + scrollTop: top, + }, + easing: 'quartOut', + duration: 300, + onUpdate: (keys) => { + el.scrollTop = keys.scrollTop; + }, + onFinish: () => { + cb && cb(); + }, + }); + tween.start(); +} + +export function getContainer(targetContainer?: string | HTMLElement | Window) { + if (isString(targetContainer)) { + return findNode(document, targetContainer); + } + return targetContainer || window; +} + +export function getContainerElement(scrollContainer: HTMLElement | Window) { + return isWindow(scrollContainer) ? document.documentElement || document.body : scrollContainer; +} diff --git a/components/AutoComplete/README.en-US.md b/components/AutoComplete/README.en-US.md new file mode 100644 index 0000000000..4b70e8c8fc --- /dev/null +++ b/components/AutoComplete/README.en-US.md @@ -0,0 +1,50 @@ +````` +Component / Data Entry + +# AutoComplete + +An input box or custom input control, with enhanced automatic completion functionality. +````` + +%%Content%% + +## API + +### AutoComplete + +|Property|Description|Type|DefaultValue|Version| +|---|---|---|---|---| +|style|Additional style|`CSSProperties`|`-`|-| +|className|Additional css class|`string \| string[]`|`-`|-| +|disabled|Whether to disable the autocomplete|`boolean`|`-`|-| +|children|Custom input/source data|`React.ReactNode`|`-`|-| +|allowClear|Whether to allow clear the content|`boolean`|`-`|-| +|data|Data source|`(string \| { value: string; name: string; [key: string]: any } \| React.ReactNode)[]`|`-`|-| +|placeholder|Placeholder of input|`string`|`-`|-| +|defaultValue|The default value of the autocomplete.|`string`|`-`|-| +|value|The value of the autocomplete.|`string`|`-`|-| +|error|Error style|`boolean`|`-`|-| +|strict|Case sensitive when set `strict: true`|`boolean`|`-`|-| +|loading|Whether the component is loading data.|`boolean`|`-`|2.10.0| +|triggerElement|Custom trigger element|`ReactElement`|``|-| +|onSearch|Callback when searching items|`(value: string) => void`|`-`|-| +|onSelect|Callback when an option is selected.|`(value: string, option: OptionInfo) => void`|`-`|-| +|onChange|Callback when an option is selected or input value changes|`(value: string, option?: OptionInfo) => void`|`-`|-| +|onPressEnter|Callback when Enter is pressed|`(event) => void`|`-`|-| +|onFocus|Callback when component gets focus|`(event) => void`|`-`|-| +|onBlur|Callback when component is blurred|`(event) => void`|`-`|-| +|virtualListProps|Virtual scroll properties.|`AvailableVirtualListProps`|`-`|2.2.0| +|inputProps|Properties of Input component.|`Partial`|`-`|2.10.0| +|filterOption|If it's true, filter options by input value. If it's a function, filter options base on the function.|`boolean \| ((inputValue: string, option: ReactElement) => boolean)`|`true`|-| +|dropdownRender|Customize dropdown content|`(menu: ReactNode) => ReactNode`|`-`|-| +|triggerProps|Pass all `Trigger` component properties|`Partial`|`-`|-| +|getPopupContainer|To set the container of the dropdown.|`(node: HTMLElement) => Element`|`-`|-| +|defaultActiveFirstOption|Whether to highlight the first option by default|`boolean`|`true`|-| + +### AutoComplete.Option + +Same as `Select.Option`, refer to [Select](/react/en-US/components/select). + +### AutoComplete.OptGroup + +Same as `Select.OptGroup`, refer to [Select](/react/en-US/components/select). diff --git a/components/AutoComplete/README.zh-CN.md b/components/AutoComplete/README.zh-CN.md new file mode 100644 index 0000000000..a55c5f3dd4 --- /dev/null +++ b/components/AutoComplete/README.zh-CN.md @@ -0,0 +1,50 @@ +````` +组件 / 数据输入 + +# 自动补全 AutoComplete + +输入框或自定义输入控件的自动补全功能。 +````` + +%%Content%% + +## API + +### AutoComplete + +|参数名|描述|类型|默认值|版本| +|---|---|---|---|---| +|style|节点样式|`CSSProperties`|`-`|-| +|className|节点类名|`string \| string[]`|`-`|-| +|disabled|是否禁用|`boolean`|`-`|-| +|children|自定义输入框/数据源|`React.ReactNode`|`-`|-| +|allowClear|是否允许一键清除|`boolean`|`-`|-| +|data|自动完成的数据源|`(string \| { value: string; name: string; [key: string]: any } \| React.ReactNode)[]`|`-`|-| +|placeholder|输入框提示|`string`|`-`|-| +|defaultValue|自动补全组件的默认值|`string`|`-`|-| +|value|自动补全组件的值（受控模式）|`string`|`-`|-| +|error|报错状态|`boolean`|`-`|-| +|strict|`strict: true` 的时候大小写敏感|`boolean`|`-`|-| +|loading|是否处于加载状态。|`boolean`|`-`|2.10.0| +|triggerElement|自定义触发元素|`ReactElement`|``|-| +|onSearch|搜索补全时的回调|`(value: string) => void`|`-`|-| +|onSelect|点击补全项时的回调|`(value: string, option: OptionInfo) => void`|`-`|-| +|onChange|输入或者点击补全项，value 改变时的回调（仅在点击补全项时存在第二个参数）|`(value: string, option?: OptionInfo) => void`|`-`|-| +|onPressEnter|按下回车键的回调|`(event) => void`|`-`|-| +|onFocus|聚焦时的回调|`(event) => void`|`-`|-| +|onBlur|失去焦点的回调|`(event) => void`|`-`|-| +|virtualListProps|传递虚拟滚动属性。|`AvailableVirtualListProps`|`-`|2.2.0| +|inputProps|传递 Input 组件的属性。|`Partial`|`-`|2.10.0| +|filterOption|是否根据输入的值筛选数据。如果传入函数的话，接收 `inputValue` 和 `option` 两个参数，当option符合筛选条件时，返回 `true`，反之返回 `false`。|`boolean \| ((inputValue: string, option: ReactElement) => boolean)`|`true`|-| +|dropdownRender|自定义弹出内容。|`(menu: ReactNode) => ReactNode`|`-`|-| +|triggerProps|可以接受所有 `Trigger` 的 `Props`|`Partial`|`-`|-| +|getPopupContainer|弹出框挂载的父节点。|`(node: HTMLElement) => Element`|`-`|-| +|defaultActiveFirstOption|是否默认高亮第一个选项|`boolean`|`true`|-| + +### AutoComplete.Option + +同 `Select.Option`, 参考 [Select 文档](/react/components/select) 。 + +### AutoComplete.OptGroup + +同 `Select.OptGroup`, 参考 [Select 文档](/react/components/select) 。 diff --git a/components/AutoComplete/__changelog__/index.en-US.md b/components/AutoComplete/__changelog__/index.en-US.md new file mode 100644 index 0000000000..43a1679b7f --- /dev/null +++ b/components/AutoComplete/__changelog__/index.en-US.md @@ -0,0 +1,35 @@ +## 2.15.3 + +2021-05-21 + +### 🆎 TypeScript + +- Improve the `option` parameter type in the `onChange/onSelect` of the `AutoComplete` component. + + + +## 2.10.0 🏮 + +2020-02-26 + +### 🆕 Feature + +- Added `inputProps` and `loading` properties to the `AutoComplete` component. + +## 2.9.1 + +2021-02-20 + +### 🐛 Bugfix + +- Fix the bug that the `triggerProps.popupVisible` of the `AutoComplete` component does not take effect. +- Fix the bug that the `onBlur` callback of the `AutoComplete` component is triggered before the drop-down box is hidden. + +## 2.8.1 + +2021-01-28 + +### 🐛 Bugfix + +- Fix the bug that the `onChange` cannot be triggered by clicking the same value option again after the input of `AutoComplete` is changed. + diff --git a/components/AutoComplete/__changelog__/index.zh-CN.md b/components/AutoComplete/__changelog__/index.zh-CN.md new file mode 100644 index 0000000000..83c74788a2 --- /dev/null +++ b/components/AutoComplete/__changelog__/index.zh-CN.md @@ -0,0 +1,55 @@ +## 2.15.3 + +2021-05-21 + +### 🆎 TypeScript + +- 完善 `AutoComplete` 组件 `onChange/onSelect` 中的 `option` 参数类型。 + + + +## 2.10.0 🏮 + +2020-02-26 + +### 🆕 Feature + +- `AutoComplete` 组件新增 `inputProps` 和 `loading` 属性。 + +## 2.9.1 + +2021-02-20 + +### 🐛 Bugfix + +- 修复 `AutoComplete` 组件 `triggerProps.popupVisible` 未生效的 bug。 +- 修复 `AutoComplete` 组件 `onBlur` 回调在下拉框隐藏之前被触发的 bug。 + +## 2.8.1 + +2021-01-28 + +### 🐛 Bugfix + +- 修复 `AutoComplete` 输入改变后再次点击同一个 value 的选项，不能触发 `onChange` 的 bug。 + +## 2.3.0 + +2020-11-27 + +### 🐛 Bugfix + +- 修复 `AutoComplete` 组件 `onSelect` 回调第二个参数无法获得 `data` 中传入的自定义数据的 bug。 + +## 2.2.0 + +2020-11-20 + +### 🆕 Feature + +- `AutoComplete` 组件新增 `virtualListProps` 属性以支持配置虚拟列表。 + +### 🐛 Bugfix + +- 修复 `AutoComplete` 组件无法获得其 `ref` 的 bug。 + diff --git a/components/AutoComplete/__demo__/advance.md b/components/AutoComplete/__demo__/advance.md new file mode 100644 index 0000000000..96d0f8629e --- /dev/null +++ b/components/AutoComplete/__demo__/advance.md @@ -0,0 +1,48 @@ +--- +order: 4 +title: + zh-CN: 复杂用法 + en-US: Advance +--- + +## zh-CN + +这个示例展示了：`1. 添加Tooltip`, `2. 自定义显示`, `3. 对值进行操控`。 + +## en-US + +This example shows: `1. Add Tooltip`, `2. Custom display`, `3. Manipulate values`. + +```js +import { useState } from 'react'; +import { AutoComplete, Tooltip } from '@arco-design/web-react'; + +function Demo() { + const [value, setValue] = useState('Beijing'); + + return ( + + { + setValue(value); + }} + onBlur={() => { + setValue((value) => (value === 'Beijing' ? value : '')); + }} + style={{ width: 154 }} + /> + + ); +} + +ReactDOM.render(, CONTAINER); +``` diff --git a/components/AutoComplete/__demo__/basic.md b/components/AutoComplete/__demo__/basic.md new file mode 100644 index 0000000000..9b6d19672b --- /dev/null +++ b/components/AutoComplete/__demo__/basic.md @@ -0,0 +1,37 @@ +--- +order: 0 +title: + zh-CN: 基础用法 + en-US: Basic +--- + +## zh-CN + +根据当前输入展示输入建议（下拉选择）。 + +## en-US + +Show input suggestions based on current input (drop-down selection). + +```js +import { useState } from 'react'; +import { AutoComplete } from '@arco-design/web-react'; + +function Demo() { + const [data, setData] = useState([]); + const handleSearch = (inputValue) => { + setData(inputValue ? new Array(5).fill(null).map((_, index) => `${inputValue}_${index}`) : []); + }; + + return ( + + ); +} + +ReactDOM.render(, CONTAINER); +``` diff --git a/components/AutoComplete/__demo__/custom-input.md b/components/AutoComplete/__demo__/custom-input.md new file mode 100644 index 0000000000..4c88508fb6 --- /dev/null +++ b/components/AutoComplete/__demo__/custom-input.md @@ -0,0 +1,44 @@ +--- +order: 2 +title: + zh-CN: 自定义输入组件 + en-US: Custom input +--- + +## zh-CN + +支持自定义输入组件。 + +## en-US + +Support custom input components. + +```js +import { useState } from 'react'; +import { AutoComplete, Input } from '@arco-design/web-react'; + +const { TextArea } = Input; + +function Demo() { + const [data, setData] = useState([]); + const handleSearch = (inputValue) => { + setData( + inputValue && inputValue.trim() + ? new Array(5).fill(null).map((_, index) => `${inputValue}_${index}`) + : [] + ); + }; + + return ( + } + placeholder="Customize this with your words" + onSearch={handleSearch} + /> + ); +} + +ReactDOM.render(, CONTAINER); +``` diff --git a/components/AutoComplete/__demo__/options.md b/components/AutoComplete/__demo__/options.md new file mode 100644 index 0000000000..f496a4a433 --- /dev/null +++ b/components/AutoComplete/__demo__/options.md @@ -0,0 +1,42 @@ +--- +order: 1 +title: + zh-CN: 自定义选项 + en-US: Options +--- + +## zh-CN + +可以传入 `AutoComplete.Option` 作为组件的 `children`，而非使用 `data`。 + +## en-US + +Pass in `AutoComplete.Option` as the `children` of the component instead of using `data`. + +```js +import { useState } from 'react'; +import { AutoComplete } from '@arco-design/web-react'; + +const { Option } = AutoComplete; + +function Demo() { + const [options, setOptions] = useState([]); + const handleSearch = (inputValue) => { + setOptions( + inputValue ? new Array(5).fill(null).map((_, index) => `${inputValue}_${index}`) : [] + ); + }; + + return ( + + {options.map((option) => ( + + ))} + + ); +} + +ReactDOM.render(, CONTAINER); +``` diff --git a/components/AutoComplete/__demo__/strict.md b/components/AutoComplete/__demo__/strict.md new file mode 100644 index 0000000000..448d2242ac --- /dev/null +++ b/components/AutoComplete/__demo__/strict.md @@ -0,0 +1,32 @@ +--- +order: 3 +title: + zh-CN: 区分大小写 + en-US: Strict mode +--- + +## zh-CN + +使用 `strict=true` 来指明在匹配时严格区分大小写。 + +## en-US + +Use `strict=true` to enable case-sensitive matching for options. + +```js +import { AutoComplete } from '@arco-design/web-react'; + +const data = ['beijing', 'beihai', 'baoding']; + +ReactDOM.render( +
+ +
, + CONTAINER +); +``` diff --git a/components/AutoComplete/__demo__/with-group.md b/components/AutoComplete/__demo__/with-group.md new file mode 100644 index 0000000000..bbfcd9cf78 --- /dev/null +++ b/components/AutoComplete/__demo__/with-group.md @@ -0,0 +1,59 @@ +--- +order: 5 +title: + zh-CN: 查询模式 确定类目 + en-US: With group +--- + +## zh-CN + +根据查询结果补全输入内容（确定类目）。 + +## en-US + +Complete the input according to the query result (with group). + +```js +import { useState } from 'react'; +import { AutoComplete, Input } from '@arco-design/web-react'; + +const { OptGroup, Option } = AutoComplete; + +function Demo() { + const [data, setData] = useState([]); + const handleSearch = (inputValue) => { + if (inputValue) { + setData( + ['Group-1', 'Group-2', 'Group-3'].map((groupName, outerIndex) => ( + + {new Array(3).fill(null).map((_, innerIndex) => { + const value = `${inputValue}-${outerIndex + 1}-${innerIndex + 1}`; + return ( + + ); + })} + + )) + ); + } else { + setData([]); + } + }; + + return ( +
+ } + onSearch={handleSearch} + /> +
+ ); +} + +ReactDOM.render(, CONTAINER); +``` diff --git a/components/AutoComplete/__demo__/without-group.md b/components/AutoComplete/__demo__/without-group.md new file mode 100644 index 0000000000..0d2efeec15 --- /dev/null +++ b/components/AutoComplete/__demo__/without-group.md @@ -0,0 +1,56 @@ +--- +order: 6 +title: + zh-CN: 查询模式 不确定类目 + en-US: Without group +--- + +## zh-CN + +根据查询结果补全输入内容（不确定类目）。 + +## en-US + +Complete the input according to the query result (without group). + +```js +import { useState } from 'react'; +import { AutoComplete, Input } from '@arco-design/web-react'; + +const { Option } = AutoComplete; + +function Demo() { + const [data, setData] = useState([]); + const handleSearch = (inputValue) => { + if (inputValue) { + setData( + new Array(3).fill(null).map((_, index) => { + const value = `${inputValue}-${index + 1}`; + return ( + + ); + }) + ); + } else { + setData([]); + } + }; + + return ( +
+ } + onSearch={handleSearch} + /> +
+ ); +} + +ReactDOM.render(, CONTAINER); +``` diff --git a/components/AutoComplete/__template__/index.en-US.md b/components/AutoComplete/__template__/index.en-US.md new file mode 100644 index 0000000000..179f771e84 --- /dev/null +++ b/components/AutoComplete/__template__/index.en-US.md @@ -0,0 +1,25 @@ +--- +file: interface +--- + +````` +Component / Data Entry + +# AutoComplete + +An input box or custom input control, with enhanced automatic completion functionality. +````` + +%%Content%% + +## API + +%%Props%% + +### AutoComplete.Option + +Same as `Select.Option`, refer to [Select](/react/en-US/components/select). + +### AutoComplete.OptGroup + +Same as `Select.OptGroup`, refer to [Select](/react/en-US/components/select). diff --git a/components/AutoComplete/__template__/index.zh-CN.md b/components/AutoComplete/__template__/index.zh-CN.md new file mode 100644 index 0000000000..22862f7980 --- /dev/null +++ b/components/AutoComplete/__template__/index.zh-CN.md @@ -0,0 +1,25 @@ +--- +file: interface +--- + +````` +组件 / 数据输入 + +# 自动补全 AutoComplete + +输入框或自定义输入控件的自动补全功能。 +````` + +%%Content%% + +## API + +%%Props%% + +### AutoComplete.Option + +同 `Select.Option`, 参考 [Select 文档](/react/components/select) 。 + +### AutoComplete.OptGroup + +同 `Select.OptGroup`, 参考 [Select 文档](/react/components/select) 。 diff --git a/components/AutoComplete/__test__/__snapshots__/demo.test.ts.snap b/components/AutoComplete/__test__/__snapshots__/demo.test.ts.snap new file mode 100644 index 0000000000..b9d641f528 --- /dev/null +++ b/components/AutoComplete/__test__/__snapshots__/demo.test.ts.snap @@ -0,0 +1,203 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders AutoComplete/demo/advance.md correctly 1`] = ` +
+ + + + + + + + +
+`; + +exports[`renders AutoComplete/demo/basic.md correctly 1`] = ` +
+ + + + + + + + +
+`; + +exports[`renders AutoComplete/demo/custom-input.md correctly 1`] = ` + +
+
+`; + +exports[`renders Input/demo/textarea_autosize.md correctly 1`] = ` +
+
+ +
+
+ +
+
+`; diff --git a/components/Input/__test__/__snapshots__/index.test.tsx.snap b/components/Input/__test__/__snapshots__/index.test.tsx.snap new file mode 100644 index 0000000000..3a96789c1f --- /dev/null +++ b/components/Input/__test__/__snapshots__/index.test.tsx.snap @@ -0,0 +1,22 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ConfigProvider componentConfig.Input default 1`] = ` + +`; + +exports[`ConfigProvider componentConfig.Input set className globally 1`] = ` + +`; + +exports[`ConfigProvider componentConfig.Input set className globally and component set className itself. 1`] = ` + +`; diff --git a/components/Input/__test__/autoSize.test.ts b/components/Input/__test__/autoSize.test.ts new file mode 100644 index 0000000000..9b40bc4d21 --- /dev/null +++ b/components/Input/__test__/autoSize.test.ts @@ -0,0 +1,21 @@ +import autoSizeTextAreaHeight from '../autoSizeTextAreaHeight'; + +describe('Input autoSizeText', () => { + it('TODO', () => { + const textarea = document.createElement('textarea'); + const style = autoSizeTextAreaHeight(true, textarea); + expect(style.height).toBe(2); + }); + + it('TODO', () => { + const textarea = document.createElement('textarea'); + const style = autoSizeTextAreaHeight( + { + minRows: 2, + maxRows: 4, + }, + textarea + ); + expect(style.height).toBe(2); + }); +}); diff --git a/components/Input/__test__/demo.test.ts b/components/Input/__test__/demo.test.ts new file mode 100644 index 0000000000..5b4f4e7aae --- /dev/null +++ b/components/Input/__test__/demo.test.ts @@ -0,0 +1,3 @@ +import demoTest from '../../../tests/demoTest'; + +demoTest('Input'); diff --git a/components/Input/__test__/index.test.tsx b/components/Input/__test__/index.test.tsx new file mode 100644 index 0000000000..53bf9b848f --- /dev/null +++ b/components/Input/__test__/index.test.tsx @@ -0,0 +1,233 @@ +import React from 'react'; +import { mount } from 'enzyme'; +import { act } from 'react-dom/test-utils'; +import { Enter } from '../../_util/keycode'; +import mountTest from '../../../tests/mountTest'; +import componentConfigTest from '../../../tests/componentConfigTest'; +import Input from '../input'; +import { InputSearchProps } from '../search'; +import { InputProps, TextAreaProps } from '../interface'; +import { InputPasswordProps } from '../password'; + +mountTest(Input); +mountTest(Input.Search); +mountTest(Input.TextArea); +componentConfigTest(Input, 'Input'); + +function mountInput(component: React.ReactElement) { + return mount(component); +} +function mountInputSearch(component: React.ReactElement) { + return mount(component); +} +function mountInputTextArea(component: React.ReactElement) { + return mount(component); +} +function mountInputPassword(component: React.ReactElement) { + return mount(component); +} + +const getLengthString = (len: number) => { + return new Array(len).fill('1').join(''); +}; + +describe('Input', () => { + it('onChange listener correctly', () => { + const onChange = jest.fn(); + const component = mountInput(); + const input = component.find('input'); + input.simulate('change', { + target: { + value: 'Hello', + }, + }); + expect(onChange.mock.calls.length).toBe(1); + // expect(component.state().value).toBe('Hello'); + }); + + it('prefix, suffix, addBefore, addAfter correctly', () => { + const component = mountInput( + addBefore} + addAfter={addAfter} + prefix={prefix} + suffix={suffix} + placeholder="please enter..." + /> + ); + expect(component.find('.arco-input-group-addafter')).toHaveLength(1); + expect(component.find('.arco-input-group-addbefore')).toHaveLength(1); + expect(component.find('.arco-input-group-prefix')).toHaveLength(1); + expect(component.find('.arco-input-group-suffix')).toHaveLength(1); + expect(component.find('.arco-input-group-addbefore > span').text()).toBe('addBefore'); + expect(component.find('.arco-input-group-addafter > span').text()).toBe('addAfter'); + expect(component.find('.arco-input-group-prefix > span').text()).toBe('prefix'); + expect(component.find('.arco-input-group-suffix > span').text()).toBe('suffix'); + }); +}); + +describe('Test Search', () => { + it('input search (searchButton)', () => { + const onSearch = jest.fn(); + const component = mountInputSearch( + + ); + const searchButton = component.find('button'); + expect(searchButton.find('svg').hasClass('arco-icon-search')).toBe(true); + searchButton.simulate('click'); + expect(onSearch.mock.calls[0][0]).toBe('search text'); + }); + + it('input search (icon)', () => { + const onSearch = jest.fn(); + const component = mountInputSearch( + + ); + component.find('input').simulate('change'); + const iconButton = component.find('.arco-icon-search'); + iconButton.simulate('click'); + expect(onSearch.mock.calls[0][0]).toBe('custom value'); + }); +}); + +describe('Test Textarea', () => { + it('textarea', () => { + const onChange = jest.fn(); + const component = mountInputTextArea(); + const textarea = component.find('textarea'); + expect(textarea.text()).toBe(''); + act(() => { + textarea.prop('onChange')({ currentTarget: { value: 'Hello' } } as any); + }); + expect(onChange.mock.calls[0][0]).toBe('Hello'); + }); + + it('test onPressEnter', () => { + const onPressEnter = jest.fn(); + const component = mountInputTextArea(); + const textarea = component.find('textarea'); + textarea.simulate('keydown', { + keyCode: Enter.code, + }); + expect(onPressEnter.mock.calls.length).toBe(1); + }); + + it('test onClear', () => { + const onClear = jest.fn(); + const component = mountInput(); + expect( + component + .find('input') + .getDOMNode() + .getAttribute('value') + ).toBe('123'); + component.find('.arco-input-clear-icon svg').simulate('click'); + expect(onClear.mock.calls.length).toBe(1); + expect( + component + .find('input') + .getDOMNode() + .getAttribute('value') + ).toBe(''); + }); + + it('test password', () => { + const component = mountInputPassword(); + + expect(component.find('svg').hasClass('arco-icon-eye-invisible')).toBe(true); + expect( + component + .find('input') + .getDOMNode() + .getAttribute('type') + ).toBe('password'); + component.find('svg').simulate('click'); + expect(component.find('svg').hasClass('arco-icon-eye')).toBe(true); + expect( + component + .find('input') + .getDOMNode() + .getAttribute('type') + ).toBe('text'); + + component.setProps({ visibilityToggle: false }); + expect(component.find('svg')).toHaveLength(0); + }); + + it('test maxLength', () => { + const input = mount(); + const inputHtmlElement = input.find('input'); + expect(inputHtmlElement.prop('maxLength')).toEqual(10); + expect(inputHtmlElement.prop('value')).toEqual(getLengthString(10)); + + const textarea = mount(); + const textareaHtmlElement = textarea.find('textarea'); + expect(textareaHtmlElement.prop('maxLength')).toEqual(50); + expect(textareaHtmlElement.prop('value')).toEqual(getLengthString(50)); + }); + + it('test maxLength and boolean showWordLimit', () => { + const input = mount(); + const inputLimitElement = () => input.find('.arco-input-word-limit'); + expect(inputLimitElement().text()).toEqual('5/10'); + + act(() => { + input.setProps({ value: getLengthString(20) }); + }); + expect(inputLimitElement().text()).toEqual('10/10'); + + const textarea = mount( + + ); + const textareaLimitElement = () => textarea.find('.arco-textarea-word-limit'); + expect(textareaLimitElement().text()).toEqual('20/50'); + + act(() => { + textarea.setProps({ value: getLengthString(100) }); + }); + expect(textareaLimitElement().text()).toEqual('50/50'); + + act(() => { + textarea.setProps({ showWordLimit: undefined }); + input.setProps({ showWordLimit: undefined }); + }); + expect(textareaLimitElement()).toHaveLength(0); + expect(inputLimitElement()).toHaveLength(0); + }); + + it('test maxLength.errorOnly', () => { + const input = mount( + + ); + const inputLimitElement = () => input.find('.arco-input-word-limit'); + expect(inputLimitElement().text()).toEqual('20/10'); + expect(inputLimitElement().hasClass('arco-input-word-limit-error')).toBe(true); + + const textarea = mount( + + ); + const textareaLimitElement = () => textarea.find('.arco-textarea-word-limit'); + expect(textareaLimitElement().text()).toEqual('100/50'); + expect(textareaLimitElement().hasClass('arco-textarea-word-limit-error')).toBe(true); + }); +}); diff --git a/components/Input/autoSizeTextAreaHeight.tsx b/components/Input/autoSizeTextAreaHeight.tsx new file mode 100644 index 0000000000..7fa5b9a4a0 --- /dev/null +++ b/components/Input/autoSizeTextAreaHeight.tsx @@ -0,0 +1,127 @@ +// auto set textarea height +import { isObject, isNumber } from '../_util/is'; + +const mirrorTextAreaStyle = ` + position: absolute; + min-height: 0 !important; + max-height: none; + height:0; + visibility: hidden; + z-index: -100; + top: 0; + right: 0; +`; + +const mirrorTextAreaSizing = [ + 'border-width', + 'box-sizing', + 'font-family', + 'font-weight', + 'font-size', + 'font-variant', + 'letter-spacing', + 'line-height', + 'padding-top', + 'padding-bottom', + 'padding-left', + 'padding-right', + 'text-indent', + 'text-rendering', + 'text-transform', + 'width', +]; + +let mirrorTextArea: HTMLTextAreaElement; + +function setMirrorTextArea( + originTextArea: HTMLTextAreaElement +): { + paddingSize: number; + boxSizing: string; + borderSize: number; +} { + if (!mirrorTextArea) { + mirrorTextArea = document.createElement('textarea'); + document.body.appendChild(mirrorTextArea); + } + const originStyle = window.getComputedStyle(originTextArea); + const originSizingStyle = ` + ${mirrorTextAreaSizing.map((attr) => `${attr}:${originStyle.getPropertyValue(attr)}`).join(';')} + `; + mirrorTextArea.setAttribute('style', `${mirrorTextAreaStyle}${originSizingStyle}`); + const paddingSize = + parseFloat(originStyle.getPropertyValue('padding-top')) + + parseFloat(originStyle.getPropertyValue('padding-top')); + const boxSizing = originStyle.getPropertyValue('box-sizing'); + const borderSize = + parseFloat(originStyle.getPropertyValue('border-top-width')) + + parseFloat(originStyle.getPropertyValue('border-bottom-width')); + return { + paddingSize, + boxSizing, + borderSize, + }; +} + +function autoSizeTextAreaHeight( + autoSize?: boolean | { minRows?: number; maxRows?: number }, + node?: HTMLTextAreaElement +) { + const getRows = () => { + let minRows; + let maxRows; + if (isObject(autoSize)) { + minRows = (autoSize as any).minRows; + maxRows = (autoSize as any).maxRows; + } + return { + minRows, + maxRows, + }; + }; + if (autoSize) { + const { minRows, maxRows } = getRows(); + const originTextNode = node as HTMLTextAreaElement; + const { paddingSize, boxSizing, borderSize } = setMirrorTextArea(originTextNode); + mirrorTextArea.value = originTextNode.value || originTextNode.placeholder || ''; + let mirrorTextAreaHeight = mirrorTextArea.scrollHeight + borderSize; + let minHeight; + let maxHeight; + let overflowY; + if (minRows || maxRows) { + mirrorTextArea.value = ''; + const singleRowHeight = mirrorTextArea.scrollHeight - paddingSize; + if (isNumber(minRows)) { + minHeight = singleRowHeight * minRows; + if (boxSizing === 'border-box') { + minHeight += paddingSize; + minHeight += borderSize; + } + mirrorTextAreaHeight = Math.max(mirrorTextAreaHeight, minHeight); + } + if (isNumber(maxRows)) { + maxHeight = singleRowHeight * maxRows; + if (boxSizing === 'border-box') { + maxHeight += paddingSize; + maxHeight += borderSize; + } + overflowY = mirrorTextAreaHeight > maxHeight ? 'auto' : ''; + maxHeight = Math.min(mirrorTextAreaHeight, maxHeight); + } + } + const textAreaStyle: any = {}; + textAreaStyle.height = mirrorTextAreaHeight; + if (minHeight) { + textAreaStyle.minHeight = minHeight; + } + if (maxHeight) { + textAreaStyle.maxHeight = maxHeight; + } + if (overflowY) { + textAreaStyle.overflowY = overflowY; + } + return textAreaStyle; + } +} + +export default autoSizeTextAreaHeight; diff --git a/components/Input/group.tsx b/components/Input/group.tsx new file mode 100644 index 0000000000..04ed56afd7 --- /dev/null +++ b/components/Input/group.tsx @@ -0,0 +1,32 @@ +import React, { useContext, PropsWithChildren } from 'react'; +import cs from '../_util/classNames'; +import { ConfigContext } from '../ConfigProvider'; +import { InputGroupProps } from './interface'; + +const Group = React.forwardRef>( + (props: PropsWithChildren, ref) => { + const { getPrefixCls } = useContext(ConfigContext); + + const { className, style, children, compact, ...rest } = props; + const prefixCls = getPrefixCls('input-group'); + const classNames = cs( + prefixCls, + { + [`${prefixCls}-compact`]: compact, + }, + className + ); + + return ( +
+ {children} +
+ ); + } +); + +Group.displayName = 'InputGroup'; + +export default Group; + +export { InputGroupProps }; diff --git a/components/Input/index.tsx b/components/Input/index.tsx new file mode 100644 index 0000000000..9a7a63fdba --- /dev/null +++ b/components/Input/index.tsx @@ -0,0 +1,9 @@ +import Input from './input'; + +import { InputProps, TextAreaProps } from './interface'; +import { InputPasswordProps } from './password'; +import { InputSearchProps } from './search'; + +export { InputProps, TextAreaProps, InputPasswordProps, InputSearchProps }; + +export default Input; diff --git a/components/Input/input-element.tsx b/components/Input/input-element.tsx new file mode 100644 index 0000000000..9eb30b86e1 --- /dev/null +++ b/components/Input/input-element.tsx @@ -0,0 +1,208 @@ +import React, { useState, useRef, useImperativeHandle, useEffect } from 'react'; +import { InputComponentProps, RefInputType } from './interface'; +import cs from '../_util/classNames'; +import omit from '../_util/omit'; +import { Enter } from '../_util/keycode'; +import ResizeObserver from '../_util/resizeObserver'; +import IconClose from '../../icon/react-icon/IconClose'; +import IconHover from '../_class/icon-hover'; +import { isObject } from '../_util/is'; + +const InputComponent = React.forwardRef( + (props: InputComponentProps, ref) => { + const isComposition = useRef(false); + const [compositionValue, setCompositionValue] = useState(''); + const refInput = useRef(); + const refInputMirror = useRef(); + const refPrevInputWidth = useRef(null); + + const { + allowClear, + error, + disabled, + placeholder, + className, + style, + height, + prefixCls, + hasParent, + size, + value, + autoFitWidth, + onClear, + onValueChange, + maxLength, + ...rest + } = props; + const otherProps = omit(rest, [ + 'showWordLimit', + 'className', + 'defaultValue', + 'addBefore', + 'addAfter', + 'afterStyle', + 'beforeStyle', + 'onKeyDown', + 'onPressEnter', + 'prefix', + 'suffix', + ]); + const inputClassNames = cs( + prefixCls, + prefixCls && { + [`${prefixCls}-size-${size}`]: size, + [`${prefixCls}-error`]: error, + [`${prefixCls}-disabled`]: disabled, + }, + hasParent ? undefined : className + ); + + useImperativeHandle( + ref, + () => { + return { + dom: refInput.current, + focus: () => { + refInput.current && refInput.current.focus && refInput.current.focus(); + }, + blur: () => { + refInput.current && refInput.current.blur && refInput.current.blur(); + }, + }; + }, + [] + ); + + const updateInputWidth = () => { + if (refInputMirror.current && refInput.current) { + const width = refInputMirror.current.offsetWidth; + refInput.current.style.width = `${width + (width ? 8 : 4)}px`; + } + }; + + // 设定 初始宽度，之后的更新交由 ResizeObserver 触发 + useEffect(() => autoFitWidth && updateInputWidth(), []); + + const trueMaxLength = isObject(maxLength) ? maxLength.length : maxLength; + const mergedMaxLength = isObject(maxLength) && maxLength.errorOnly ? undefined : trueMaxLength; + + const onChange: React.ChangeEventHandler = (e: any) => { + const newValue = e.target.value; + if (!isComposition.current) { + if (!onValueChange) { + return; + } + + if (mergedMaxLength) { + if (newValue.length <= trueMaxLength) { + onValueChange(newValue, e); + } + } else { + onValueChange(newValue, e); + } + } else { + setCompositionValue(newValue); + } + }; + + // 处理中文输入 + const onComposition = (e) => { + if (e.type === 'compositionend') { + isComposition.current = false; + setCompositionValue(undefined); + onValueChange && onValueChange(e.target.value, e); + } else { + isComposition.current = true; + } + }; + + const onKeyDown = (e) => { + const { onKeyDown, onPressEnter } = props; + const keyCode = e.keyCode || e.which; + + if (isComposition.current) { + return; + } + + onKeyDown && onKeyDown(e); + if (keyCode === Enter.code) { + onPressEnter && onPressEnter(e); + } + }; + + const inputProps = { + ...otherProps, + maxLength: mergedMaxLength, + value: compositionValue || value || '', + disabled, + placeholder, + onChange, + onKeyDown, + className: inputClassNames, + onCompositionStart: onComposition, + onCompositionUpdate: onComposition, + onCompositionEnd: onComposition, + }; + + const mirrorValue = inputProps.value || placeholder; + + return ( + <> + {allowClear ? ( + <> + + {!disabled && allowClear && value ? ( + + { + e.stopPropagation(); + if (refInput.current && refInput.current.focus) { + refInput.current.focus(); + } + onValueChange && onValueChange('', e); + onClear && onClear(); + }} + // keep focus status + onMouseDown={(e) => { + e.preventDefault(); + }} + /> + + ) : null} + + ) : ( + + )} + {autoFitWidth && ( + { + const inputWidth = refInputMirror.current.offsetWidth; + if (typeof autoFitWidth === 'object') { + const delay = + typeof autoFitWidth.delay === 'function' + ? autoFitWidth.delay(inputWidth, refPrevInputWidth.current) + : autoFitWidth.delay; + delay ? setTimeout(updateInputWidth, delay) : updateInputWidth(); + } else { + updateInputWidth(); + } + refPrevInputWidth.current = inputWidth; + }} + > + + {mirrorValue && mirrorValue.replace(/\s/g, '\u00A0')} + + + )} + + ); + } +); + +InputComponent.displayName = 'InputComponent'; + +export default InputComponent; diff --git a/components/Input/input.tsx b/components/Input/input.tsx new file mode 100644 index 0000000000..79a6d4b31e --- /dev/null +++ b/components/Input/input.tsx @@ -0,0 +1,224 @@ +import React, { + useContext, + useState, + useRef, + useImperativeHandle, + ForwardRefExoticComponent, + useMemo, +} from 'react'; +import { InputProps, RefInputType } from './interface'; +import cs from '../_util/classNames'; +import Search from './search'; +import TextArea from './textarea'; +import Password from './password'; +import { ConfigContext } from '../ConfigProvider'; +import { isUndefined, isString, isObject } from '../_util/is'; +import useMergeValue from '../_util/hooks/useMergeValue'; +import InputComponent from './input-element'; +import Group from './group'; +import { contains } from '../_util/dom'; +import useMergeProps from '../_util/hooks/useMergeProps'; + +const keepFocus = (e) => { + e.target.tagName !== 'INPUT' && e.preventDefault(); +}; + +const inputAddon = ( + className: string, + node: React.ReactNode, + style: object = {}, + onClick?: (e) => void +): React.ReactNode | null => { + return node ? ( + + {node} + + ) : null; +}; + +export function formatValue(value, maxLength) { + const str = + value !== null && !isUndefined(value) && !isString(value) ? String(value) : value || ''; + if (maxLength) { + return str.slice(0, maxLength); + } + return str; +} + +function Input(baseProps: InputProps, ref) { + const { getPrefixCls, size: ctxSize, componentConfig } = useContext(ConfigContext); + const props = useMergeProps(baseProps, {}, componentConfig?.Input); + const { + className, + style, + addBefore, + addAfter, + suffix, + prefix, + beforeStyle, + afterStyle, + height, + disabled, + maxLength, + showWordLimit, + allowClear, + } = props; + + const trueMaxLength = isObject(maxLength) ? maxLength.length : maxLength; + const mergedMaxLength = isObject(maxLength) && maxLength.errorOnly ? undefined : trueMaxLength; + + const [focus, setFocus] = useState(false); + const inputRef = useRef(); + const inputWrapperRef = useRef(); + const [value, setValue] = useMergeValue('', { + defaultValue: + 'defaultValue' in props ? formatValue(props.defaultValue, mergedMaxLength) : undefined, + value: 'value' in props ? formatValue(props.value, mergedMaxLength) : undefined, + }); + + useImperativeHandle(ref, () => inputRef.current, []); + + const onChange = (value, e) => { + if (!('value' in props)) { + setValue(value); + } + props.onChange && props.onChange(value, e); + }; + + const prefixCls = getPrefixCls('input'); + const size = props.size || ctxSize; + const isCustomHeight = 'height' in props; + let suffixElement = suffix; + const valueLength = value ? value.length : 0; + + const lengthError = useMemo(() => { + if (!mergedMaxLength && trueMaxLength) { + return valueLength > trueMaxLength; + } + return false; + }, [valueLength, trueMaxLength, mergedMaxLength]); + + if (trueMaxLength && showWordLimit) { + suffixElement = ( + + {valueLength}/{trueMaxLength} + + ); + } + + const classnames = cs( + `${prefixCls}-group-wrapper`, + `${prefixCls}-group-wrapper-${size}`, + { + [`${prefixCls}-custom-height`]: isCustomHeight, + [`${prefixCls}-has-suffix`]: suffixElement, + [`${prefixCls}-group-wrapper-disabled`]: disabled, + }, + className + ); + + const needWrapper = addBefore || addAfter || suffixElement || prefix; + const inputElement = ( + { + setFocus(true); + props.onFocus && props.onFocus(e); + }} + onBlur={(e) => { + setFocus(false); + props.onBlur && props.onBlur(e); + }} + prefixCls={prefixCls} + value={value} + onValueChange={onChange} + hasParent={!!needWrapper || allowClear} + size={size} + /> + ); + + const innerWrapperClassnames = cs(`${prefixCls}-inner-wrapper`, { + [`${prefixCls}-inner-wrapper-error`]: props.error || lengthError, + [`${prefixCls}-inner-wrapper-disabled`]: disabled, + [`${prefixCls}-inner-wrapper-focus`]: focus, + [`${prefixCls}-inner-wrapper-has-prefix`]: prefix, + [`${prefixCls}-inner-wrapper-${size}`]: size, + [`${prefixCls}-clear-wrapper`]: allowClear, + }); + + return needWrapper ? ( +
+ + {inputAddon(`${prefixCls}-group-addbefore`, addBefore, beforeStyle)} + { + // 直接的点击input的时候，不阻止默认行为，避免无法选中输入框里的输入文本 + if ((e.target as HTMLElement).tagName !== 'INPUT') { + // 当使用React.Portal挂载的组件（tooltip, popover等）放在prefix，suffix里是，弹层中的内容无法被选中。 + // contains 判断如果不包含在当前dom节点，则不阻止默认行为。 + if (inputWrapperRef.current && contains(inputWrapperRef.current, e.target)) { + e.preventDefault(); + } + } + }} + onClick={(e) => { + // 当使用React.Portal挂载的组件（tooltip, popover等）放在prefix，suffix里时，弹出层被点击时，不应该focus input。 + if (inputWrapperRef.current && contains(inputWrapperRef.current, e.target)) { + inputRef.current && inputRef.current.focus(); + } + }} + > + {inputAddon(`${prefixCls}-group-prefix`, prefix)} + {inputElement} + {inputAddon(`${prefixCls}-group-suffix`, suffixElement)} + + {inputAddon(`${prefixCls}-group-addafter`, addAfter, afterStyle)} + +
+ ) : allowClear ? ( + { + inputRef.current && inputRef.current.focus(); + }} + > + {inputElement} + + ) : ( + inputElement + ); +} + +type InputRefType = ForwardRefExoticComponent> & { + Search: typeof Search; + TextArea: typeof TextArea; + Password: typeof Password; + Group: typeof Group; +}; + +const InputElement: InputRefType = React.forwardRef( + Input +) as InputRefType; + +InputElement.displayName = 'Input'; + +InputElement.Search = Search; + +InputElement.TextArea = TextArea; + +InputElement.Password = Password; + +InputElement.Group = Group; + +export type InputRef = InputRefType; + +export default InputElement; diff --git a/components/Input/interface.tsx b/components/Input/interface.tsx new file mode 100644 index 0000000000..c215c8dff0 --- /dev/null +++ b/components/Input/interface.tsx @@ -0,0 +1,280 @@ +import { ReactNode, CSSProperties, InputHTMLAttributes, TextareaHTMLAttributes } from 'react'; + +import { Omit } from '../_util/type'; + +/** + * @title Input + * @zh **Input 接受所有原生的属性值** + * @en **Input Accept all native attribute values** + */ +export interface InputProps + extends Omit< + InputHTMLAttributes, + 'onChange' | 'prefix' | 'className' | 'size' | 'height' | 'maxLength' + > { + style?: CSSProperties; + className?: string | string[]; + /** + * @zh 允许清空输入框 + * @en Whether allow clear value + */ + allowClear?: boolean; + /** + * @zh 是否禁用 + * @en Whether the input is disabled + */ + disabled?: boolean; + /** + * @zh 是否只读 + * @en Whether the input is readOnly + */ + readOnly?: boolean; + /** + * @zh 默认值 + * @en The initial input content + */ + defaultValue?: string; + /** + * @zh 输入框提示文字 + * @en Input box prompt text + */ + placeholder?: string; + /** + * @zh 是否是错误状态 + * @en Whether the input is error + */ + error?: boolean; + /** + * @zh 输入时的回调 + * @en Callback when user input + */ + onChange?: (value: string, e) => void; + /** + * @zh 点击清除按钮的回调 + * @en Callback when click clear button + */ + onClear?: () => void; + /** + * @zh 按下回车键的回调 + * @en Callback when press enter key + */ + onPressEnter?: (e) => void; + /** + * @zh 输入框前添加元素 + * @en The label text displayed before (on the left side of) the input field + */ + addBefore?: ReactNode; + /** + * @zh 输入框后添加元素 + * @en The label text displayed after (on the right side of) the input field + */ + addAfter?: ReactNode; + /** + * @zh 添加前缀文字或者图标 + * @en The prefix icon or text for the Input + */ + prefix?: ReactNode; + /** + * @zh 添加后缀文字或者图标 + * @en The suffix icon or text for the Input + */ + suffix?: ReactNode; + /** + * @zh 输入框的值，受控模式 + * @en The input content value + */ + value?: string; + /** + * @zh 输入框前添加元素的样式 + * @en The additional css style of the `addBefore` element + */ + beforeStyle?: object; + /** + * @zh 输入框后添加元素的样式 + * @en The additional css style of the `addAfter` element + */ + afterStyle?: object; + /** + * @zh 输入框的尺寸 + * @en The size of the input box + * @defaultValue default + */ + size?: 'mini' | 'small' | 'default' | 'large'; + /** + * @zh 自定义输入框高度 + * @en Custom input height + */ + height?: number | string; + /** + * @zh 输入框最大输入的长度；设置 `errorOnly`为 `true` 后，超过 `maxLength` 会展示 `error` 状态，并不限制用户输入。 + * @en The max content length；After setting `errorOnly` to `true`, if `maxLength` is exceeded, the `error` status will be displayed, and user input will not be restricted. + * @version `errorOnly` in 2.23.0 + */ + maxLength?: number | { length: number; errorOnly?: boolean }; + /** + * @zh 配合 `maxLength`，显示字数统计 + * @en With `maxLength`, Show word count. + */ + showWordLimit?: boolean; +} + +/** + * @title Input.TextArea + */ +export interface TextAreaProps + extends Omit< + TextareaHTMLAttributes, + 'onChange' | 'className' | 'maxLength' + > { + style?: CSSProperties; + /** + * @zh 开启字数统计之后，会在 `textarea` 标签外包一层 `div`，`wrapperStyle` 用来配置这个 `div` 的样式。 + * @en With `showWordLimit`, a `div` will be outside the `textarea` tag, and `wrapperStyle` is used to configure the style of it. + */ + wrapperStyle?: CSSProperties; + className?: string | string[]; + /** + * @zh 是否禁用 + * @en Whether the textarea is disabled + */ + disabled?: boolean; + /** + * @zh 默认值 + * @en To set default value + */ + defaultValue?: string; + /** + * @zh 值 + * @en To set value + */ + value?: string; + /** + * @zh 是否自动调整输入框的高度 + * @en Height autoSize feature + */ + autoSize?: boolean | { minRows?: number; maxRows?: number }; + /** + * @zh 是否是错误状态 + * @en Whether the textarea is error + */ + error?: boolean; + /** + * @zh 输入框提示文字 + * @en textarea placeholder + */ + placeholder?: string; + /** + * @zh 输入时的回调 + * @en Callback when user input + */ + onChange?: (value: string, e) => void; + /** + * @zh 按下回车键的回调 + * @en Callback when press enter key + */ + onPressEnter?: (e) => void; + /** + * @zh 输入框最大输入的长度；设置 `errorOnly`为 `true` 后，超过 `maxLength` 会展示 `error` 状态，并不限制用户输入。 + * @en The max content length；After setting `errorOnly` to `true`, if `maxLength` is exceeded, the `error` status will be displayed, and user input will not be restricted. + * @version `errorOnly` in 2.23.0 + */ + maxLength?: number | { length: number; errorOnly?: boolean }; + showWordLimit?: boolean; + /** + * @zh 允许清空输入框 + * @en Whether allow clear the content + * @version 2.2.0 + */ + allowClear?: boolean; + /** + * @zh 点击清除按钮的回调 + * @en Callback when click clear button + * @version 2.2.0 + */ + onClear?: () => void; +} + +/** + * @title Input.Group + */ +export interface InputGroupProps { + style?: CSSProperties; + className?: string | string[]; + /** + * @zh 是否使用紧凑模式 + * @en Whether to use compact mode + */ + compact?: boolean; +} + +/** + * @title Input.Search + * @zh 包含 Input 组件所有参数 + * @en Contains all the parameters of the Input component + * @notExtends + */ +export interface InputSearchProps extends InputProps { + /** + * @zh 搜索时展示加载状态 + * @en Show loading status when searching + * @version 2.6.0 + */ + loading?: boolean; + /** + * @zh 点击搜索按钮的回调 + * @en Callback when click search button + */ + onSearch?: (value: string) => void; + /** + * @zh 搜索按钮 + * @en Search button + * @version `ReactNode` in 2.6.0 + */ + searchButton?: boolean | ReactNode; +} + +/** + * @title Input.Password + * @zh 包含 Input 组件所有参数 + * @en Contains all the parameters of the Input component + * @notExtends + */ +export interface InputPasswordProps extends InputProps { + /** + * @zh 是否显示切换密码可见状态的按钮 + * @en Whether to display the button to switch the visible state of the password + */ + visibilityToggle?: boolean; + /** + * @zh 初始是否显示 + * @en To set default visibility + */ + defaultVisibility?: boolean; + /** + * @zh 是否显示 + * @zh To set visibility + */ + visibility?: boolean; + /** + * @zh visibility 改变时触发 + * @en Callback when visibility changes + */ + onVisibilityChange?: (visibility: boolean) => void; +} + +export interface InputComponentProps extends InputProps { + prefixCls?: string; + onValueChange?: InputProps['onChange']; + hasParent?: boolean; + // input 随输入文本的宽度变化 + autoFitWidth?: boolean | { delay: number | ((width: number, prevWidth: number) => number) }; +} + +export type RefInputType = { + /** 使输入框失去焦点 */ + blur: () => void; + /** 使输入框获取焦点 */ + focus: () => void; + /** input dom元素 */ + dom: HTMLInputElement; +}; diff --git a/components/Input/password.tsx b/components/Input/password.tsx new file mode 100644 index 0000000000..bed6015f34 --- /dev/null +++ b/components/Input/password.tsx @@ -0,0 +1,74 @@ +import React, { useContext } from 'react'; +import { InputPasswordProps, RefInputType } from './interface'; +import cs from '../_util/classNames'; +import Input from './input'; +import IconEye from '../../icon/react-icon/IconEye'; +import IconEyeInvisible from '../../icon/react-icon/IconEyeInvisible'; +import { ConfigContext } from '../ConfigProvider'; +import useMergeValue from '../_util/hooks/useMergeValue'; +import omit from '../_util/omit'; + +const Password = React.forwardRef( + (props: InputPasswordProps, ref) => { + const [visibility, setVisibility] = useMergeValue(false, { + defaultValue: props.defaultVisibility, + value: props.visibility, + }); + const { getPrefixCls } = useContext(ConfigContext); + const { className, visibilityToggle, onVisibilityChange, ...rest } = props; + + const prefixCls = getPrefixCls('input-password'); + const classNames = cs( + prefixCls, + { + [`${prefixCls}-visibility`]: visibilityToggle, + }, + className + ); + + const onClickVisibility = (v: boolean) => { + if (!('visibility' in props)) { + setVisibility(v); + } + onVisibilityChange && onVisibilityChange(v); + }; + + let icon = props.suffix; + + if (visibilityToggle) { + const IconProps = { + onClick: () => onClickVisibility(!visibility), + // 预防focus丢失 + onMouseDown: (e) => e.preventDefault(), + onMouseUp: (e) => e.preventDefault(), + }; + + if (props.suffix) { + icon = {props.suffix}; + } else { + const IconComponent = visibility ? IconEye : IconEyeInvisible; + + icon = ; + } + } + + return ( + + ); + } +); + +Password.displayName = 'Password'; + +Password.defaultProps = { + visibilityToggle: true, +}; +export default Password; + +export { InputPasswordProps }; diff --git a/components/Input/search.tsx b/components/Input/search.tsx new file mode 100644 index 0000000000..a2da98a26a --- /dev/null +++ b/components/Input/search.tsx @@ -0,0 +1,84 @@ +import React, { useContext } from 'react'; +import { RefInputType, InputSearchProps } from './interface'; +import cs from '../_util/classNames'; +import Input, { formatValue } from './input'; +import Button from '../Button'; +import IconSearch from '../../icon/react-icon/IconSearch'; +import omit from '../_util/omit'; +import { ConfigContext } from '../ConfigProvider'; +import useMergeValue from '../_util/hooks/useMergeValue'; +import IconLoading from '../../icon/react-icon/IconLoading'; + +const Search = React.forwardRef((props: InputSearchProps, ref) => { + const { getPrefixCls } = useContext(ConfigContext); + + const [value, setValue] = useMergeValue('', { + defaultValue: + 'defaultValue' in props ? formatValue(props.defaultValue, props.maxLength) : undefined, + value: 'value' in props ? formatValue(props.value, props.maxLength) : undefined, + }); + + const { + className, + style, + placeholder, + disabled, + searchButton, + loading, + defaultValue, + ...rest + } = props; + const prefixCls = getPrefixCls('input-search'); + const classNames = cs( + prefixCls, + { + [`${prefixCls}-button`]: searchButton, + }, + className + ); + + const onSearch = (e) => { + !disabled && props.onSearch && props.onSearch(value); + props.onPressEnter && props.onPressEnter(e); + }; + + return ( + } + > + {searchButton !== true && searchButton} + + ) : null + } + suffix={!searchButton && (loading ? : )} + onChange={(value, e) => { + setValue(value); + props.onChange && props.onChange(value, e); + }} + defaultValue={defaultValue} + onPressEnter={onSearch} + /> + ); +}); + +Search.displayName = 'Search'; + +export default Search; + +export { InputSearchProps }; diff --git a/components/Input/style/index.less b/components/Input/style/index.less new file mode 100644 index 0000000000..a9564b7874 --- /dev/null +++ b/components/Input/style/index.less @@ -0,0 +1,385 @@ +@import '../../style/mixin.less'; +@import './token.less'; + +@input-prefix-cls: ~'@{prefix}-input'; + +.get-padding(@input-size-height, @input-font-size) { + padding-top: ( + round( + ((@input-size-height - @input-border-width * 2 - @line-height-base * @input-font-size) / 2) + ) + ); + padding-bottom: round( + ((@input-size-height - @input-border-width * 2 - @line-height-base * @input-font-size) / 2) + ); +} + +.disabled-style() { + background-color: @input-color-bg_disabled; + cursor: not-allowed; + color: @input-color-text_disabled; + -webkit-text-fill-color: @input-color-text_disabled; + border-color: @input-color-border_disabled; + + &:hover { + border-color: @input-color-border_disabled; + background-color: @input-color-bg_disabled; + color: @input-color-text_disabled; + } + + &::placeholder { + color: @input-color-text_disabled; + } +} + +.input-style() { + outline: none; + -webkit-appearance: none; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + width: 100%; + border-radius: @input-border-radius; + color: @input-color-text; + padding-left: @input-padding-horizontal; + padding-right: @input-padding-horizontal; + font-size: @input-size-default-font-size; + box-sizing: border-box; + transition: color @transition-duration-1 @transition-timing-function-linear, + border-color @transition-duration-1 @transition-timing-function-linear, + background-color @transition-duration-1 @transition-timing-function-linear; + border: @input-border-width solid @input-color-border; + background-color: @input-color-bg; + + &::placeholder { + color: @input-color-placeholder-text; + } + + &:hover { + background-color: @input-color-bg_hover; + border-color: @input-color-border_hover; + } + + &:focus, + &&-focus { + border-color: @input-color-border_focus; + background-color: @input-color-bg_focus; + box-shadow: 0 0 0 @input-size-shadow_focus @input-color-shadow_focus; + } + + &-error { + border-color: @input-color-border_error; + background-color: @input-color-bg_error; + + &:hover { + border-color: @input-color-border_error_hover; + background-color: @input-color-bg_error_hover; + } + } + + &-error:focus, + &-error&-focus { + border-color: @input-color-border_error_focus; + background-color: @input-color-bg_error_focus; + box-shadow: 0 0 0 @input-size-shadow_error_focus @input-color-shadow_error_focus; + } +} + +.@{input-prefix-cls} { + .get-padding(@input-size-default-height, @input-size-default-font-size); + + line-height: @line-height-base; + .input-style(); + + // 禁用样式 + &-disabled { + .disabled-style(); + } + + input:disabled { + color: @input-color-text_disabled; + opacity: 1; + -webkit-text-fill-color: @input-color-text_disabled; + } + + &-word-limit { + font-size: @input-font-tip-size; + color: @input-color-tip-text; + padding-left: @input-padding-word-limit-left; + + &-error { + color: @input-color-border_error_focus; + } + } + // 不同尺寸 + .size-height(); +} + +// 存在清除图标 +.@{input-prefix-cls}-clear-wrapper { + .@{input-prefix-cls} { + padding-right: @input-size-icon-clear + @input-padding-horizontal; + } +} + +// 清除icon +.@{input-prefix-cls}-clear-icon { + display: none; + font-size: @input-size-icon-clear; + cursor: pointer; + color: @input-color-icon-clear; + + > svg { + transition: color @transition-duration-1 @transition-timing-function-linear; + position: relative; + } +} + +.@{input-prefix-cls}-inner-wrapper { + .input-style(); + + display: inline-flex; + width: 100%; + position: relative; + align-items: center; + + .@{input-prefix-cls} { + padding-left: 0; + padding-right: 0; + border-radius: 0; + border: none; + background: none; + } + + .@{input-prefix-cls}:hover, + .@{input-prefix-cls}:focus { + background: none; + box-shadow: none; + } + + // 有前缀 + &-has-prefix > .@{input-prefix-cls}-clear-wrapper .@{input-prefix-cls}, + &-has-prefix > .@{input-prefix-cls} { + padding-left: @input-padding-horizontal; + } + + > .@{input-prefix-cls}-clear-wrapper { + height: 100%; + + .@{input-prefix-cls} { + padding-right: @input-size-icon-clear; + } + + .@{input-prefix-cls}-clear-icon { + right: @input-spacing-clear-icon-right; + } + } + + .@{input-prefix-cls}-group-prefix, + .@{input-prefix-cls}-group-suffix { + user-select: none; + white-space: nowrap; + display: inline-flex; + align-items: center; + height: 100%; + + > svg { + font-size: @input-size-default-icon-suffix-size; + } + } + + .@{input-prefix-cls}-group-prefix { + color: @input-color-prefix-text; + } + + .@{input-prefix-cls}-group-suffix { + color: @input-color-suffix-text; + } + + &-disabled { + // 禁用样式 + .disabled-style(); + + .@{input-prefix-cls}-group-prefix, + .@{input-prefix-cls}-group-suffix { + color: inherit; + } + } + + &:hover { + .@{input-prefix-cls}-clear-icon { + display: inline-block; + + & ~ .@{input-prefix-cls}-group-suffix { + margin-left: 4px; + } + } + } + + &:not(&-focus) .@{input-prefix-cls}-clear-icon:hover::before { + background-color: @input-color-icon-clear-bg_hover; + } +} + +.@{input-prefix-cls}-group { + display: table; + width: 100%; + height: 100%; + + > .@{input-prefix-cls}-inner-wrapper, + > .@{input-prefix-cls} { + border-radius: 0; + + &-focus { + border-radius: @input-border-radius; + } + } + + > :first-child { + border-top-left-radius: @input-border-radius; + border-bottom-left-radius: @input-border-radius; + } + + > :last-child { + border-top-right-radius: @input-border-radius; + border-bottom-right-radius: @input-border-radius; + } +} + +.@{input-prefix-cls}-group-addbefore, +.@{input-prefix-cls}-group-addafter { + width: 1px; + display: table-cell; + white-space: nowrap; + height: 100%; + vertical-align: middle; + box-sizing: border-box; + padding: 0 @input-padding-horizontal; + color: @input-color-addon-text; + background-color: @input-color-addon-bg; + border: 1px solid @input-color-addon-border_default; + + > svg { + font-size: @input-size-default-icon-addon-size; + } +} + +.@{input-prefix-cls}-group-addafter { + border-left: @input-border-addon-separator-width solid @input-color-addon-border; + + .addon(after, @input-size-default-height, @input-size-default-font-size); +} + +.@{input-prefix-cls}-group-addbefore { + border-right: @input-border-addon-separator-width solid @input-color-addon-border; + + .addon(before, @input-size-default-height, @input-size-default-font-size); +} + +.@{input-prefix-cls}-group-wrapper { + width: 100%; + display: inline-block; + vertical-align: top; + // height: @input-size-default-height; + + .group-size(); + + .@{input-prefix-cls}-inner-wrapper { + height: 100%; + } + + &.@{input-prefix-cls}-disabled { + cursor: not-allowed; + } +} + +.@{input-prefix-cls}-mirror { + position: absolute; + top: 0; + left: 0; + visibility: hidden; +} + +.@{prefix}-textarea { + .input-style(); + + font-size: @textarea-font-size; + vertical-align: top; + position: relative; + padding: @textarea-padding-vertical @textarea-padding-horizontal; + max-width: 100%; + min-height: @textarea-size-min-height; + height: auto; + line-height: @line-height-base; + resize: vertical; + overflow: auto; + + // 禁用样式 + &-disabled { + .disabled-style(); + } +} + +// input group compact +.@{input-prefix-cls}-group.@{input-prefix-cls}-group-compact { + // select 圆角重置 + > .@{prefix}-select { + vertical-align: unset; + + .@{prefix}-select-view { + border-radius: 0; + } + } + + > * { + border-radius: 0; + + .@{prefix}-input-group > :last-child, + .@{prefix}-input-group > :first-child { + border-radius: 0; + } + + &:not(:last-child) { + position: relative; + border-right: @input-group-border-separator-width solid @input-group-color-separator-border; + box-sizing: border-box; + } + + &:first-child, + &:first-child .@{prefix}-input-group > *:first-child { + border-top-left-radius: @input-group-border-radius_compact; + border-bottom-left-radius: @input-group-border-radius_compact; + + .@{prefix}-select { + .@{prefix}-select-view { + border-top-left-radius: @input-group-border-radius_compact; + border-bottom-left-radius: @input-group-border-radius_compact; + } + } + } + + &:last-child, + &:last-child .@{prefix}-input-group > *:last-child { + border-top-right-radius: @input-group-border-radius_compact; + border-bottom-right-radius: @input-group-border-radius_compact; + + .@{prefix}-select { + .@{prefix}-select-view { + border-top-right-radius: @input-group-border-radius_compact; + border-bottom-right-radius: @input-group-border-radius_compact; + } + } + } + } + + > .@{prefix}-input:not(:last-child) { + border-right-color: @input-group-color-separator-border; + + &:focus { + border-right-color: @input-color-border_focus; + } + } +} + +@import './size.less'; +@import './textarea.less'; +@import './search.less'; +@import './password.less'; diff --git a/components/Input/style/index.ts b/components/Input/style/index.ts new file mode 100644 index 0000000000..b7675396b5 --- /dev/null +++ b/components/Input/style/index.ts @@ -0,0 +1,3 @@ +import '../../style/index.less'; +import '../../Button/style'; +import './index.less'; diff --git a/components/Input/style/password.less b/components/Input/style/password.less new file mode 100644 index 0000000000..4711811198 --- /dev/null +++ b/components/Input/style/password.less @@ -0,0 +1,9 @@ +.@{input-prefix-cls}-password.@{input-prefix-cls}-group-wrapper { + &:not(.@{input-prefix-cls}-disabled) { + .@{input-prefix-cls}-group-suffix { + cursor: pointer; + color: @password-color-eye-icon; + font-size: @password-size-eye-icon; + } + } +} diff --git a/components/Input/style/search.less b/components/Input/style/search.less new file mode 100644 index 0000000000..93888d951c --- /dev/null +++ b/components/Input/style/search.less @@ -0,0 +1,45 @@ +.@{input-prefix-cls}-search.@{input-prefix-cls}-group-wrapper { + .@{input-prefix-cls}-group-addbefore { + transition: all @transition-duration-1 @transition-timing-function-linear; + } + + .@{input-prefix-cls}-group-addafter { + padding: 0; + border: none; + } + + .@{input-prefix-cls}-group-suffix { + color: @search-color-icon; + font-size: @search-size-icon; + } + + &:not(.@{input-prefix-cls}-disabled) { + .@{input-prefix-cls}-group-addbefore { + cursor: pointer; + color: @search-color-icon; + font-size: @search-size-icon; + } + } + + .@{input-prefix-cls}-search-btn { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + width: auto; + height: 100%; + font-size: @search-size-icon; + color: @search-button-color-text; + + &.@{prefix}-btn-icon-only { + padding-left: @search-button-padding-horizontal; + padding-right: @search-button-padding-horizontal; + } + } +} + +.@{input-prefix-cls}-search-button { + .@{input-prefix-cls}-inner-wrapper { + border-right: none; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } +} diff --git a/components/Input/style/size.less b/components/Input/style/size.less new file mode 100644 index 0000000000..4fd7cb8881 --- /dev/null +++ b/components/Input/style/size.less @@ -0,0 +1,200 @@ +// 前置后置标签 +.addon(@position, @size-height, @size-font-size) { + .item-style { + margin-top: -1px; + margin-bottom: -1px; + width: auto; + height: 100%; + + & when (@position = before) { + margin-left: -@input-padding-horizontal - 1px; + margin-right: -@input-padding-horizontal; + } + + & when (@position = after) { + margin-left: -@input-padding-horizontal; + margin-right: -@input-padding-horizontal - 1px; + } + } + + // select,input 的边角和边框 + .border-radius() { + & when (@position = before) { + border-color: transparent; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + & when (@position = after) { + border-color: transparent; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + } + + .@{prefix}-input { + .item-style(); + .border-radius(); + } + + // 作为前置/后置标签时，重写一些select的样式 + .@{prefix}-select { + .item-style(); + + .@{prefix}-select-view { + border-radius: 0; + background-color: inherit; + border-color: transparent; + } + + &.@{prefix}-select-single { + .@{prefix}-select-view { + height: 100%; + } + } + } +} + +// 不同尺寸的高度 +.size-height { + .height (@size-height, @size-font-size) { + .get-padding(@size-height, @size-font-size); + + font-size: @size-font-size; + } + + .padding-horizontal(@size) { + @padding: ~'input-size-@{size}-padding-horizontal'; + + &-group-wrapper-@{size} { + .@{input-prefix-cls}-group-addbefore, + .@{input-prefix-cls}-group-addafter { + padding-left: @@padding; + padding-right: @@padding; + } + } + + &-inner-wrapper&-inner-wrapper-@{size} { + padding-left: @@padding; + padding-right: @@padding; + } + + &-size-@{size} { + padding-left: @@padding; + padding-right: @@padding; + } + } + + &-size-mini { + line-height: 1.667; + font-size: @input-size-mini-font-size; + padding-top: ( + round(@input-size-mini-height - @input-border-width * 2 - $line-height * $font-size) / 2 + ); + padding-bottom: ( + round(@input-size-mini-height - @input-border-width * 2 - $line-height * $font-size) / 2 + ); + } + + &-size-small { + .height(@input-size-small-height, @input-size-small-font-size); + } + + &-size-large { + .height(@input-size-large-height, @input-size-large-font-size); + } + + .padding-horizontal(mini); + .padding-horizontal(small); + .padding-horizontal(large); +} + +// 不同尺寸的带有前置后置标签的高度 +.group-size { + .size-font-size (@size-input-height, @size-font-size, @suffix-icon-size, @addon-icon-size) { + .@{input-prefix-cls}-group { + font-size: @size-font-size; + } + + .@{input-prefix-cls}-inner-wrapper { + .@{input-prefix-cls}-group-prefix, + .@{input-prefix-cls}-group-suffix { + font-size: @size-font-size; + + > svg { + font-size: @suffix-icon-size; + } + } + } + + .@{input-prefix-cls}-group-addbefore, + .@{input-prefix-cls}-group-addafter { + font-size: @size-font-size; + height: @size-input-height - 2; + + > svg { + font-size: @addon-icon-size; + } + } + + .@{input-prefix-cls}-group-addafter { + .addon(after, @size-input-height, @size-font-size); + } + + .@{input-prefix-cls}-group-addbefore { + .addon(before, @size-input-height, @size-font-size); + } + } + + &&-mini { + .size-font-size( + @input-size-mini-height, + @input-size-mini-font-size, + @input-size-mini-icon-suffix-size, + @input-size-mini-icon-addon-size + ); + } + + &&-small { + .size-font-size( + @input-size-small-height, + @input-size-small-font-size, + @input-size-small-icon-suffix-size, + @input-size-small-icon-addon-size + ); + } + + &&-large { + .size-font-size( + @input-size-large-height, + @input-size-large-font-size, + @input-size-large-icon-suffix-size, + @input-size-large-icon-addon-size + ); + } + + &.@{input-prefix-cls}-custom-height { + .size-font-size( + @input-size-mini-height, + @input-size-default-font-size, + @input-size-default-icon-suffix-size, + @input-size-default-icon-addon-size + ); + + .@{input-prefix-cls}-inner-wrapper { + height: 100%; + + .@{input-prefix-cls} { + height: 100%; + } + + .@{input-prefix-cls}-clear-wrapper { + height: 100%; + + .@{input-prefix-cls} { + height: 100%; + } + } + } + } +} diff --git a/components/Input/style/textarea.less b/components/Input/style/textarea.less new file mode 100644 index 0000000000..2369f42d65 --- /dev/null +++ b/components/Input/style/textarea.less @@ -0,0 +1,42 @@ +@textarea-prefix-cls: ~'@{prefix}-textarea'; + +.@{textarea-prefix-cls}-wrapper { + display: inline-block; + position: relative; + width: 100%; +} + +.@{textarea-prefix-cls}-clear-wrapper { + &:hover { + .@{textarea-prefix-cls}-clear-icon { + display: inline-block; + } + } + .@{textarea-prefix-cls} { + padding-right: @icon-hover-size-default-height; + } +} + +.@{textarea-prefix-cls} { + + &-word-limit { + position: absolute; + font-size: @textarea-font-tip-size; + bottom: @textarea-layout-tip-bottom; + right: @textarea-layout-tip-right; + color: @textarea-color-tip-text; + user-select: none; + + &-error { + color: @input-color-border_error_focus; + } + } + + &-clear-icon { + display: none; + position: absolute; + right: @textarea-layout-tip-right; + top: @textarea-layout-top-icon-clear; + font-size: @textarea-size-icon-clear; + } +} diff --git a/components/Input/style/token.less b/components/Input/style/token.less new file mode 100644 index 0000000000..172fbec180 --- /dev/null +++ b/components/Input/style/token.less @@ -0,0 +1,119 @@ +@import '../../style/theme/default.less'; + +/******** 基础配置项 end *******/ + +// 背景色 +@input-color-bg: var(--color-fill-2); +@input-color-bg_hover: var(--color-fill-3); +@input-color-bg_focus: var(--color-bg-2); +@input-color-bg_disabled: var(--color-fill-2); +@input-color-addon-bg: @input-color-bg; + +// 边框色 +@input-color-addon-border: var(--color-neutral-3); +@input-border-addon-separator-width: @border-1; +@input-color-border_focus: @color-primary-6; +@input-color-shadow_focus: var(--color-primary-light-2); +@input-size-shadow_focus: @shadow-distance-none; +@input-color-addon-border_default: @color-transparent; + +// 文本色 +@input-color-text: var(--color-text-1); +@input-color-placeholder-text: var(--color-text-3); +@input-color-text_disabled: var(--color-text-4); + +// 默认前后标签文本色 +@input-color-addon-text: var(--color-text-1); + +// textarea color +@textarea-color-tip-text: var(--color-text-3); + +/******** 基础配置项 end *******/ + +/******** 高级配置项 *******/ + +// 错误状态 +@input-color-bg_error: var(--color-danger-light-1); +@input-color-bg_error_hover: var(--color-danger-light-2); +@input-color-bg_error_focus: @input-color-bg_focus; +@input-color-border_error_focus: @color-danger-6; +@input-color-shadow_error_focus: var(--color-danger-light-2); +@input-size-shadow_error_focus: @shadow-distance-none; + +// 圆角 +@input-border-radius: @radius-small; + +// 不同尺寸 +@input-size-default-height: @size-default; +@input-size-mini-height: @size-mini; +@input-size-small-height: @size-small; +@input-size-large-height: @size-large; + +// 边框尺寸以及边框色 +@input-border-width: @border-1; +@input-color-border: @color-transparent; +@input-color-border_disabled: @color-transparent; +@input-color-border_hover: @color-transparent; +@input-color-border_error: @color-transparent; +@input-color-border_error_hover: @color-transparent; + +// 不同尺寸文字大小 +@input-size-default-font-size: @font-size-body-3; +@input-size-small-font-size: @font-size-body-3; +@input-size-large-font-size: @font-size-body-3; +@input-size-mini-font-size: @font-size-body-1; +@input-font-tip-size: @font-size-body-1; // show limit word 文字色 + +// 不同尺寸的 suffix，addon 尺寸。 +@input-size-mini-icon-suffix-size: @size-3; +@input-size-small-icon-suffix-size: 14px; +@input-size-default-icon-suffix-size: 14px; +@input-size-large-icon-suffix-size: 14px; + +@input-size-mini-icon-addon-size: @size-3; +@input-size-small-icon-addon-size: 14px; +@input-size-default-icon-addon-size: 14px; +@input-size-large-icon-addon-size: 14px; + +@input-size-icon-clear: @size-3; +@input-color-prefix-text: var(--color-text-2); +@input-color-suffix-text: var(--color-text-2); +@input-color-tip-text: var(--color-text-3); +@input-color-icon-clear: var(--color-text-2); +@input-color-icon-clear-bg_hover: var(--color-fill-4); + +// input search +@search-color-icon: var(--color-text-2); +@search-button-color-text: var(--color-white); +@search-size-icon: 14px; +@search-button-padding-horizontal: @spacing-4; + +// 布局 +@input-padding-horizontal: @spacing-6; +@input-size-mini-padding-horizontal: @spacing-4; +@input-size-small-padding-horizontal: @spacing-6; +@input-size-large-padding-horizontal: @spacing-7; +@input-spacing-clear-icon-right: @spacing-4; +@input-padding-word-limit-left: @spacing-4; + +// textarea +@textarea-padding-horizontal: @spacing-6; +@textarea-padding-vertical: @spacing-2; +@textarea-font-size: @font-size-body-3; +@textarea-font-tip-size: @font-size-body-1; +@textarea-layout-tip-right: @spacing-5; +@textarea-layout-tip-bottom: @spacing-3; +@textarea-size-min-height: @size-default; +@textarea-size-icon-clear: @font-size-body-1; +@textarea-layout-top-icon-clear: @spacing-5; + +// password +@password-color-eye-icon: var(--color-text-2); +@password-size-eye-icon: @size-3; + +// input.group +@input-group-border-radius_compact: @radius-small; +@input-group-border-separator-width: @border-1; +@input-group-color-separator-border: var(--color-neutral-3); + +/******** 高级配置项 end *******/ diff --git a/components/Input/textarea.tsx b/components/Input/textarea.tsx new file mode 100644 index 0000000000..5a053aae72 --- /dev/null +++ b/components/Input/textarea.tsx @@ -0,0 +1,209 @@ +import React, { + useContext, + useRef, + useState, + useLayoutEffect, + useImperativeHandle, + CSSProperties, + useMemo, +} from 'react'; +import { TextAreaProps } from './interface'; +import cs from '../_util/classNames'; +import { Enter } from '../_util/keycode'; +import autoSizeTextAreaHeight from './autoSizeTextAreaHeight'; +import omit from '../_util/omit'; +import { ConfigContext } from '../ConfigProvider'; +import { formatValue } from './input'; +import useMergeValue from '../_util/hooks/useMergeValue'; +import IconClose from '../../icon/react-icon/IconClose'; +import IconHover from '../_class/icon-hover'; +import { isObject } from '../_util/is'; + +const TextArea = (props: TextAreaProps, ref) => { + const { + className, + style, + wrapperStyle, + placeholder, + disabled, + error, + maxLength, + showWordLimit, + allowClear, + onClear, + ...rest + } = props; + + const trueMaxLength = isObject(maxLength) ? maxLength.length : maxLength; + const mergedMaxLength = isObject(maxLength) && maxLength.errorOnly ? undefined : trueMaxLength; + + const isComposition = useRef(false); + const textareaRef = useRef(); + const [compositionValue, setCompositionValue] = useState(''); + const [textAreaStyle, setTextAreaStyle] = useState({}); + const [value, setValue] = useMergeValue('', { + defaultValue: + 'defaultValue' in props ? formatValue(props.defaultValue, mergedMaxLength) : undefined, + value: 'value' in props ? formatValue(props.value, mergedMaxLength) : undefined, + }); + + const { getPrefixCls } = useContext(ConfigContext); + const prefixCls = getPrefixCls('textarea'); + if (disabled) { + textAreaStyle.resize = 'none'; + } + + const handleChangeValue = (value, e) => { + const { onChange } = props; + if (!('value' in props)) { + setValue(value); + } + onChange && onChange(value, e); + }; + + const handleChange: React.ChangeEventHandler = (e) => { + const newValue = e.currentTarget.value; + if (!isComposition.current) { + if (mergedMaxLength) { + if (newValue.length <= trueMaxLength) { + handleChangeValue(newValue, e); + } + } else { + handleChangeValue(newValue, e); + } + } else { + setCompositionValue(newValue); + } + }; + + const onComposition = (e) => { + if (e.type === 'compositionend') { + isComposition.current = false; + setCompositionValue(undefined); + handleChangeValue(e.target.value, e); + } else { + isComposition.current = true; + } + }; + + const resizeTextAreaHeight = () => { + const textAreaStyle = autoSizeTextAreaHeight(props.autoSize, textareaRef.current); + if (textAreaStyle) { + setTextAreaStyle(textAreaStyle); + } + }; + + const handleClearClick = (e) => { + e.stopPropagation(); + if (textareaRef.current && textareaRef.current.focus) { + textareaRef.current.focus(); + } + handleChangeValue('', e); + onClear && onClear(); + }; + + useLayoutEffect(() => { + resizeTextAreaHeight(); + }, [value]); + + useImperativeHandle( + ref, + () => ({ + dom: textareaRef.current, + focus: () => { + textareaRef.current && textareaRef.current.focus && textareaRef.current.focus(); + }, + blur: () => { + textareaRef.current && textareaRef.current.blur && textareaRef.current.blur(); + }, + }), + [] + ); + + const valueLength = value ? value.length : 0; + + const withWrapper = (trueMaxLength && showWordLimit) || allowClear; + + const lengthError = useMemo(() => { + if (!mergedMaxLength && trueMaxLength) { + return valueLength > trueMaxLength; + } + return false; + }, [valueLength, trueMaxLength, mergedMaxLength]); + + const classNames = cs( + prefixCls, + { + [`${prefixCls}-error`]: error || lengthError, + [`${prefixCls}-disabled`]: disabled, + }, + className + ); + + const TextAreaElement = ( + +
+`; + +exports[`renders Mentions/demo/control.md correctly 1`] = ` +
+
+
+ +
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+`; diff --git a/components/Mentions/__test__/__snapshots__/index.test.tsx.snap b/components/Mentions/__test__/__snapshots__/index.test.tsx.snap new file mode 100644 index 0000000000..db333b3534 --- /dev/null +++ b/components/Mentions/__test__/__snapshots__/index.test.tsx.snap @@ -0,0 +1,34 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ConfigProvider componentConfig.Mentions default 1`] = ` +
+