version 1.1.8

feat: bottom res support folders
chore: Add loading for create org/group/login
fix: scanner https err tip
fix(table): fix table expansion problem

Author: ggbond2077

client/VERSION

@@ -1 +1 @@
-1.1.7
+1.1.8

client/packages/openblocks-comps/src/comps/calendarComp/calendarConstants.tsx

@@ -261,7 +261,7 @@ export const Wrapper = styled.div<{
     border-radius: 4px;
     box-shadow: 0 0px 10px 4px rgba(0, 0, 0, 0.25);
     overflow: hidden;
-    left: ${(props) => `min(${props.left}px, calc(100% - 202px)) !important`};
+    left: ${(props) => `min(${props.left}px, calc(100% - 210px)) !important`};
     .fc-popover-body {
       padding: 4px 0;
       min-width: 200px;
@@ -307,7 +307,8 @@ export const Wrapper = styled.div<{
   .fc-dayGridMonth-view .fc-more-link {
     margin: 0 2px 2px 2px !important;
   }
-  .fc-timeGridWeek-view .fc-more-link {
+  .fc-timeGridWeek-view .fc-more-link,
+  .fc-timeGridDay-view .fc-more-link {
     margin: 2px !important;
   }
   .fc-daygrid-day-events {

client/packages/openblocks-design/src/components/Collapase.tsx

@@ -3,7 +3,7 @@ import { ReactComponent as UnFold } from "icons/icon-unfold.svg";
 import { ReactComponent as Folded } from "icons/icon-folded.svg";
 import { ReactComponent as Omit } from "icons/icon-omit.svg";
 import styled, { css } from "styled-components";
-import React, { ReactNode, useMemo } from "react";
+import React, { ReactNode } from "react";
 
 const Panel = styled(AntdCollapse.Panel)`
   .ant-collapse-header-text {
@@ -72,6 +72,7 @@ interface Iprops {
   isSelected?: boolean;
   simple?: boolean; // no nested
   isOpen?: boolean;
+  className?: string;
 }
 
 export const PadDiv = styled.div`
@@ -99,7 +100,7 @@ export const Collapse = (props: Iprops) => {
   // };
   return (
     // <Contain $color={props.isSelected || Color!==""}>
-    <Container optColor={props.isSelected} simple={props.simple}>
+    <Container optColor={props.isSelected} simple={props.simple} className={props.className}>
       <AntdCollapse
         ghost
         expandIcon={getExpandIcon}

client/packages/openblocks-design/src/components/Search.tsx

@@ -43,6 +43,7 @@ const SearchDiv = styled.div<{ error?: boolean }>`
   }
 `;
 const SearchIcon = styled(Icon)`
+  color: #9195a3;
   margin: 6px 0 6px 8px;
 `;
 

client/packages/openblocks-design/src/components/Section.tsx

@@ -8,23 +8,28 @@ import { controlItem, ControlNode } from "./control";
 const SectionItem = styled.div<{ width?: number }>`
   width: ${(props) => (props.width ? props.width : 312)}px;
   border-bottom: 1px solid #e1e3eb;
+
   &:last-child {
     border-bottom: none;
   }
 `;
-const Sectionlabel = styled.span`
+const SectionLabel = styled.div`
   ${labelCss};
+  flex-grow: 1;
   font-size: 14px;
   color: #8b8fa3;
   line-height: 46px;
   font-weight: 600;
+
   :hover {
     cursor: pointer;
   }
 `;
+
 interface Irotate {
   deg: string;
 }
+
 const PackupIcon = styled(Packup)<Irotate>`
   height: 20px;
   width: 20px;
@@ -33,20 +38,26 @@ const PackupIcon = styled(Packup)<Irotate>`
   margin-right: 16px;
   color: #8b8fa3;
   transform: ${(props) => props.deg};
+
   :hover {
     cursor: pointer;
   }
 `;
 
-const SectionlabelDiv = styled.div`
+const SectionLabelDiv = styled.div`
+  display: flex;
+  justify-content: space-between;
   height: 46px;
   margin-left: 16px;
+
   :hover {
     cursor: pointer;
   }
-  &:hover ${Sectionlabel} {
+
+  &:hover ${SectionLabel} {
     color: #222222;
   }
+
   &:hover ${PackupIcon} path {
     fill: #222222;
   }
@@ -68,6 +79,7 @@ interface ISectionConfig<T> {
   noMargin?: boolean;
   style?: React.CSSProperties;
   children: T;
+  additionalButton?: React.ReactNode;
 }
 
 export interface PropertySectionState {
@@ -103,10 +115,13 @@ export const BaseSection = (props: ISectionConfig<ReactNode>) => {
   return (
     <SectionItem width={props.width} style={props.style}>
       {props.name && (
-        <SectionlabelDiv onClick={handleToggle}>
-          <Sectionlabel>{props.name}</Sectionlabel>
-          <PackupIcon deg={open ? "rotate(0deg)" : "rotate(180deg)"} />
-        </SectionlabelDiv>
+        <SectionLabelDiv onClick={handleToggle} className={"section-header"}>
+          <SectionLabel>{props.name}</SectionLabel>
+          <div style={{ display: "flex" }}>
+            {props.additionalButton}
+            <PackupIcon deg={open ? "rotate(0deg)" : "rotate(180deg)"} />
+          </div>
+        </SectionLabelDiv>
       )}
       <ShowChildren show={open ? "flex" : "none"} noMargin={props.noMargin}>
         {props.children}

client/packages/openblocks-design/src/components/button.tsx

@@ -134,7 +134,7 @@ const buttonStyleConfig = {
 };
 export type TacoButtonType = keyof typeof buttonStyleConfig;
 
-const StyledAntdButton = styled(Button)<{ $buttonType: TacoButtonType }>`
+const StyledAntdButton = styled(Button)<{ $buttonType: TacoButtonType; $loading: boolean }>`
   ${(props) => buttonStyleConfig[props.$buttonType]};
   display: flex;
   align-items: center;
@@ -148,19 +148,25 @@ const StyledAntdButton = styled(Button)<{ $buttonType: TacoButtonType }>`
     box-shadow: none;
   }
 
-  &.ant-btn-loading {
-    span {
-      display: none;
-    }
+  .ant-btn-loading-icon {
+    display: none;
   }
 
   & > svg {
+    ${(props) => props.$loading && "display: none;"}
     width: 12px;
     height: 12px;
     margin-right: 4px;
   }
 `;
 
+const loadingStyle: CSSProperties = {
+  position: "absolute",
+  left: "50%",
+  top: "50%",
+  transform: "translate(-50%, -50%)",
+};
+
 /**
  * antd button style adjustment when loading
  */
@@ -172,15 +178,34 @@ const TacoButton = forwardRef(
     ref: React.Ref<HTMLElement>
   ) => {
     const { buttonType, ...restProps } = props;
-    const LoadingComp = !buttonType || buttonType === "link" ? LightLoading : Loading;
+    let loadingBackground;
+    let loadingColor;
+    if (buttonType === "link") {
+      loadingBackground = "#fafbff";
+      loadingColor = "#3377FF";
+    } else if (buttonType === "delete") {
+      loadingBackground = "#fef4f4";
+      loadingColor = "#f73131";
+    }
     return (
-      <StyledAntdButton {...restProps} $buttonType={props.buttonType ?? "normal"} ref={ref}>
+      <StyledAntdButton
+        {...restProps}
+        $buttonType={props.buttonType ?? "normal"}
+        $loading={!!props.loading}
+        ref={ref}
+      >
         {props.loading ? (
-          buttonType === "delete" ? (
-            <LoadingComp backgroundColor={"#fef4f4"} color={"#f73131"} />
-          ) : (
-            <LoadingComp />
-          )
+          <>
+            <span style={{ visibility: "hidden" }}>
+              {props.icon}
+              {props.children}
+            </span>
+            <Loading
+              style={loadingStyle}
+              backgroundColor={loadingBackground}
+              color={loadingColor}
+            />
+          </>
         ) : (
           props.children
         )}

client/packages/openblocks-design/src/components/edit.tsx

@@ -81,6 +81,7 @@ export interface EditTextProps {
   prefixIcon?: ReactNode;
   text: string;
   disabled?: boolean;
+  forceClickIcon?: boolean;
   onFinish: (value: any) => void;
   onChange?: (value: any) => void;
   onEditStateChange?: (editing: boolean) => void;
@@ -107,6 +108,7 @@ export const EditText = (props: EditTextProps) => {
           $hasPrefix={!!props.prefixIcon}
           ref={inputRef}
           defaultValue={props.text}
+          onClick={(e) => e.stopPropagation()}
           onChange={(e) => props.onChange?.((e.target as HTMLInputElement).value)}
           onBlur={(e) => {
             props.onFinish(e.target.value);
@@ -123,12 +125,15 @@ export const EditText = (props: EditTextProps) => {
           disabled={props.disabled}
           hasPrefix={!!props.prefixIcon}
           className="taco-edit-text-wrapper"
-          onClick={() => !props.disabled && setEditing(true)}
+          onClick={() => !props.disabled && !props.forceClickIcon && setEditing(true)}
         >
           <TextWrapper className={"taco-edit-text-body"} title={props.text}>
             {props.text}
           </TextWrapper>
-          <EditIcon className={"taco-edit-text-icon"} />
+          <EditIcon
+            onClick={() => !props.disabled && setEditing(true)}
+            className={"taco-edit-text-icon"}
+          />
         </EditTextWrapper>
       )}
       {props.prefixIcon && <Prefix>{props.prefixIcon}</Prefix>}

client/packages/openblocks-design/src/icons/icon-Search.svg

@@ -144,6 +144,8 @@ export { ReactComponent as SearchIcon } from "./icon-Search.svg";
 export { ReactComponent as SearchOutlinedIcon } from "./icon-SearchOutlined.svg";
 export { ReactComponent as FilterIcon } from "./icon-filter.svg";
 export { ReactComponent as DownloadIcon } from "./icon-download.svg";
+export { ReactComponent as DownloadBoldIcon } from "./icon-download-bold.svg";
+export { ReactComponent as DownloadedIcon } from "./icon-downloaded.svg";
 export { ReactComponent as SettingIcon } from "./icon-setting.svg";
 export { ReactComponent as RefreshIcon } from "./icon-refresh.svg";
 export { ReactComponent as DeleteIcon } from "./icon-recycle-bin.svg";
@@ -154,6 +156,7 @@ export { ReactComponent as CloseIcon } from "./icon-close.svg";
 export { ReactComponent as SuccessIcon } from "./icon-success.svg";
 export { ReactComponent as ErrorIcon } from "./icon-err-warning.svg";
 export { ReactComponent as DocIcon } from "./icon-tutorial.svg";
+export { ReactComponent as DocBoldIcon } from "./icon-tutorial-bold.svg";
 export { ReactComponent as QRCodeCompIcon } from "./icon-qrcode.svg";
 export { ReactComponent as NavDocIcon } from "./icon-nav-doc.svg";
 export { ReactComponent as LabIcon } from "./icon-laboratory.svg";
@@ -280,3 +283,4 @@ export { ReactComponent as UnLockIcon } from "icons/icon-unlock.svg";
 export { ReactComponent as CalendarDeleteIcon } from "icons/icon-calendar-delete.svg";
 export { ReactComponent as TableCheckedIcon } from "icons/icon-table-checked.svg";
 export { ReactComponent as TableUnCheckedIcon } from "icons/icon-table-boolean-false.svg";
+export { ReactComponent as FileFolderIcon } from "icons/icon-editor-folder.svg";

client/packages/openblocks-design/src/icons/icon-download-bold.svg

@@ -0,0 +1,29 @@
+import Api from "./api";
+import { AxiosPromise } from "axios";
+import { GenericApiResponse } from "api/apiResponses";
+import { FetchJSLibraryMetasPayload } from "redux/reduxActions/jsLibraryActions";
+
+export interface JSLibraryMeta {
+  name: string;
+  latestVersion: string;
+  homepage?: string;
+  description?: string;
+}
+
+export interface RecommendedJSLibraryMeta extends JSLibraryMeta {
+  downloadUrl: string;
+}
+
+export class JSLibraryApi extends Api {
+  static url = "/misc/js-library";
+
+  static fetchMetas(
+    request: FetchJSLibraryMetasPayload
+  ): AxiosPromise<GenericApiResponse<JSLibraryMeta[]>> {
+    return Api.get(JSLibraryApi.url + `/metas`, { name: request.names.join(",") });
+  }
+
+  static fetchRecommends(): AxiosPromise<GenericApiResponse<RecommendedJSLibraryMeta[]>> {
+    return Api.get(JSLibraryApi.url + `/recommendations`);
+  }
+}