@nocobase/client-v2 2.1.21 → 2.1.23

package/src/flow/models/fields/mobile-components/MobileSelect.tsx

@@ -12,8 +12,23 @@ import { Select } from 'antd';
 import { Button, CheckList, Popup, SearchBar } from 'antd-mobile';
 import React, { useEffect, useMemo, useState } from 'react';
 
+const mobileSelectSafeAreaPaddingBottom = 'calc(12px + env(safe-area-inset-bottom, 0px))';
+
+const mobileSelectConfirmFooterStyle: React.CSSProperties = {
+  paddingBottom: mobileSelectSafeAreaPaddingBottom,
+};
+
+function getMobileSelectListStyle(hasConfirmFooter: boolean): React.CSSProperties {
+  return {
+    maxHeight: '60vh',
+    overflowY: 'auto',
+    paddingBottom: hasConfirmFooter ? undefined : mobileSelectSafeAreaPaddingBottom,
+  };
+}
+
 export function MobileSelect(props) {
   const { value, displayValue, onChange, onChangeComplete, disabled, options = [], mode } = props;
+  const isMultiple = ['multiple', 'tags'].includes(mode);
   const ctx = useFlowModelContext();
   const t = ctx.t;
   const [visible, setVisible] = useState(false);
@@ -64,17 +79,12 @@ export function MobileSelect(props) {
         <div style={{ margin: '10px' }}>
           <SearchBar placeholder={t('search')} value={searchText} onChange={(v) => setSearchText(v)} showCancelButton />
         </div>
-        <div
-          style={{
-            maxHeight: '60vh',
-            overflowY: 'auto',
-          }}
-        >
+        <div style={getMobileSelectListStyle(isMultiple)}>
           <CheckList
-            multiple={['multiple', 'tags'].includes(mode)}
+            multiple={isMultiple}
             value={Array.isArray(selected) ? selected : [selected]}
             onChange={(val) => {
-              if (['multiple', 'tags'].includes(mode)) {
+              if (isMultiple) {
                 setSelected(val);
               } else {
                 setSelected(val[0]);
@@ -91,10 +101,12 @@ export function MobileSelect(props) {
             ))}
           </CheckList>
         </div>
-        {['multiple', 'tags'].includes(mode) && (
-          <Button block color="primary" onClick={handleConfirm} style={{ marginTop: '16px' }}>
-            {t('Confirm')}
-          </Button>
+        {isMultiple && (
+          <div style={mobileSelectConfirmFooterStyle}>
+            <Button block color="primary" onClick={handleConfirm} style={{ marginTop: '16px' }}>
+              {t('Confirm')}
+            </Button>
+          </div>
         )}
       </Popup>
     </>