fix: update quotaselect

packages/ImageSelect/src/index.js

@@ -50,7 +50,7 @@ const ImageSelect = ({ src, url, width, title, dataSource, onSearch, onSelect })
 
   const renderImageList = (data = []) => {
     return (
-      <Row gutter={[0, 24]}>
+      <Row gutter={[0, 12]}>
         {!!data &&
           data.map((item, index) => (
             <Col
@@ -93,39 +93,41 @@ const ImageSelect = ({ src, url, width, title, dataSource, onSearch, onSelect })
           </div>
         )}
       </div>
-      <Modal
-        width={width}
-        centered
-        title={
-          <div className={classNames(`${prefixCls}-modal-header`)}>
-            <div className={classNames(`${prefixCls}-modal-title`)}>{title}</div>
-            <Input
-              className={classNames(`${prefixCls}-modal-search`)}
-              placeholder="搜索图片关键词"
-              allowClear
-              bordered={false}
-              prefix={<SearchOutlined />}
-              onChange={onChange}
-              onPressEnter={onPressEnter}
-            />
-          </div>
-        }
-        footer={null}
-        visible={visible}
-        onCancel={handleCancel}
-        className={classNames(`${prefixCls}-modal`)}
-      >
-        {!!imgList.length &&
-          imgList.map((item, index) => {
-            return (
-              <div key={item.text + index} className={classNames(`${prefixCls}-modal-folder`)}>
-                <div className={classNames(`${prefixCls}-modal-path-title`)}>{item.text}</div>
-                <div>{renderImageList(item.list)}</div>
-              </div>
-            );
-          })}
-        {!imgList.length && <Empty />}
-      </Modal>
+      {visible && (
+        <Modal
+          width={width}
+          centered
+          title={
+            <div className={classNames(`${prefixCls}-modal-header`)}>
+              <div className={classNames(`${prefixCls}-modal-title`)}>{title}</div>
+              <Input
+                className={classNames(`${prefixCls}-modal-search`)}
+                placeholder="搜索图片关键词"
+                allowClear
+                bordered={false}
+                prefix={<SearchOutlined />}
+                onChange={onChange}
+                onPressEnter={onPressEnter}
+              />
+            </div>
+          }
+          footer={null}
+          visible={true}
+          onCancel={handleCancel}
+          className={classNames(`${prefixCls}-modal`)}
+        >
+          {!!imgList.length &&
+            imgList.map((item, index) => {
+              return (
+                <div key={item.text + index} className={classNames(`${prefixCls}-modal-folder`)}>
+                  <div className={classNames(`${prefixCls}-modal-path-title`)}>{item.text}</div>
+                  <div>{renderImageList(item.list)}</div>
+                </div>
+              );
+            })}
+          {!imgList.length && <Empty />}
+        </Modal>
+      )}
     </div>
   );
 };

packages/ImageSelect/src/index.less

@@ -80,8 +80,15 @@
   }
 
   &-item-wrap {
+    padding: 10px 0;
     text-align: center;
     border: 1px solid transparent;
+
+    &.selected {
+      background: linear-gradient(0deg, #f1f4fb 0%, #ffffff 100%);
+      border: 1px solid #b8d6fb;
+      border-radius: 2px;
+    }
   }
 
   &-item-wrap:hover {
@@ -96,12 +103,6 @@
     height: 40px;
   }
 
-  &.selected {
-    background: linear-gradient(0deg, #f1f4fb 0%, #ffffff 100%);
-    border: 1px solid #b8d6fb;
-    border-radius: 2px;
-  }
-
   &-item-text {
     font-size: 12px;
     white-space: nowrap;

packages/QuotaSelect/src/index.js

@@ -221,97 +221,99 @@ const QuotaSelect = ({
   return (
     <div className={classNames(prefixCls)}>
       <Button {...buttonProps} onClick={showModal} />
-      <Modal
-        centered
-        width={width}
-        title={title}
-        cancelText={cancelText}
-        okText={okText}
-        visible={visible}
-        onCancel={handleCancel}
-        onOk={onOk}
-        className={classNames(`${prefixCls}-modal`)}
-      >
-        <div className={classNames(`${prefixCls}-modal-wrap`)}>
-          <div className={classNames(`${prefixCls}-modal-left`)}>
-            <div className={classNames(`${prefixCls}-modal-select-wrap`)}>
-              <Input
-                className={classNames(`${prefixCls}-modal-search`)}
-                placeholder={placeholder}
-                bordered={false}
-                prefix={searchPrefix}
-                onChange={onSearch}
-                onPressEnter={onSearch}
-              />
-              <div className={classNames(`${prefixCls}-modal-target`)}>
-                <div>指标：</div>
-                <Radio.Group onChange={onRadioChange} defaultValue={targetValue}>
-                  <Radio.Button value="emphasis">重点指标</Radio.Button>
-                  <Radio.Button value="all">全部</Radio.Button>
-                </Radio.Group>
+      {visible && (
+        <Modal
+          centered
+          width={width}
+          title={title}
+          cancelText={cancelText}
+          okText={okText}
+          visible={true}
+          onCancel={handleCancel}
+          onOk={onOk}
+          className={classNames(`${prefixCls}-modal`)}
+        >
+          <div className={classNames(`${prefixCls}-modal-wrap`)}>
+            <div className={classNames(`${prefixCls}-modal-left`)}>
+              <div className={classNames(`${prefixCls}-modal-select-wrap`)}>
+                <Input
+                  className={classNames(`${prefixCls}-modal-search`)}
+                  placeholder={placeholder}
+                  bordered={false}
+                  prefix={searchPrefix}
+                  onChange={onSearch}
+                  onPressEnter={onSearch}
+                />
+                <div className={classNames(`${prefixCls}-modal-target`)}>
+                  <div>指标：</div>
+                  <Radio.Group onChange={onRadioChange} defaultValue={targetValue}>
+                    <Radio.Button value="emphasis">重点指标</Radio.Button>
+                    <Radio.Button value="all">全部</Radio.Button>
+                  </Radio.Group>
+                </div>
+                <div
+                  className={classNames(`${prefixCls}-modal-select`, {
+                    warning: !(selectData.length < maximum),
+                  })}
+                >
+                  {selectData.length < maximum ? (
+                    <>
+                      <ExclamationCircleFilled />
+                      <div>已选择 {selectData.length} 个指标</div>
+                    </>
+                  ) : (
+                    <>
+                      <ExclamationCircleFilled />
+                      <div>已达上限，最多选择 {maximum} 个指标</div>
+                    </>
+                  )}
+                </div>
               </div>
-              <div
-                className={classNames(`${prefixCls}-modal-select`, {
-                  warning: !(selectData.length < maximum),
-                })}
-              >
-                {selectData.length < maximum ? (
-                  <>
-                    <ExclamationCircleFilled />
-                    <div>已选择 {selectData.length} 个指标</div>
-                  </>
-                ) : (
-                  <>
-                    <ExclamationCircleFilled />
-                    <div>已达上限，最多选择 {maximum} 个指标</div>
-                  </>
-                )}
+              <div className={classNames(`${prefixCls}-modal-option-wrap`)}>
+                {!quotaList.length && <Empty />}
+                <Row gutter={[0, 6]}>
+                  {!!quotaList.length &&
+                    quotaList.map((item) => (
+                      <Col span={8} key={item.key}>
+                        <Checkbox
+                          value={item.title}
+                          checked={item.checked}
+                          disabled={
+                            (selectData.length > maximum || selectData.length === maximum) &&
+                            !item.checked
+                          }
+                          onChange={handleCheckboxChange}
+                        >
+                          {item.title}
+                        </Checkbox>
+                      </Col>
+                    ))}
+                </Row>
               </div>
             </div>
-            <div className={classNames(`${prefixCls}-modal-option-wrap`)}>
-              {!quotaList.length && <Empty />}
-              <Row gutter={[0, 6]}>
-                {!!quotaList.length &&
-                  quotaList.map((item) => (
-                    <Col span={8} key={item.key}>
-                      <Checkbox
-                        value={item.title}
-                        checked={item.checked}
-                        disabled={
-                          (selectData.length > maximum || selectData.length === maximum) &&
-                          !item.checked
-                        }
-                        onChange={handleCheckboxChange}
-                      >
-                        {item.title}
-                      </Checkbox>
-                    </Col>
+            <div className={classNames(`${prefixCls}-modal-right`)}>
+              <div className={classNames(`${prefixCls}-modal-number`)}>
+                已选：{selectData.length}/{maximum}
+              </div>
+              <div className={classNames(`${prefixCls}-modal-tree`)}>
+                <Tree draggable={true} onDrop={handleDrop} {...treeProps}>
+                  {selectData.map((item) => (
+                    <TreeNode
+                      key={item.key}
+                      title={
+                        <div className={classNames(`${prefixCls}-modal-tree-title`)}>
+                          <div>{item.title}</div>
+                          <CloseOutlined onClick={() => handleCancelSelect(item)} />
+                        </div>
+                      }
+                    />
                   ))}
-              </Row>
-            </div>
-          </div>
-          <div className={classNames(`${prefixCls}-modal-right`)}>
-            <div className={classNames(`${prefixCls}-modal-number`)}>
-              已选：{selectData.length}/{maximum}
-            </div>
-            <div className={classNames(`${prefixCls}-modal-tree`)}>
-              <Tree draggable={true} onDrop={handleDrop} {...treeProps}>
-                {selectData.map((item) => (
-                  <TreeNode
-                    key={item.key}
-                    title={
-                      <div className={classNames(`${prefixCls}-modal-tree-title`)}>
-                        <div>{item.title}</div>
-                        <CloseOutlined onClick={() => handleCancelSelect(item)} />
-                      </div>
-                    }
-                  />
-                ))}
-              </Tree>
+                </Tree>
+              </div>
             </div>
           </div>
-        </div>
-      </Modal>
+        </Modal>
+      )}
     </div>
   );
 };