ソースを参照

Enhance dropdown styling across Alarm components

- Added a consistent dropdown style with high z-index to the Select components in complex.jsx, easy.jsx, and detail.jsx to ensure visibility and accessibility.
- Updated detail.jsx to accept a getPopupContainer prop for better control over the dropdown container.
valentichu 1 週間 前
コミット
0beefbb23a

ファイルの差分が大きいため隠しています
+ 0 - 0
lib/index.js


+ 5 - 0
src/pages/Alarm/components/complex.jsx

@@ -37,6 +37,8 @@ const getPaginationTotalText = (total) => {
   return dtLanguage === "en" ? `${total} items` : `共${total}条`;
 };
 
+const SELECT_DROPDOWN_STYLE = { zIndex: 99999999 };
+
 const Complex = (props, ref) => {
   const { message } = App.useApp();
   const { editId, groupList = [], showList, formula } = props;
@@ -325,6 +327,7 @@ const Complex = (props, ref) => {
                     <Select
                       value={alarmId}
                       onChange={setAlarmId}
+                      dropdownStyle={SELECT_DROPDOWN_STYLE}
                       style={{ width: 320 }}
                       options={ruleOptions}
                       placeholder={TranslateText(["请选择规则", "Please choose rule"])}
@@ -362,6 +365,7 @@ const Complex = (props, ref) => {
                   name={"group_id"}
                 >
                   <Select
+                    dropdownStyle={SELECT_DROPDOWN_STYLE}
                     style={{ width: 200 }}
                     options={[
                       ...[
@@ -396,6 +400,7 @@ const Complex = (props, ref) => {
                 >
                   <Select
                     placeholder={TranslateText(["请选择", "Please choose"])}
+                    dropdownStyle={SELECT_DROPDOWN_STYLE}
                     style={{ width: "200px" }}
                   >
                     <Select.Option value={1}>

+ 2 - 1
src/pages/Alarm/components/detail.jsx

@@ -34,7 +34,7 @@ function TranslateText(arr) {
 }
 
 const Detail = (props) => {
-  const { options, isDiagram } = props;
+  const { options, isDiagram, getPopupContainer } = props;
   const [tags, setTags] = useState([]);
   const [current, setCurrent] = useState("history");
   const [ruleId, setRuleId] = useState(undefined);
@@ -105,6 +105,7 @@ const Detail = (props) => {
         title={TranslateText(["告警记录", "Alarm Record"])}
         centered
         open={props.open}
+        getContainer={getPopupContainer}
         width="90vw"
         onCancel={() => {
           props.onCancel();

+ 5 - 0
src/pages/Alarm/components/easy.jsx

@@ -37,6 +37,8 @@ function TranslateText(arr) {
   return arr?.[0];
 }
 
+const SELECT_DROPDOWN_STYLE = { zIndex: 99999999 };
+
 const Easy = (props, ref) => {
   const { editId, groupList = [], pointId = null } = props;
   const [form] = Form.useForm();
@@ -501,6 +503,7 @@ const Easy = (props, ref) => {
             disabled={alarmId !== -1 || props.readonly}
             filterOption={false}
             dropdownMatchSelectWidth={400}
+            dropdownStyle={SELECT_DROPDOWN_STYLE}
             labelInValue={true}
             onChange={(e) => {
               onChange(e);
@@ -813,6 +816,7 @@ const Easy = (props, ref) => {
         >
           <Select
             placeholder={TranslateText(["请选择", "Please choose"])}
+            dropdownStyle={SELECT_DROPDOWN_STYLE}
             style={{ width: "200px" }}
           >
             <Select.Option value={1}>
@@ -848,6 +852,7 @@ const Easy = (props, ref) => {
 
         <Form.Item label={TranslateText(["告警组", "Group"])} name={"group_id"}>
           <Select
+            dropdownStyle={SELECT_DROPDOWN_STYLE}
             style={{ width: 200 }}
             options={[
               ...[

この差分においてかなりの量のファイルが変更されているため、一部のファイルを表示していません