Merge pull request #7624 from allenve/master

feat: inputCity 支持itemClassName
2024-11-29 18:48:45 +08:00 · 2023-07-31 10:02:59 +08:00 · 2023-07-31 10:02:59 +08:00 · 7ace91053f
commit 7ace91053f
parent f1985e9513 d7d570ebbd
5 changed files with 175 additions and 96 deletions
--- a/docs/zh-CN/components/form/input-city.md
+++ b/docs/zh-CN/components/form/input-city.md
@ -71,6 +71,27 @@ order: 10
 }
 ```

+## 配置下拉框样式
+
+可以通过 `itemClassName` 指定下拉框样式，如配置最小宽度
+
+```schema: scope="body"
+{
+    "type": "form",
+    "debug": true,
+    "api": "/api/mock2/form/saveForm",
+    "body": [
+        {
+            "name": "city",
+            "type": "input-city",
+            "label": "城市",
+            "itemClassName": "min-w-xs",
+            "searchable": true
+        }
+    ]
+}
+```
+
 ## 属性表

 当做选择器表单项使用时，除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置
--- a/packages/amis-ui/scss/_variables.scss
+++ b/packages/amis-ui/scss/_variables.scss
@ -279,6 +279,26 @@ $widths: map-merge(
  )
 ) !default;

+$minWidths: (
+  none: none,
+  0: 0rem,
+  xs: 20rem,
+  sm: 24rem,
+  md: 28rem,
+  lg: 32rem,
+  xl: 36rem,
+  2xl: 42rem,
+  3xl: 48rem,
+  4xl: 56rem,
+  5xl: 64rem,
+  6xl: 72rem,
+  7xl: 80rem,
+  full: 100%,
+  min: min-content,
+  max: max-content,
+  prose: 65ch
+) !default;
+
 $maxWidths: (
  none: none,
  0: 0rem,
--- a/packages/amis-ui/scss/helper/sizing/_width.md
+++ b/packages/amis-ui/scss/helper/sizing/_width.md
@ -2,97 +2,108 @@
 title: Width
 ---

-| Class       | Properties               |
-| ----------- | ------------------------ |
-| w-px | width: 0.0625rem |
-| w-0 | width: 0 |
-| w-none | width: 0 |
-| w-0\.5 | width: 0.125rem |
-| w-1 | width: 0.25rem |
-| w-1\.5 | width: 0.375rem |
-| w-2 | width: 0.5rem |
-| w-2\.5 | width: 0.625rem |
-| w-3 | width: 0.75rem |
-| w-3\.5 | width: 0.875rem |
-| w-4 | width: 1rem |
-| w-5 | width: 1.25rem |
-| w-6 | width: 1.5rem |
-| w-7 | width: 1.75rem |
-| w-8 | width: 2rem |
-| w-9 | width: 2.25rem |
-| w-10 | width: 2.5rem |
-| w-11 | width: 2.75rem |
-| w-12 | width: 3rem |
-| w-14 | width: 3.5rem |
-| w-16 | width: 4rem |
-| w-18 | width: 4.5rem |
-| w-20 | width: 5rem |
-| w-24 | width: 6rem |
-| w-28 | width: 7rem |
-| w-32 | width: 8rem |
-| w-36 | width: 9rem |
-| w-40 | width: 10rem |
-| w-44 | width: 11rem |
-| w-48 | width: 12rem |
-| w-52 | width: 13rem |
-| w-56 | width: 14rem |
-| w-60 | width: 15rem |
-| w-64 | width: 16rem |
-| w-72 | width: 18rem |
-| w-80 | width: 20rem |
-| w-96 | width: 24rem |
-| w-auto | width: auto |
-| w-1x | width: 1em |
-| w-2x | width: 2em |
-| w-3x | width: 3em |
-| w-1\/2 | width: 50% |
-| w-1\/3 | width: 33.333333% |
-| w-2\/3 | width: 66.666667% |
-| w-1\/4 | width: 25% |
-| w-2\/4 | width: 50% |
-| w-3\/4 | width: 75% |
-| w-1\/5 | width: 20% |
-| w-2\/5 | width: 40% |
-| w-3\/5 | width: 60% |
-| w-4\/5 | width: 80% |
-| w-1\/6 | width: 16.666667% |
-| w-2\/6 | width: 33.333333% |
-| w-3\/6 | width: 50% |
-| w-4\/6 | width: 66.666667% |
-| w-5\/6 | width: 83.333333% |
-| w-1\/12 | width: 8.333333% |
-| w-2\/12 | width: 16.666667% |
-| w-3\/12 | width: 25% |
-| w-4\/12 | width: 33.333333% |
-| w-5\/12 | width: 41.666667% |
-| w-6\/12 | width: 50% |
-| w-7\/12 | width: 58.333333% |
-| w-8\/12 | width: 66.666667% |
-| w-9\/12 | width: 75% |
-| w-10\/12 | width: 83.333333% |
-| w-11\/12 | width: 91.666667% |
-| w-full | width: 100% |
-| w-screen | width: 100vw |
-| w-min | width: min-content |
-| w-max | width: max-content |
-| min-w-0 | min-width: 0px |
-| min-w-full | min-width: 100% |
-| min-w-min | min-width: min-content |
-| min-w-max | min-width: max-content |
-| max-w-none | max-width: none |
-| max-w-0 | max-width: 0rem |
-| max-w-xs | max-width: 20rem |
-| max-w-sm | max-width: 24rem |
-| max-w-md | max-width: 28rem |
-| max-w-lg | max-width: 32rem |
-| max-w-xl | max-width: 36rem |
-| max-w-2xl | max-width: 42rem |
-| max-w-3xl | max-width: 48rem |
-| max-w-4xl | max-width: 56rem |
-| max-w-5xl | max-width: 64rem |
-| max-w-6xl | max-width: 72rem |
-| max-w-7xl | max-width: 80rem |
-| max-w-full | max-width: 100% |
-| max-w-min | max-width: min-content |
-| max-w-max | max-width: max-content |
-| max-w-prose | max-width: 65ch |
+| Class       | Properties             |
+| ----------- | ---------------------- |
+| w-px        | width: 0.0625rem       |
+| w-0         | width: 0               |
+| w-none      | width: 0               |
+| w-0\.5      | width: 0.125rem        |
+| w-1         | width: 0.25rem         |
+| w-1\.5      | width: 0.375rem        |
+| w-2         | width: 0.5rem          |
+| w-2\.5      | width: 0.625rem        |
+| w-3         | width: 0.75rem         |
+| w-3\.5      | width: 0.875rem        |
+| w-4         | width: 1rem            |
+| w-5         | width: 1.25rem         |
+| w-6         | width: 1.5rem          |
+| w-7         | width: 1.75rem         |
+| w-8         | width: 2rem            |
+| w-9         | width: 2.25rem         |
+| w-10        | width: 2.5rem          |
+| w-11        | width: 2.75rem         |
+| w-12        | width: 3rem            |
+| w-14        | width: 3.5rem          |
+| w-16        | width: 4rem            |
+| w-18        | width: 4.5rem          |
+| w-20        | width: 5rem            |
+| w-24        | width: 6rem            |
+| w-28        | width: 7rem            |
+| w-32        | width: 8rem            |
+| w-36        | width: 9rem            |
+| w-40        | width: 10rem           |
+| w-44        | width: 11rem           |
+| w-48        | width: 12rem           |
+| w-52        | width: 13rem           |
+| w-56        | width: 14rem           |
+| w-60        | width: 15rem           |
+| w-64        | width: 16rem           |
+| w-72        | width: 18rem           |
+| w-80        | width: 20rem           |
+| w-96        | width: 24rem           |
+| w-auto      | width: auto            |
+| w-1x        | width: 1em             |
+| w-2x        | width: 2em             |
+| w-3x        | width: 3em             |
+| w-1\/2      | width: 50%             |
+| w-1\/3      | width: 33.333333%      |
+| w-2\/3      | width: 66.666667%      |
+| w-1\/4      | width: 25%             |
+| w-2\/4      | width: 50%             |
+| w-3\/4      | width: 75%             |
+| w-1\/5      | width: 20%             |
+| w-2\/5      | width: 40%             |
+| w-3\/5      | width: 60%             |
+| w-4\/5      | width: 80%             |
+| w-1\/6      | width: 16.666667%      |
+| w-2\/6      | width: 33.333333%      |
+| w-3\/6      | width: 50%             |
+| w-4\/6      | width: 66.666667%      |
+| w-5\/6      | width: 83.333333%      |
+| w-1\/12     | width: 8.333333%       |
+| w-2\/12     | width: 16.666667%      |
+| w-3\/12     | width: 25%             |
+| w-4\/12     | width: 33.333333%      |
+| w-5\/12     | width: 41.666667%      |
+| w-6\/12     | width: 50%             |
+| w-7\/12     | width: 58.333333%      |
+| w-8\/12     | width: 66.666667%      |
+| w-9\/12     | width: 75%             |
+| w-10\/12    | width: 83.333333%      |
+| w-11\/12    | width: 91.666667%      |
+| w-full      | width: 100%            |
+| w-screen    | width: 100vw           |
+| min-w-none  | min-width: none        |
+| min-w-0     | min-width: 0rem        |
+| min-w-xs    | min-width: 20rem       |
+| min-w-sm    | min-width: 24rem       |
+| min-w-md    | min-width: 28rem       |
+| min-w-lg    | min-width: 32rem       |
+| min-w-xl    | min-width: 36rem       |
+| min-w-2xl   | min-width: 42rem       |
+| min-w-3xl   | min-width: 48rem       |
+| min-w-4xl   | min-width: 56rem       |
+| min-w-5xl   | min-width: 64rem       |
+| min-w-6xl   | min-width: 72rem       |
+| min-w-7xl   | min-width: 80rem       |
+| min-w-full  | min-width: 100%        |
+| min-w-min   | min-width: min-content |
+| min-w-max   | min-width: max-content |
+| min-w-prose | min-width: 65ch        |
+| max-w-none  | max-width: none        |
+| max-w-0     | max-width: 0rem        |
+| max-w-xs    | max-width: 20rem       |
+| max-w-sm    | max-width: 24rem       |
+| max-w-md    | max-width: 28rem       |
+| max-w-lg    | max-width: 32rem       |
+| max-w-xl    | max-width: 36rem       |
+| max-w-2xl   | max-width: 42rem       |
+| max-w-3xl   | max-width: 48rem       |
+| max-w-4xl   | max-width: 56rem       |
+| max-w-5xl   | max-width: 64rem       |
+| max-w-6xl   | max-width: 72rem       |
+| max-w-7xl   | max-width: 80rem       |
+| max-w-full  | max-width: 100%        |
+| max-w-min   | max-width: min-content |
+| max-w-max   | max-width: max-content |
+| max-w-prose | max-width: 65ch        |
--- a/packages/amis-ui/scss/helper/sizing/_width.scss
+++ b/packages/amis-ui/scss/helper/sizing/_width.scss
@ -115,6 +115,21 @@ title: Width


 */
+
+@mixin min-width-sizing($map: $minWidths, $prefix: '.') {
+  @each $name, $value in $map {
+    @if $name == default {
+      #{$prefix}min-w {
+        min-width: $value;
+      }
+    } @else {
+      #{$prefix}min-w-#{'' + selector-escape($name)} {
+        min-width: $value;
+      }
+    }
+  }
+}
+
@mixin max-width-sizing($map: $maxWidths, $prefix: '.') {
  @each $name, $value in $map {
    @if $name == default {
@ -148,6 +163,7 @@ title: Width
  }

  @include max-width-sizing($maxWidths, $prefix);
+  @include min-width-sizing($minWidths, $prefix);
 }

@include make-widths();
--- a/packages/amis/src/renderers/Form/InputCity.tsx
+++ b/packages/amis/src/renderers/Form/InputCity.tsx
@ -62,6 +62,11 @@ export interface InputCityControlSchema
   * 是否显示搜索框
   */
  searchable?: boolean;
+
+  /**
+   * 下拉框className
+   */
+  itemClassName?: string;
 }

 export interface CityPickerProps
@ -413,7 +418,8 @@ export class CityPicker extends React.Component<
      searchable,
      translate: __,
      loadingConfig,
-      popOverContainer
+      popOverContainer,
+      itemClassName
    } = this.props;

    const {provinceCode, cityCode, districtCode, street, db} = this.state;
@ -421,6 +427,7 @@ export class CityPicker extends React.Component<
    return db ? (
      <div className={cx('CityPicker', className)}>
        <Select
+          className={cx(itemClassName)}
          searchable={searchable}
          disabled={disabled}
          options={db.province.map(item => ({
@ -434,6 +441,7 @@ export class CityPicker extends React.Component<

        {allowCity && db.city[provinceCode] && db.city[provinceCode].length ? (
          <Select
+            className={cx(itemClassName)}
            searchable={searchable}
            disabled={disabled}
            options={db.city[provinceCode].map(item => ({
@ -450,6 +458,7 @@ export class CityPicker extends React.Component<
        allowDistrict &&
        (db.district[provinceCode]?.[cityCode] as any)?.length ? (
          <Select
+            className={cx(itemClassName)}
            searchable={searchable}
            disabled={disabled}
            options={(db.district[provinceCode][cityCode] as Array<number>).map(
@ -568,7 +577,8 @@ export class LocationControl extends React.Component<LocationControlProps> {
      searchable,
      env,
      useMobileUI,
-      popOverContainer
+      popOverContainer,
+      itemClassName
    } = this.props;
    const mobileUI = useMobileUI && isMobile();
    return mobileUI ? (
@ -586,6 +596,7 @@ export class LocationControl extends React.Component<LocationControlProps> {
      />
    ) : (
      <ThemedCity
+        itemClassName={itemClassName}
        popOverContainer={popOverContainer || env?.getModalContainer}
        searchable={searchable}
        value={value}