From 48a3329bd6da94b856bde0a0adc4770b72a6c7b4 Mon Sep 17 00:00:00 2001 From: zhangxulong Date: Mon, 24 Apr 2023 18:19:32 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9A=82=E5=AD=98=E8=A1=A8=E5=8D=95=E4=BF=AE?= =?UTF-8?q?=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/zh-CN/components/form/nestedselect.md | 2 +- docs/zh-CN/components/tabs.md | 50 ++ examples/components/Page/Form.jsx | 36 +- packages/amis-ui/scss/_components.scss | 4 + packages/amis-ui/scss/_properties.scss | 9 + .../amis-ui/scss/components/_calendar.scss | 18 +- .../amis-ui/scss/components/_cascader.scss | 27 +- .../scss/components/_collapse-group.scss | 12 +- .../amis-ui/scss/components/_collapse.scss | 35 +- .../amis-ui/scss/components/_formula.scss | 18 +- .../amis-ui/scss/components/_input-box.scss | 24 + .../amis-ui/scss/components/_json-schema.scss | 17 + .../amis-ui/scss/components/_list-menu.scss | 36 ++ packages/amis-ui/scss/components/_panel.scss | 2 +- .../amis-ui/scss/components/_search-box.scss | 6 + packages/amis-ui/scss/components/_table.scss | 15 + packages/amis-ui/scss/components/_tabs.scss | 12 + .../amis-ui/scss/components/form/_color.scss | 25 +- .../amis-ui/scss/components/form/_combo.scss | 28 + .../scss/components/form/_date-range.scss | 16 + .../amis-ui/scss/components/form/_date.scss | 4 +- .../scss/components/form/_fieldset.scss | 13 + .../amis-ui/scss/components/form/_form.scss | 51 +- .../scss/components/form/_input-group.scss | 6 + .../scss/components/form/_location.scss | 25 + .../amis-ui/scss/components/form/_matrix.scss | 2 + .../amis-ui/scss/components/form/_number.scss | 8 + .../amis-ui/scss/components/form/_picker.scss | 12 + .../amis-ui/scss/components/form/_range.scss | 35 ++ .../amis-ui/scss/components/form/_select.scss | 32 ++ .../scss/components/form/_transfer.scss | 41 ++ .../amis-ui/scss/components/form/_tree.scss | 28 +- .../scss/components/react-datetime.scss | 8 + .../amis-ui/src/components/BaiduMapPicker.tsx | 46 +- .../amis-ui/src/components/CalendarMobile.tsx | 100 +++- packages/amis-ui/src/components/Cascader.tsx | 248 +++++---- packages/amis-ui/src/components/Collapse.tsx | 13 +- .../amis-ui/src/components/CollapseGroup.tsx | 9 +- .../amis-ui/src/components/ColorPicker.tsx | 42 +- .../amis-ui/src/components/ConfirmBox.tsx | 30 +- .../src/components/DateRangePicker.tsx | 69 ++- packages/amis-ui/src/components/InputBox.tsx | 6 +- .../src/components/InputBoxWithSuggestion.tsx | 5 +- .../amis-ui/src/components/InputTable.tsx | 2 +- packages/amis-ui/src/components/ListMenu.tsx | 16 +- .../amis-ui/src/components/LocationPicker.tsx | 92 +++- packages/amis-ui/src/components/Modal.tsx | 17 + .../amis-ui/src/components/NumberInput.tsx | 21 +- .../amis-ui/src/components/PickerColumn.tsx | 4 +- .../src/components/PickerContainer.tsx | 5 +- .../src/components/PopOverContainer.tsx | 14 +- packages/amis-ui/src/components/PopUp.tsx | 19 +- packages/amis-ui/src/components/Range.tsx | 70 ++- packages/amis-ui/src/components/ResultBox.tsx | 14 +- packages/amis-ui/src/components/SearchBox.tsx | 8 +- packages/amis-ui/src/components/Select.tsx | 31 +- .../amis-ui/src/components/SelectMobile.tsx | 520 ++++++++++++++++++ packages/amis-ui/src/components/Tabs.tsx | 97 +++- .../amis-ui/src/components/TabsTransfer.tsx | 12 +- .../src/components/TabsTransferPicker.tsx | 16 +- packages/amis-ui/src/components/Textarea.tsx | 1 + packages/amis-ui/src/components/Transfer.tsx | 16 +- .../src/components/TransferDropDown.tsx | 62 ++- .../amis-ui/src/components/TransferPicker.tsx | 16 +- packages/amis-ui/src/components/Tree.tsx | 34 +- .../src/components/calendar/Calendar.tsx | 3 + .../src/components/calendar/TimeView.tsx | 4 +- .../amis-ui/src/components/formula/Editor.tsx | 5 +- .../src/components/formula/FuncList.tsx | 2 +- .../amis-ui/src/components/formula/Picker.tsx | 110 ++-- .../src/components/formula/VariableList.tsx | 2 +- .../src/components/json-schema/Array.tsx | 6 +- .../src/components/json-schema/Item.tsx | 3 + .../src/components/json-schema/Object.tsx | 15 +- .../src/components/json-schema/index.tsx | 1 + .../src/components/schema-editor/Array.tsx | 4 +- .../src/components/schema-editor/Common.tsx | 9 +- .../src/components/schema-editor/Item.tsx | 4 +- .../src/components/schema-editor/Object.tsx | 6 +- .../src/components/schema-editor/index.tsx | 5 +- packages/amis/src/renderers/Collapse.tsx | 12 +- packages/amis/src/renderers/CollapseGroup.tsx | 4 +- packages/amis/src/renderers/Form/Combo.tsx | 22 +- .../amis/src/renderers/Form/InputFormula.tsx | 4 +- .../amis/src/renderers/Form/InputGroup.tsx | 9 +- .../amis/src/renderers/Form/InputRange.tsx | 12 +- .../amis/src/renderers/Form/InputRepeat.tsx | 2 + .../amis/src/renderers/Form/InputSubForm.tsx | 101 +++- packages/amis/src/renderers/Form/InputTag.tsx | 257 +++++++-- .../amis/src/renderers/Form/InputTree.tsx | 6 +- .../src/renderers/Form/JSONSchemaEditor.tsx | 3 +- .../amis/src/renderers/Form/NestedSelect.tsx | 2 +- packages/amis/src/renderers/Form/Picker.tsx | 10 +- .../amis/src/renderers/Form/TabsTransfer.tsx | 4 +- .../src/renderers/Form/TabsTransferPicker.tsx | 4 +- packages/amis/src/renderers/Form/Transfer.tsx | 4 +- .../src/renderers/Form/TransferPicker.tsx | 4 +- .../amis/src/renderers/Form/TreeSelect.tsx | 33 +- packages/amis/src/renderers/SearchBox.tsx | 4 +- packages/amis/src/renderers/Table/index.tsx | 7 +- packages/amis/src/renderers/Tabs.tsx | 27 +- publish-to-internal.sh | 6 +- vite.config.ts | 1 + 103 files changed, 2586 insertions(+), 443 deletions(-) create mode 100644 packages/amis-ui/src/components/SelectMobile.tsx diff --git a/docs/zh-CN/components/form/nestedselect.md b/docs/zh-CN/components/form/nestedselect.md index 6843b8f5d..a6d6f34ac 100755 --- a/docs/zh-CN/components/form/nestedselect.md +++ b/docs/zh-CN/components/form/nestedselect.md @@ -678,7 +678,7 @@ order: 31 } ], searchable: true, - multiple: false, + multiple: true, joinValues: true, clearable: true } diff --git a/docs/zh-CN/components/tabs.md b/docs/zh-CN/components/tabs.md index cd3367fbc..13cbdb2df 100755 --- a/docs/zh-CN/components/tabs.md +++ b/docs/zh-CN/components/tabs.md @@ -15,6 +15,7 @@ order: 68 ```schema: scope="body" { "type": "tabs", + "swipeable": true, "tabs": [ { "title": "Tab 1", @@ -23,6 +24,54 @@ order: 68 { "title": "Tab 2", "tab": "Content 2" + }, + { + "title": "Tab 3", + "tab": "Content 2" + }, + { + "title": "Tab 4", + "tab": "Content 2" + }, + { + "title": "Tab 5", + "tab": "Content 2" + }, + { + "title": "Tab 6", + "tab": "Content 2" + }, + { + "title": "Tab 7", + "tab": "Content 2" + }, + { + "title": "Tab 8", + "tab": "Content 2" + }, + { + "title": "Tab 9", + "tab": "Content 2" + }, + { + "title": "Tab 10", + "tab": "Content 2" + }, + { + "title": "Tab 11", + "tab": "Content 2" + }, + { + "title": "Tab 12", + "tab": "Content 2" + }, + { + "title": "Tab 13", + "tab": "Content 2" + }, + { + "title": "Tab 14", + "tab": "Content 2" } ] } @@ -789,6 +838,7 @@ order: 68 | sidePosition | `left` / `right` | `left` | `sidebar` 模式下，标签栏位置 | | collapseOnExceed | `number` | | 当 tabs 超出多少个时开始折叠 | | collapseBtnLabel | `string` | `more` | 用来设置折叠按钮的文字 | +| swipeable | `boolean` | false | 是否开启手势滑动切换（移动端生效） | ## 事件表 diff --git a/examples/components/Page/Form.jsx b/examples/components/Page/Form.jsx index 906e3922c..edb100284 100644 --- a/examples/components/Page/Form.jsx +++ b/examples/components/Page/Form.jsx @@ -1,24 +1,18 @@ export default { type: 'page', - title: '表单页面', - body: [ - { - type: 'form', - mode: 'horizontal', - api: '/api/mock2/form/saveForm', - body: [ - { - label: 'Name', - type: 'input-text', - name: 'name' - }, - { - label: 'Email', - type: 'input-email', - placeholder: '请输入邮箱地址', - name: 'email' - } - ] - } - ] + body: { + type: 'form', + body: [ + { + label: '多选', + type: 'select', + name: 'select2', + searchable: true, + checkAll: true, + multiple: true, + clearable: true, + source: '/api/mock2/form/getOptions' + } + ] + } }; diff --git a/packages/amis-ui/scss/_components.scss b/packages/amis-ui/scss/_components.scss index a187daa72..0e718c462 100644 --- a/packages/amis-ui/scss/_components.scss +++ b/packages/amis-ui/scss/_components.scss @@ -1676,6 +1676,8 @@ --InputRange-track-onActive-bg: var(--colors-brand-5); --InputRange-handle-height: var(--sizes-size-9); --InputRange-handle-width: var(--sizes-size-9); + --InputRange-handle-mobile-height: var(--sizes-base-11); + --InputRange-handle-mobile-width: var(--sizes-base-11); --InputRange-handle-bg: var(--colors-neutral-fill-11); --InputRange-handle-top-border-color: var(--colors-brand-5); --InputRange-handle-top-border-width: 0.0625rem; @@ -1730,6 +1732,7 @@ ); --InputRange-label-position-bottom: calc(100% + 8px); --InputRange-input-width: var(--sizes-base-40); + --InputRange-input-mobile-width: var(--sizes-base-20); --InputRange-input-marginTop: var(--sizes-size-0); --InputRange-input-marginBottom: var(--sizes-size-0); --InputRange-input-marginLeft: var(--sizes-size-5); @@ -2821,6 +2824,7 @@ --select-tree-active-bg-color: var(--colors-brand-10); --Form-select-bg: var(--select-base-default-bg-color); + --Form-select-mobile-icon-check-color: var(--colors-brand-5); --Form-select-height: var(--Form-select-outer-top); --Form-select-borderColor: var(--select-base-default-top-border-color) var(--select-base-default-right-border-color) diff --git a/packages/amis-ui/scss/_properties.scss b/packages/amis-ui/scss/_properties.scss index e6444ccb8..919d89dee 100644 --- a/packages/amis-ui/scss/_properties.scss +++ b/packages/amis-ui/scss/_properties.scss @@ -527,6 +527,10 @@ $Table-strip-bg: transparent; --ListMenu-item-bg: var(--colors-neutral-fill-11); --ListMenu-item-color: var(--colors-neutral-text-2); --ListMenu-item-height: var(--sizes-base-15); + --ListMenu-item-mobile-margin: #{px2rem(5px)}; + --ListMenu-item-mobile-width: #{px2rem(90px)}; + --ListMenu-item-mobile-bg: #f5f5f5; + --ListMenu-item-mobile-active-bg: #e7f1ff; --Log-bg: #222; --Log-padding: var(--gap-sm) 0; @@ -768,6 +772,11 @@ $Table-strip-bg: transparent; --UserSelect--border-color: #f7f7f9; --UserSelect--content-bg: #f5f7f8; --UserSelect--bread-color: #5e626a; + + --Cascader-border-color: #f7f7f9; + --Cascader-border-active-bg-color: #f7f7f9; + --Cascader-option-disable-color: #b8babf; + // tag --Tag-content-fontSize: var(--fontSizeSm); --Tag-height: #{px2rem(24px)}; diff --git a/packages/amis-ui/scss/components/_calendar.scss b/packages/amis-ui/scss/components/_calendar.scss index ae3ac0225..c4d8c2122 100644 --- a/packages/amis-ui/scss/components/_calendar.scss +++ b/packages/amis-ui/scss/components/_calendar.scss @@ -123,8 +123,15 @@ border-width: 0; &--time { - height: fit-content; + height: px2rem(360px); max-height: 90vh; + .#{$ns}PopUp-content { + overflow: hidden; + } + } + + &--years { + height: px2rem(360px); } } @@ -246,6 +253,7 @@ align-items: center; justify-content: center; border-radius: px2rem(4px); + padding: 0 px2rem(10px); } } @@ -282,11 +290,11 @@ line-height: px2rem(48px); } .#{$ns}DateRangePicker-rangers { - position: absolute; + padding-left: revert; white-space: nowrap; - .#{$ns}DateRangePicker-ranger { - margin: 0 px2rem(25px); - } + line-height: inherit; + display: flex; + justify-content: space-between; } .#{$ns}DatePicker-shortcuts { width: auto; diff --git a/packages/amis-ui/scss/components/_cascader.scss b/packages/amis-ui/scss/components/_cascader.scss index 68eb53aa9..b898955eb 100644 --- a/packages/amis-ui/scss/components/_cascader.scss +++ b/packages/amis-ui/scss/components/_cascader.scss @@ -15,6 +15,9 @@ height: px2rem(260px); overflow-y: auto; display: inline-block; + padding-left: px2rem(10px); + border: 1px solid var(--Cascader-border-color); + &::-webkit-scrollbar { display: none; } @@ -52,13 +55,18 @@ display: flex; align-items: center; justify-content: space-between; - padding: px2rem(6px) 0; + padding: px2rem(6px) 0 px2rem(6px) px2rem(10px); font-size: var(--fontSizeMd); line-height: var(--Cascader-option-lineHeight); cursor: pointer; position: relative; + + &.is-active { + background-color: var(--Cascader-border-active-bg-color); + } + &.selected { - span { + .#{$ns}Cascader-option--text { color: var(--primary); } } @@ -68,11 +76,26 @@ } } &--text { + flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; user-select: none; + + &.disabled { + color: var(--Cascader-option-disable-color); + } } + + &-arrow { + flex: 1; + text-align: right; + padding-right: px2rem(6px); + > svg { + transform: scale(0.8); + } + } + &-selectedNum { min-width: px2rem(16px); height: px2rem(16px); diff --git a/packages/amis-ui/scss/components/_collapse-group.scss b/packages/amis-ui/scss/components/_collapse-group.scss index b3fc5f9fd..fba422fd6 100644 --- a/packages/amis-ui/scss/components/_collapse-group.scss +++ b/packages/amis-ui/scss/components/_collapse-group.scss @@ -24,7 +24,7 @@ } } - .#{$ns}Collapse:not(:last-child) { + .#{$ns}Collapse:not(:last-child):not(.is-mobile) { border-bottom: none; } @@ -40,4 +40,14 @@ } } } + + &.is-mobile { + &.icon-position-right { + .#{$ns}Collapse-header { + .#{$ns}Collapse-arrow-wrap { + margin-right: px2rem(-18px); + } + } + } + } } diff --git a/packages/amis-ui/scss/components/_collapse.scss b/packages/amis-ui/scss/components/_collapse.scss index 2d33222bb..263c78084 100644 --- a/packages/amis-ui/scss/components/_collapse.scss +++ b/packages/amis-ui/scss/components/_collapse.scss @@ -42,6 +42,17 @@ background: var(--Collapse-header-onHover-bg); color: var(--collapse-default-header-hover-color); } + + &.is-mobile { + background: none; + border-radius: 0 !important; + position: relative; + padding-left: 0; + + &:hover { + background: none; + } + } } .Collapse-arrow { @@ -76,7 +87,7 @@ // display: inline-block; // } - &.is-active > &-header > &-arrow-wrap > &-arrow { + &.is-active > .#{$ns}Collapse-header > .#{$ns}Collapse-arrow-wrap > &-arrow { transform: rotate(var(--collapse-icon-rotate)); transform-origin: 50% 50%; } @@ -133,6 +144,28 @@ line-height: var(--collapse-default-content-lineHeight); background: var(--collapse-default-bg-color); } + + &.is-mobile { + border-top: none; + border-left: none; + border-right: none; + + &:last-child { + border-bottom: none; + } + + .#{$ns}Collapse-icon-tranform, + .#{$ns}Collapse-arrow-wrap { + margin-right: px2rem(-18px); + float: right; + margin-top: px2rem(2px); + } + + .#{$ns}Collapse-content { + padding-left: 0; + padding-right: 0; + } + } } //FieldSet Form + Collapse diff --git a/packages/amis-ui/scss/components/_formula.scss b/packages/amis-ui/scss/components/_formula.scss index 997f2ed3c..f41c9e7a5 100644 --- a/packages/amis-ui/scss/components/_formula.scss +++ b/packages/amis-ui/scss/components/_formula.scss @@ -64,9 +64,15 @@ height: #{px2rem(250px)}; margin-top: #{px2rem(10px)}; - & > div { + &:not(.is-mobile) > div { width: 0; } + + &.is-mobile { + width: 100%; + overflow-x: scroll; + overflow-y: hidden; + } } &-settings.only-variable { @@ -389,6 +395,16 @@ justify-content: space-between; align-items: center; + &-popup { + height: 80vh; + + &-inner { + width: 100%; + box-sizing: border-box; + padding: 0 px2rem(16px); + } + } + &-input { flex: 1; margin-right: #{px2rem(10px)}; diff --git a/packages/amis-ui/scss/components/_input-box.scss b/packages/amis-ui/scss/components/_input-box.scss index 647fc264a..6382b290c 100644 --- a/packages/amis-ui/scss/components/_input-box.scss +++ b/packages/amis-ui/scss/components/_input-box.scss @@ -72,4 +72,28 @@ &.is-active &-caret { transform: rotate(180deg); } + + &.is-mobile { + border: none; + border-radius: 0; + border-bottom: var(--Form-input-borderWidth) solid + var(--Form-input-borderColor); + + &.is-error, + .is-error > & { + border-bottom-color: var(--Form-input-onError-borderColor); + } + + &.is-focused { + border-bottom-color: var(--Form-input-onFocused-borderColor); + } + + &.is-error.is-focused { + border-bottom-color: var(--Form-input-onError-borderColor); + } + + &.is-disabled { + border-bottom-color: var(--Form-input-onDisabled-borderColor); + } + } } diff --git a/packages/amis-ui/scss/components/_json-schema.scss b/packages/amis-ui/scss/components/_json-schema.scss index 3946ca25c..df18c2659 100644 --- a/packages/amis-ui/scss/components/_json-schema.scss +++ b/packages/amis-ui/scss/components/_json-schema.scss @@ -24,6 +24,15 @@ color: var(--Form-input-color); } + + &.is-mobile { + & > span { + border-radius: 0; + border: none; + border-bottom: var(--Form-input-borderWidth) solid + var(--Form-input-borderColor); + } + } } &-value { @@ -121,4 +130,12 @@ } } } + + &.is-mobile { + .#{$ns}Number { + border-radius: 0; + border-bottom: var(--Number-borderWidth) solid + var(--Form-input-borderColor); + } + } } diff --git a/packages/amis-ui/scss/components/_list-menu.scss b/packages/amis-ui/scss/components/_list-menu.scss index 9be65fdbe..a42ddde9a 100644 --- a/packages/amis-ui/scss/components/_list-menu.scss +++ b/packages/amis-ui/scss/components/_list-menu.scss @@ -67,6 +67,42 @@ ) var(--Form-select-paddingX); } + + &.is-mobile { + display: flex; + flex-wrap: wrap; + + .#{$ns}ListMenu-item { + width: calc((100vw - var(--ListMenu-item-mobile-margin) * 7) / 3); + display: inline-flex; + background: var(--ListMenu-item-mobile-bg); + margin: var(--ListMenu-item-mobile-margin); + + &.is-active { + background: var(--ListMenu-item-mobile-active-bg); + } + + .#{$ns}ListMenu-itemLabel { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + } + } +} + +.#{$ns}ListMenu-add-wrap { + display: flex; + align-items: center; + justify-content: space-around; + margin: px2rem(20px) 0; + text-align: center; + + input { + &::-webkit-input-placeholder { + text-align: center; + } + } } .#{$ns}PopOver > .#{$ns}ListMenu { diff --git a/packages/amis-ui/scss/components/_panel.scss b/packages/amis-ui/scss/components/_panel.scss index 04f4379d5..4245fa317 100644 --- a/packages/amis-ui/scss/components/_panel.scss +++ b/packages/amis-ui/scss/components/_panel.scss @@ -220,7 +220,7 @@ calc(var(--Panel-marginBottom) / 2); .#{$ns}Panel-body { - padding: 0 var(--gap-md) var(--gap-md); + // padding: 0 var(--gap-md) var(--gap-md); } > .#{$ns}Panel-heading { diff --git a/packages/amis-ui/scss/components/_search-box.scss b/packages/amis-ui/scss/components/_search-box.scss index fc352e1dc..cd0f3a990 100644 --- a/packages/amis-ui/scss/components/_search-box.scss +++ b/packages/amis-ui/scss/components/_search-box.scss @@ -132,6 +132,12 @@ background: var(--SearchBox-enhonce-disabled-color); color: var(--SearchBox-enhonce-disabled-search-color); } + + &.is-mobile { + border-radius: 0; + border: none; + border-bottom: var(--borderWidth) solid var(--borderColor); + } } .#{$ns}SearchBox-history { diff --git a/packages/amis-ui/scss/components/_table.scss b/packages/amis-ui/scss/components/_table.scss index e02e91b01..e2e885790 100644 --- a/packages/amis-ui/scss/components/_table.scss +++ b/packages/amis-ui/scss/components/_table.scss @@ -657,6 +657,21 @@ } } + &.is-mobile { + .#{$ns}Table-table > tbody > tr { + &:hover, + &.is-hovered { + background: var(--Table-bg); + border-color: var(--Table-borderColor); + color: var(--Table-color); + + & + tr { + border-color: var(--Table-borderColor); + } + } + } + } + &Cell-sortBtn, &Cell-searchBtn, &Cell-filterBtn { diff --git a/packages/amis-ui/scss/components/_tabs.scss b/packages/amis-ui/scss/components/_tabs.scss index fccde1c8b..3f0a1e53a 100644 --- a/packages/amis-ui/scss/components/_tabs.scss +++ b/packages/amis-ui/scss/components/_tabs.scss @@ -112,6 +112,18 @@ height: 100%; overflow-x: hidden; + &.is-mobile { + overflow-x: auto; + -ms-overflow-style: none; + overflow: -moz-scrollbars-none; + + &::-webkit-scrollbar { + display: none; + width: 0 !important; + height: 0 !important; + } + } + .#{$ns}Tabs-links-drag { position: absolute; height: 100%; diff --git a/packages/amis-ui/scss/components/form/_color.scss b/packages/amis-ui/scss/components/form/_color.scss index a76893070..2f8b292f0 100644 --- a/packages/amis-ui/scss/components/form/_color.scss +++ b/packages/amis-ui/scss/components/form/_color.scss @@ -11,7 +11,7 @@ border-radius: var(--borderRadius); &-popup { - height: px2rem(400px); + height: px2rem(460px); } &:not(.is-disabled) { @@ -122,3 +122,26 @@ border-radius: var(--borderRadius) !important; box-shadow: var(--ColorPicker-boxShadow) !important; } + +.#{$ns}ColorPicker-popup { + .sketch-picker { + width: 80% !important; + box-shadow: none !important; + + input { + &:focus { + outline: none; + } + } + + .flexbox-fix { + &:last-child { + > div { + width: 18px !important; + height: 18px !important; + margin: 0px 16px 10px 0px !important; + } + } + } + } +} diff --git a/packages/amis-ui/scss/components/form/_combo.scss b/packages/amis-ui/scss/components/form/_combo.scss index 6cfdb4290..4f6061eff 100644 --- a/packages/amis-ui/scss/components/form/_combo.scss +++ b/packages/amis-ui/scss/components/form/_combo.scss @@ -320,6 +320,34 @@ background: rgba(0, 0, 0, 0.1); } } + + &.is-mobile { + .#{$ns}Form-item { + padding: px2rem(10px) 0 0 0; + + .#{$ns}Form-rowInner { + flex: 1; + } + } + + .#{$ns}Combo-delBtn { + height: px2rem(20px); + } + } + + &.is-mobile:not(.#{$ns}Combo--ver) { + .#{$ns}TextareaControl > textarea, + .#{$ns}Form-control > .#{$ns}TextControl-input, + .#{$ns}TextControl.is-focused > .#{$ns}TextControl-input { + border-bottom: var(--Form-input-borderWidth) solid var(--borderColor); + } + } + + &.is-mobile:is(.#{$ns}Combo--hor) { + .#{$ns}Form-control { + padding-top: px2rem(10px); + } + } } .#{$ns}ComboTabs > .#{$ns}Tabs-links { diff --git a/packages/amis-ui/scss/components/form/_date-range.scss b/packages/amis-ui/scss/components/form/_date-range.scss index a88a839fb..2d61f8840 100644 --- a/packages/amis-ui/scss/components/form/_date-range.scss +++ b/packages/amis-ui/scss/components/form/_date-range.scss @@ -185,10 +185,22 @@ width: auto; // padding-bottom: var(--gap-sm); padding: 0; + + &.is-mobile { + flex: 1; + + .#{$ns}DateRangePicker-end { + margin-top: 0; + } + } } .#{$ns}DateRangePicker-picker-wrap { display: flex; + + &.is-vertical { + flex-direction: column; + } } .#{$ns}DateRangePicker-start, @@ -274,6 +286,10 @@ border-color: var(--DatePicker-borderColor); background: var(--DatePicker-bg); border-radius: var(--DatePicker-borderRadius); + + &.is-mobile { + display: block; + } } // 移动端输入框样式 diff --git a/packages/amis-ui/scss/components/form/_date.scss b/packages/amis-ui/scss/components/form/_date.scss index 17df1f16b..ecade9ff2 100644 --- a/packages/amis-ui/scss/components/form/_date.scss +++ b/packages/amis-ui/scss/components/form/_date.scss @@ -456,7 +456,7 @@ color: var(--inputTime-active-color); background: var(--inputTime-active-bg-color); } - &:hover { + &:not(.is-mobile):hover { color: var(--inputTime-hover-color); background: var(--inputTime-hover-bg-color); } @@ -466,6 +466,7 @@ .#{$ns}TimeContentWrapper { display: flex; + justify-content: center; } .#{$ns}TimeRangeHeaderWrapper { @@ -473,6 +474,7 @@ padding-top: 10px; text-align: center; border-bottom: 1px solid var(--Calendar-input-borderColor); + margin: 0 px2rem(4px); } .#{$ns}TimeFooterWrapper { diff --git a/packages/amis-ui/scss/components/form/_fieldset.scss b/packages/amis-ui/scss/components/form/_fieldset.scss index bd5f768df..827718abd 100644 --- a/packages/amis-ui/scss/components/form/_fieldset.scss +++ b/packages/amis-ui/scss/components/form/_fieldset.scss @@ -25,6 +25,10 @@ border-left: 0 !important; } + > legend.#{$ns}Collapse-header.is-mobile { + position: absolute; + } + .collapse { position: relative; } @@ -188,4 +192,13 @@ fieldset.#{$ns}Collapse { top: calc(var(--fieldSet-size-lg-fontSize) / 2); } } + + .#{$ns}Collapse-header.is-mobile { + padding-left: var(--gap-xs) !important; + padding-right: px2rem(18px); + + &:hover { + background: var(--white); + } + } } diff --git a/packages/amis-ui/scss/components/form/_form.scss b/packages/amis-ui/scss/components/form/_form.scss index dbacd01bf..98faad117 100644 --- a/packages/amis-ui/scss/components/form/_form.scss +++ b/packages/amis-ui/scss/components/form/_form.scss @@ -489,15 +489,21 @@ /* 移动端样式调整 */ @include media-breakpoint-down(sm) { .#{$ns}Form { + // &::before { + // position: absolute; + // box-sizing: border-box; + // content: ' '; + // pointer-events: none; + // right: 0; + // top: 0; + // left: 0; + // border-bottom: var(--Form-input-borderWidth) solid var(--borderColor); + // } + } + + .#{$ns}Combo-form { &::before { - position: absolute; - box-sizing: border-box; - content: ' '; - pointer-events: none; - right: 0; - top: 0; - left: 0; - border-bottom: var(--Form-input-borderWidth) solid var(--borderColor); + border-bottom: none; } } @@ -612,6 +618,7 @@ flex: 1; flex-wrap: wrap; font-size: var(--fontSizeLg); + overflow-x: auto; &.is-disabled > .#{$ns}TextControl-input { background: transparent; @@ -686,6 +693,7 @@ border: none; padding: 0 var(--Form-input-paddingX) 0 0; box-shadow: none; + border-radius: 0; &:hover, &:focus, @@ -716,9 +724,9 @@ display: none; } - .#{$ns}Divider { - display: none; - } + // .#{$ns}Divider { + // display: none; + // } .#{$ns}Tabs-pane { padding: 0; @@ -727,4 +735,25 @@ .#{$ns}Form-item .#{$ns}Form-groupColumn > .#{$ns}Form-item { padding-bottom: var(--Form-input-paddingX); } + + .#{$ns}Form-groupColumn { + position: relative; + + &::after { + position: absolute; + box-sizing: border-box; + content: ' '; + pointer-events: none; + right: 0; + bottom: 0; + left: 0; + border-bottom: var(--Form-input-borderWidth) solid var(--borderColor); + } + } + + .#{$ns}Form-groupColumn:nth-last-of-type(1) { + &::after { + display: none; + } + } } diff --git a/packages/amis-ui/scss/components/form/_input-group.scss b/packages/amis-ui/scss/components/form/_input-group.scss index 9ab9733db..6f0cd6515 100644 --- a/packages/amis-ui/scss/components/form/_input-group.scss +++ b/packages/amis-ui/scss/components/form/_input-group.scss @@ -151,6 +151,12 @@ .#{$ns}Form-static { margin-right: var(--gap-xs); } + + &.is-mobile { + .#{$ns}Form-control { + display: inline-flex; + } + } } .#{$ns}InputGroup:not(.is-inline) { diff --git a/packages/amis-ui/scss/components/form/_location.scss b/packages/amis-ui/scss/components/form/_location.scss index 9bee2f952..e30f09922 100644 --- a/packages/amis-ui/scss/components/form/_location.scss +++ b/packages/amis-ui/scss/components/form/_location.scss @@ -39,6 +39,10 @@ } } + &.is-mobile { + border: none; + } + &-placeholder { color: var(--colors-neutral-text-6); user-select: none; @@ -72,6 +76,27 @@ top: 0; } } + + &-popup { + height: px2rem(460px); + + &-inner { + flex: 1; + padding: 0 px2rem(16px); + + .#{$ns}MapPicker-search { + padding-top: 0; + margin-bottom: px2rem(16px); + + .#{$ns}TextControl-input { + border-radius: 0; + border-top: none; + border-right: none; + border-left: none; + } + } + } + } } .#{$ns}LocationControl { diff --git a/packages/amis-ui/scss/components/form/_matrix.scss b/packages/amis-ui/scss/components/form/_matrix.scss index 60b1441c8..aa244ccdc 100644 --- a/packages/amis-ui/scss/components/form/_matrix.scss +++ b/packages/amis-ui/scss/components/form/_matrix.scss @@ -1,4 +1,6 @@ .#{$ns}MatrixControl { + max-width: 100%; + &-error { margin-bottom: 0; } diff --git a/packages/amis-ui/scss/components/form/_number.scss b/packages/amis-ui/scss/components/form/_number.scss index d5c09cc2b..15d781863 100644 --- a/packages/amis-ui/scss/components/form/_number.scss +++ b/packages/amis-ui/scss/components/form/_number.scss @@ -71,6 +71,14 @@ box-shadow: var(--inputNumber-base-active-shadow); } + &.is-mobile { + border: none; + + &-focused { + border: none; + } + } + &-disabled { border-width: var(--inputNumber-base-disabled-top-border-width) var(--inputNumber-base-disabled-right-border-width) diff --git a/packages/amis-ui/scss/components/form/_picker.scss b/packages/amis-ui/scss/components/form/_picker.scss index 4d233e18a..0ddfd4547 100644 --- a/packages/amis-ui/scss/components/form/_picker.scss +++ b/packages/amis-ui/scss/components/form/_picker.scss @@ -206,3 +206,15 @@ min-width: px2rem(150px); } } + +.#{$ns}PickerControl.is-mobile { + width: 100%; + + .#{$ns}Form-item { + padding: 0; + } + + .#{$ns}Picker-input { + border: none; + } +} diff --git a/packages/amis-ui/scss/components/form/_range.scss b/packages/amis-ui/scss/components/form/_range.scss index bafca5b23..ec7b52359 100644 --- a/packages/amis-ui/scss/components/form/_range.scss +++ b/packages/amis-ui/scss/components/form/_range.scss @@ -33,6 +33,24 @@ } } + &.is-mobile { + padding: 0; + + .#{$ns}InputRange-input { + width: var(--InputRange-input-mobile-width); + // margin-left: 0; + + .#{$ns}Number-handler-wrap { + display: none !important; + } + + input { + padding: 0 !important; + text-align: center; + } + } + } + &-clear { display: flex; align-items: center; @@ -97,6 +115,11 @@ width: var(--InputRange-handle-width); height: var(--InputRange-handle-height); + &.is-mobile { + width: var(--InputRange-handle-mobile-width); + height: var(--InputRange-handle-mobile-height); + } + &-icon, &-drage { width: 100%; @@ -304,4 +327,16 @@ } } } + + &.is-mobile { + .#{$ns}InputRange-marks { + div { + top: px2rem(4px); + + &:nth-child(2n) { + top: px2rem(-34px); + } + } + } + } } diff --git a/packages/amis-ui/scss/components/form/_select.scss b/packages/amis-ui/scss/components/form/_select.scss index d483fa5a7..649133e6e 100644 --- a/packages/amis-ui/scss/components/form/_select.scss +++ b/packages/amis-ui/scss/components/form/_select.scss @@ -436,6 +436,38 @@ // display: inline-block; max-width: 100%; } + + &.is-mobile { + position: relative; + + & > a { + margin-right: calc( + 20px + var(--select-base-default-option-paddingRight) + ); + } + + .#{$ns}Select-option-item-check { + flex: 1; + text-align: left; + border-bottom: px2rem(1px) solid var(--borderColor); + } + + .#{$ns}Select-option-mcheck { + position: absolute; + top: 50%; + transform: translateY(-50%); + right: var(--select-base-default-option-paddingRight); + flex: none; + width: px2rem(16px); + color: var(--Form-select-mobile-icon-check-color); + } + + &:last-child { + .#{$ns}Select-option-item-check { + border-bottom: none; + } + } + } } &-noResult { diff --git a/packages/amis-ui/scss/components/form/_transfer.scss b/packages/amis-ui/scss/components/form/_transfer.scss index 2c018b99a..ec8c3c431 100644 --- a/packages/amis-ui/scss/components/form/_transfer.scss +++ b/packages/amis-ui/scss/components/form/_transfer.scss @@ -237,6 +237,16 @@ color: var(--transfer-search-placeholder-font-color); } } + + &.is-mobile { + .#{$ns}InputBox { + border: none; + border-bottom: var(--transfer-search-bottom-border-width) + var(--transfer-search-bottom-border-style) + var(--transfer-search-bottom-border-color); + border-radius: 0; + } + } } &-mid { @@ -363,6 +373,25 @@ height: auto; } } + + .#{$ns}Transfer-result { + .#{$ns}Transfer-title { + height: px2rem(40px); + line-height: px2rem(40px); + } + + &.is-mobile { + .#{$ns}Transfer-search { + .#{$ns}InputBox { + border: none; + border-bottom: var(--transfer-search-bottom-border-width) + var(--transfer-search-bottom-border-style) + var(--transfer-search-bottom-border-color); + border-radius: 0; + } + } + } + } } .#{$ns}TabsTransfer { @@ -463,6 +492,16 @@ } } } + + .#{$ns}TabsTransfer-search { + &.is-mobile { + .#{$ns}InputBox { + border: none; + border-bottom: 1px solid var(--TabsTransfer-border-color); + border-radius: 0; + } + } + } } } } @@ -528,7 +567,9 @@ &.is-mobile { width: 100%; + min-width: auto; } + & > .#{$ns}Transfer-selection { flex-grow: 1; max-height: var(--Transfer-selection-maxHeight); diff --git a/packages/amis-ui/scss/components/form/_tree.scss b/packages/amis-ui/scss/components/form/_tree.scss index ff8acb20c..3f56ec623 100644 --- a/packages/amis-ui/scss/components/form/_tree.scss +++ b/packages/amis-ui/scss/components/form/_tree.scss @@ -147,9 +147,10 @@ &:hover { .#{$ns}Tree { - &-itemLabel-item { + &-itemLabel-item:not(.is-mobile) { background-color: var(--Tree-item-onHover-bg-pure); } + &-item-icons { visibility: visible; } @@ -255,6 +256,15 @@ background: var(--Form-input-onFocused-bg); } } + + &.is-mobile { + > input { + border-radius: 0; + border: none; + border-bottom: var(--Form-input-borderWidth) solid + var(--Form-input-borderColor); + } + } } &-addTopBtn { @@ -398,3 +408,19 @@ } } } + +.#{$ns}PopUp { + .#{$ns}Tree { + flex: 1; + + .#{$ns}Tree-itemLabel { + &:hover { + .#{$ns}Tree { + &-itemLabel-item { + background-color: none !important; + } + } + } + } + } +} diff --git a/packages/amis-ui/scss/components/react-datetime.scss b/packages/amis-ui/scss/components/react-datetime.scss index c456eebc3..76a56731f 100644 --- a/packages/amis-ui/scss/components/react-datetime.scss +++ b/packages/amis-ui/scss/components/react-datetime.scss @@ -15,6 +15,14 @@ background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); border: 1px solid #f9f9f9; + + &.is-mobile-year { + width: px2rem(184px); + } + + &.is-mobile-embed { + width: px2rem(240px); + } } .rdtPickerNotDays { diff --git a/packages/amis-ui/src/components/BaiduMapPicker.tsx b/packages/amis-ui/src/components/BaiduMapPicker.tsx index ac1b3f681..0eccf6314 100644 --- a/packages/amis-ui/src/components/BaiduMapPicker.tsx +++ b/packages/amis-ui/src/components/BaiduMapPicker.tsx @@ -165,15 +165,17 @@ export class BaiduMapPicker extends React.Component< if (poiLength) { for (let i = 0; i < poiLength; i++) { const poi = result.getPoi(i); - sugs.push( - [ - poi.province, - poi.city, - poi.district, - poi.street, - poi.business - ].join(' ') - ); + if (poi) { + sugs.push( + [ + poi.province, + poi.city, + poi.district, + poi.street, + poi.business + ].join(' ') + ); + } } this.setState({ sugs @@ -288,21 +290,23 @@ export class BaiduMapPicker extends React.Component< if (this.props.coordinatesType == 'gcj02') { this.covertPoint(point, COORDINATES_BD09, COORDINATES_GCJ02).then( (convertedPoint: any) => { - (typeof this.props?.onChange === 'function') && this.props.onChange({ - address: loc.address.trim() || loc.title, - lat: convertedPoint.lat, - lng: convertedPoint.lng, - city: loc.city - }); + typeof this.props?.onChange === 'function' && + this.props.onChange({ + address: loc.address.trim() || loc.title, + lat: convertedPoint.lat, + lng: convertedPoint.lng, + city: loc.city + }); } ); } else { - (typeof this.props?.onChange === 'function') && this.props?.onChange({ - address: loc.address.trim() || loc.title, - lat: loc.lat, - lng: loc.lng, - city: loc.city - }); + typeof this.props?.onChange === 'function' && + this.props?.onChange({ + address: loc.address.trim() || loc.title, + lat: loc.lat, + lng: loc.lng, + city: loc.city + }); } } diff --git a/packages/amis-ui/src/components/CalendarMobile.tsx b/packages/amis-ui/src/components/CalendarMobile.tsx index cea3d19f6..7dd0d2d1c 100644 --- a/packages/amis-ui/src/components/CalendarMobile.tsx +++ b/packages/amis-ui/src/components/CalendarMobile.tsx @@ -11,6 +11,9 @@ import {themeable, ThemeProps} from 'amis-core'; import {LocaleProps, localeable} from 'amis-core'; import {autobind} from 'amis-core'; import Button from './Button'; +import {ShortCuts, ShortCutDateRange} from './DatePicker'; +import {advancedRanges, availableRanges} from './DateRangePicker'; +import {noop} from 'amis-core'; export interface CalendarMobileProps extends ThemeProps, LocaleProps { className?: string; @@ -49,6 +52,7 @@ export interface CalendarMobileProps extends ThemeProps, LocaleProps { }; }; defaultDate?: moment.Moment; + ranges?: string | Array; } export interface CalendarMobileState { @@ -281,6 +285,97 @@ export class CalendarMobile extends React.Component< return dow; } + @autobind + renderRanges(ranges: string | Array | undefined) { + if (!ranges) { + return null; + } + const { + classPrefix: ns, + embed, + minDate, + maxDate, + confirm, + onChange + } = this.props; + let rangeArr: Array; + if (typeof ranges === 'string') { + rangeArr = ranges.split(','); + } else { + rangeArr = ranges; + } + const __ = this.props.translate; + + return ( +
    + {rangeArr.map(item => { + if (!item) { + return null; + } + let range: any = {}; + if (typeof item === 'string') { + if (availableRanges[item]) { + range = availableRanges[item]; + range.key = item; + } else { + // 通过正则尝试匹配 + for (let i = 0, len = advancedRanges.length; i < len; i++) { + let value = advancedRanges[i]; + const m = value.regexp.exec(item); + if (m) { + range = value.resolve.apply(item, [__, ...m]); + range.key = item; + } + } + } + } else if ( + (item as ShortCutDateRange).startDate && + (item as ShortCutDateRange).endDate + ) { + range = { + ...item, + startDate: () => (item as ShortCutDateRange).startDate, + endDate: () => (item as ShortCutDateRange).endDate + }; + } + if (Object.keys(range).length) { + return ( +
  • { + const now = moment(); + const startDate = + minDate && minDate.isValid() + ? moment.max(range.startDate(now.clone()), minDate) + : range.startDate(now.clone()); + const endDate = + maxDate && maxDate.isValid() + ? moment.min(maxDate, range.endDate(now.clone())) + : range.endDate(now.clone()); + + this.setState({ + startDate, + endDate + }); + !embed && onChange && onChange({startDate, endDate}, noop); + // 内嵌模式 + embed && + onChange && + onChange({startDate, endDate}, () => confirm && confirm()); + }} + key={range.key || range.label} + > + {__(range.label)} +
    • + ); + } else { + return null; + } + })} +
+ ); + } + @autobind handleCalendarClick(isDisabled: boolean) { if (isDisabled) { @@ -697,7 +792,8 @@ export class CalendarMobile extends React.Component< footerExtra, timeFormat, showViewMode, - isDatePicker + isDatePicker, + ranges } = this.props; const __ = this.props.translate; @@ -755,7 +851,7 @@ export class CalendarMobile extends React.Component< {timeFormat && startDate && this.renderMobileTimePicker()}
- {footerExtra} + {this.renderRanges(ranges)}
{confirm && !embed && ( + } + {label && typeof label === 'string' + ? label + : __('Calendar.datepicker')} + { + + } +
+ ) : null} {this.renderRanges(ranges)} -
- {(!isTimeRange || (editState === 'start' && !embed)) && ( +
+ {(!isTimeRange || + (editState === 'start' && !embed) || + (mobileUI && isTimeRange)) && ( )} - {(!isTimeRange || (editState === 'end' && !embed)) && ( + {(!isTimeRange || + (editState === 'end' && !embed) || + (mobileUI && isTimeRange)) && ( )}
- {embed ? null : ( + {embed || mobileUI ? null : (
{/* this.close 这里不可以传参 */}