feat: official-layer 新增收起展开功能 (#31)

* feat: official-layer新增收起展开功能 * fix: 格式化代码 * fix: 格式化代码 --------- Co-authored-by: syb01094648 <syb01094648@antgroup.com>
antvis · Nov 27, 2023 · 5d9dae3 · 5d9dae3
1 parent 419c5ca
commit 5d9dae3
Show file tree

Hide file tree

Showing 2 changed files with 124 additions and 83 deletions.
diff --git a/src/components/map-control-group/official-layer-control/index.tsx b/src/components/map-control-group/official-layer-control/index.tsx
@@ -1,11 +1,13 @@
 import {
+  CaretRightOutlined,
   DeleteOutlined,
   FormOutlined,
   MinusCircleOutlined,
   PlusOutlined,
   UploadOutlined,
 } from '@ant-design/icons';
 import { CustomControl, RasterLayer } from '@antv/larkmap';
+import { useLocalStorageState } from 'ahooks';
 import type { UploadFile, UploadProps } from 'antd';
 import { Button, Form, Input, Modal, Popconfirm, Space, Upload } from 'antd';
 import classNames from 'classnames';
@@ -43,6 +45,12 @@ export function OfficialLayerControl() {
   const [editIndex, setEditIndex] = useState(-1);
   const [base64, setBase64] = useState<any>(null);
   const [fileList, setFileList] = useState<UploadFile[]>([]);
+  const [hideOfficeLayer, setHideOfficeLayer] = useLocalStorageState<boolean>(
+    'hideOfficeLayer',
+    {
+      defaultValue: true,
+    },
+  );
 
   const handleOk = () => {
     form.submit();
@@ -230,103 +238,118 @@ export function OfficialLayerControl() {
     <>
       <CustomControl position="bottomleft">
         <div className={styles.mapTab}>
-          <div className={styles.amapInfo}>
-            {officeLayerGroup.map((item, index) => {
-              return (
-                <div
-                  key={item.type}
-                  className={classNames([
-                    styles.amapInfoItem,
-                    item.type === radioValue
-                      ? styles.itemBorderActive
-                      : styles.itemBorder,
-                    index === officeLayerGroup.length - 1 ? 'item-hover' : '',
-                  ])}
-                  onClick={() => {
-                    onItemClick(item);
-                  }}
-                >
-                  {index > 1 && (
-                    <Popconfirm
-                      title={t('official_layer_control.index.shanChuDiTu')}
-                      onConfirm={(e) => onConfirm(e, item)}
-                      onCancel={(
-                        e: React.MouseEvent<HTMLElement> | undefined,
-                      ) => {
-                        e?.stopPropagation();
-                      }}
-                    >
+          <div
+            className={styles.hideOfficeLayerBtn}
+            onClick={() => {
+              setHideOfficeLayer(!hideOfficeLayer);
+            }}
+          >
+            <CaretRightOutlined
+              style={{
+                transform: hideOfficeLayer ? 'rotate(-180deg)' : undefined,
+              }}
+            />
+          </div>
+          {hideOfficeLayer && (
+            <div className={styles.amapInfo}>
+              {officeLayerGroup.map((item, index) => {
+                return (
+                  <div
+                    key={item.type}
+                    className={classNames([
+                      styles.amapInfoItem,
+                      item.type === radioValue
+                        ? styles.itemBorderActive
+                        : styles.itemBorder,
+                      index === officeLayerGroup.length - 1 ? 'item-hover' : '',
+                    ])}
+                    onClick={() => {
+                      onItemClick(item);
+                    }}
+                  >
+                    {index > 1 && (
+                      <Popconfirm
+                        title={t('official_layer_control.index.shanChuDiTu')}
+                        onConfirm={(e) => onConfirm(e, item)}
+                        onCancel={(
+                          e: React.MouseEvent<HTMLElement> | undefined,
+                        ) => {
+                          e?.stopPropagation();
+                        }}
+                      >
+                        <div
+                          className={'item-clear'}
+                          onClick={(e) => {
+                            e.stopPropagation();
+                          }}
+                        >
+                          <DeleteOutlined />
+                        </div>
+                      </Popconfirm>
+                    )}
+                    {index > 1 && (
                       <div
-                        className={'item-clear'}
+                        className={'item-edit'}
                         onClick={(e) => {
+                          setEditIndex(index);
                           e.stopPropagation();
-                        }}
-                      >
-                        <DeleteOutlined />
-                      </div>
-                    </Popconfirm>
-                  )}
-                  {index > 1 && (
-                    <div
-                      className={'item-edit'}
-                      onClick={(e) => {
-                        setEditIndex(index);
-                        e.stopPropagation();
-                        setIsEdit(true);
-                        setIsModalOpen(true);
-                        setFileList([
-                          {
-                            uid: '-1',
-                            name: `${item.title}`,
-                            status: 'done',
-                            url: item.image,
-                          },
-                        ]);
-                        form.setFieldsValue({
-                          name: item.title,
-                          urls: item.layers,
-                          img: [
+                          setIsEdit(true);
+                          setIsModalOpen(true);
+                          setFileList([
                             {
                               uid: '-1',
                               name: `${item.title}`,
                               status: 'done',
                               url: item.image,
                             },
-                          ],
-                        });
-                      }}
+                          ]);
+                          form.setFieldsValue({
+                            name: item.title,
+                            urls: item.layers,
+                            img: [
+                              {
+                                uid: '-1',
+                                name: `${item.title}`,
+                                status: 'done',
+                                url: item.image,
+                              },
+                            ],
+                          });
+                        }}
+                      >
+                        <FormOutlined />
+                      </div>
+                    )}
+                    <img
+                      src={item.image}
+                      alt=""
+                      className={styles.amapInfoItemImage}
+                    />
+                    <div
+                      className={styles.amapInfoItemTitle}
+                      style={{ marginTop: 0 }}
                     >
-                      <FormOutlined />
+                      {item.title}
                     </div>
-                  )}
-                  <img
-                    src={item.image}
-                    alt=""
-                    className={styles.amapInfoItemImage}
-                  />
-                  <div
-                    className={styles.amapInfoItemTitle}
-                    style={{ marginTop: 0 }}
-                  >
-                    {item.title}
                   </div>
-                </div>
-              );
-            })}
-            <div className={classNames(['add-map'])}>
-              <div
-                onClick={() => {
-                  setIsModalOpen(true);
-                  form.resetFields();
-                }}
-              >
-                <div className={styles.addMapIcon}>
-                  <PlusOutlined />
+                );
+              })}
+              <div className="add-map">
+                <div
+                  onClick={() => {
+                    setIsModalOpen(true);
+                    form.resetFields();
+                  }}
+                >
+                  <div className={styles.addMapIcon}>
+                    <PlusOutlined />
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
+          )}
         </div>
+
         <Modal
           title={t('official_layer_control.index.tianJiaDitu')}
           open={isModalOpen}

diff --git a/src/components/map-control-group/official-layer-control/styles.ts b/src/components/map-control-group/official-layer-control/styles.ts
@@ -4,11 +4,13 @@ import { theme } from 'antd';
 const useStyle = () => {
   const { useToken } = theme;
   const { token } = useToken();
-  const { colorBgElevated, colorBgContainer, colorText } = token;
+  const { colorBgElevated, colorBgContainer, colorText, colorIcon } = token;
   return {
     mapTab: css`
       background-color: ${colorBgElevated};
       border-radius: 4px;
+      display: flex;
+      align-items: center;
       &:hover .add-map {
         display: block;
       }
@@ -21,6 +23,22 @@ const useStyle = () => {
         }
       }
     `,
+    hideOfficeLayerBtn: css`
+      height: 127px;
+      width: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: ${colorBgElevated};
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 16px;
+      z-index: 2;
+      .anticon {
+        transition: all 0.2s;
+      }
+      color: ${colorIcon};
+    `,
     amapInfo: css`
       display: flex;
       align-items: center;
@@ -65,7 +83,7 @@ const useStyle = () => {
 
         &:hover {
           color: #1677ff;
-        } 
+        }
       }
 
       .item-clear {