Merge pull request #7624 from allenve/master

feat: inputCity 支持itemClassName

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) 中的配置以外，还支持下面一些配置

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,

packages/amis-ui/scss/helper/sizing/_width.md

@@ -3,7 +3,7 @@ title: Width
 ---
 
 | Class       | Properties             |
-| ----------- | ------------------------ |
+| ----------- | ---------------------- |
 | w-px        | width: 0.0625rem       |
 | w-0         | width: 0               |
 | w-none      | width: 0               |
@@ -73,12 +73,23 @@ title: Width
 | 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-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       |

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();

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}