From 54786b81f59cc0734f26e9edb2fcdf965f0dee5e Mon Sep 17 00:00:00 2001 From: RAHEEL Date: Fri, 29 Dec 2023 01:08:00 +0500 Subject: [PATCH 01/41] publish comps workflow --- .github/workflows/publish-comps.yml | 51 +++++++++++++++++++++++++++++ 1 file changed, 51 insertions(+) create mode 100644 .github/workflows/publish-comps.yml diff --git a/.github/workflows/publish-comps.yml b/.github/workflows/publish-comps.yml new file mode 100644 index 000000000..dd42d3ccd --- /dev/null +++ b/.github/workflows/publish-comps.yml @@ -0,0 +1,51 @@ +# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created +# For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages + +name: Publish Lowcoder Comps + +on: + push: + branches: [ "publish-comps-workflow" ] + +jobs: + build: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v3 + with: + fetch-depth: 0 + - uses: actions/setup-node@v3 + - name: Install dependencies + uses: borales/actions-yarn@v4.2.0 + with: + cmd: install + dir: client/packages/lowcoder-comps + - name: Run tests + uses: borales/actions-yarn@v4.2.0 + with: + cmd: test + dir: client/packages/lowcoder-comps + + publish-package: + needs: build + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v3 + - uses: actions/setup-node@v3 + with: + node-version: 16 + registry-url: https://registry.npmjs.org/ + - run: cat .npmrc + - run: echo ${{ secrets.NPM_TOKEN }} + - name: Install dependencies + uses: borales/actions-yarn@v4.2.0 + with: + cmd: install + dir: client/packages/lowcoder-comps + - name: Publish + uses: borales/actions-yarn@v4.2.0 + with: + cmd: build_publish + dir: client/packages/lowcoder-comps + env: + NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}} \ No newline at end of file From ae43e5f2e77fecf665de0443c5947bdb34301143 Mon Sep 17 00:00:00 2001 From: RAHEEL Date: Sat, 30 Dec 2023 01:21:31 +0500 Subject: [PATCH 02/41] upgrade styles-components dependency --- client/package.json | 4 +- .../src/comps/calendarComp/calendarComp.tsx | 6 +- .../comps/calendarComp/calendarConstants.tsx | 18 +- .../chartComp/chartConfigs/chartUrls.tsx | 2 +- .../src/comps/chartComp/chartUtils.ts | 4 +- .../src/components/Collapase.tsx | 20 +- .../src/components/CustomModal.tsx | 6 +- .../src/components/Dropdown.tsx | 28 +- .../src/components/ExternalLink.tsx | 2 +- .../lowcoder-design/src/components/Label.tsx | 26 +- .../src/components/Loading.tsx | 40 +-- .../lowcoder-design/src/components/Menu.tsx | 2 +- .../src/components/MenuItem.tsx | 12 +- .../src/components/Modal/handler.tsx | 30 +- .../lowcoder-design/src/components/Search.tsx | 2 +- .../src/components/Section.tsx | 22 +- .../src/components/SuspensionBox.tsx | 8 +- .../lowcoder-design/src/components/Switch.tsx | 16 +- .../lowcoder-design/src/components/Tab.tsx | 14 +- .../lowcoder-design/src/components/button.tsx | 24 +- .../src/components/colorSelect/index.tsx | 16 +- .../src/components/control.tsx | 36 +- .../src/components/customSelect.tsx | 16 +- .../lowcoder-design/src/components/edit.tsx | 10 +- .../lowcoder-design/src/components/form.tsx | 12 +- .../src/components/iconSelect/index.tsx | 8 +- .../src/components/keyValueList.tsx | 6 +- .../lowcoder-design/src/components/option.tsx | 18 +- .../src/components/popover.tsx | 10 +- .../src/components/popupCard.tsx | 6 +- .../lowcoder-design/src/components/query.tsx | 6 +- .../src/components/tacoInput.tsx | 24 +- .../src/components/toolTip.tsx | 20 +- client/packages/lowcoder/package.json | 4 +- client/packages/lowcoder/src/app-env.d.ts | 5 +- .../src/base/codeEditor/codeEditor.tsx | 48 +-- .../lowcoder/src/components/ColorPicker.tsx | 8 +- .../lowcoder/src/components/CompName.tsx | 16 +- .../src/components/CreateAppButton.tsx | 2 +- .../DraggableTree/DraggableItem.tsx | 62 ++-- .../DraggableTree/DroppablePlaceHolder.tsx | 42 +-- .../src/components/JSLibraryModal.tsx | 10 +- .../lowcoder/src/components/JSLibraryTree.tsx | 6 +- .../src/components/KeyValueItemList.tsx | 12 +- .../src/components/LinkPlusButton.tsx | 2 +- .../PermissionDialog/Permission.tsx | 18 +- .../PermissionDialog/PermissionDialog.tsx | 6 +- .../PermissionDialog/PermissionList.tsx | 18 +- .../PermissionDialog/commonComponents.tsx | 14 +- .../src/components/ResCreatePanel.tsx | 28 +- .../lowcoder/src/components/SnapshotList.tsx | 8 +- .../src/components/TypographyText.tsx | 4 +- .../lowcoder/src/components/layout/Header.tsx | 8 +- .../lowcoder/src/components/layout/Layout.tsx | 4 +- .../src/components/layout/SideBarItem.tsx | 14 +- .../resultPanel/BottomResultPanel.tsx | 6 +- .../src/components/resultPanel/index.tsx | 2 +- .../src/components/table/columnTypeView.tsx | 54 +-- .../src/comps/comps/appSettingsComp.tsx | 14 +- .../comps/buttonComp/toggleButtonComp.tsx | 16 +- .../lowcoder/src/comps/comps/carouselComp.tsx | 12 +- .../comps/containerComp/containerView.tsx | 6 +- .../comps/containerComp/flowContainerView.tsx | 10 +- .../src/comps/comps/formComp/createForm.tsx | 36 +- .../comps/comps/gridLayoutComp/canvasView.tsx | 20 +- .../comps/comps/layout/mobileTabLayout.tsx | 8 +- .../videoMeetingControllerComp.tsx | 2 +- .../meetingComp/videoMeetingStreamComp.tsx | 2 +- .../meetingComp/videoSharingStreamComp.tsx | 4 +- .../moduleContainerComp.tsx | 6 +- .../navComp/components/DraggableItem.tsx | 10 +- .../components/DroppablePlaceHolder.tsx | 6 +- .../src/comps/comps/navComp/navComp.tsx | 42 +-- .../lowcoder/src/comps/comps/preLoadComp.tsx | 2 +- .../comps/queryLibrary/inputListComp.tsx | 10 +- .../comps/queryLibrary/queryLibraryComp.tsx | 8 +- .../src/comps/comps/richTextEditorComp.tsx | 8 +- .../selectInputComp/selectCompConstants.tsx | 2 +- .../src/comps/comps/signatureComp.tsx | 6 +- .../column/columnTypeComps/columnLinkComp.tsx | 2 +- .../columnTypeComps/columnLinksComp.tsx | 2 +- .../columnTypeComps/columnProgressComp.tsx | 2 +- .../comps/comps/tableComp/tableCompView.tsx | 28 +- .../comps/tableComp/tablePropertyView.tsx | 4 +- .../comps/tableComp/tableToolbarComp.tsx | 30 +- .../lowcoder/src/comps/comps/textComp.tsx | 10 +- .../comps/triContainerComp/triContainer.tsx | 38 +-- .../src/comps/controls/boolControl.tsx | 16 +- .../src/comps/controls/keyValueControl.tsx | 12 +- .../src/comps/controls/labelControl.tsx | 52 +-- .../src/comps/controls/multiSelectControl.tsx | 8 +- .../queries/httpQuery/httpQueryConstants.tsx | 8 +- .../src/layout/compSelectionWrapper.tsx | 76 ++--- .../lowcoder/src/layout/gridLayout.tsx | 32 +- .../packages/lowcoder/src/layout/handler.tsx | 30 +- .../pages/ApplicationV2/CreateDropdown.tsx | 13 +- .../src/pages/ApplicationV2/HomeLayout.tsx | 2 +- .../src/pages/ApplicationV2/HomeResCard.tsx | 8 +- .../pages/ApplicationV2/HomeResOptions.tsx | 2 +- .../pages/ApplicationV2/TrashTableView.tsx | 3 +- .../src/pages/ApplicationV2/index.tsx | 24 +- .../src/pages/ComponentDoc/common/Example.tsx | 6 +- .../lowcoder/src/pages/common/header.tsx | 6 +- .../lowcoder/src/pages/common/help.tsx | 8 +- .../lowcoder/src/pages/common/orgLogo.tsx | 2 +- .../src/pages/common/previewHeader.tsx | 6 +- .../src/pages/common/profileImage.tsx | 24 +- .../src/pages/common/shortcutListPopup.tsx | 18 +- .../src/pages/common/styledComponent.tsx | 14 +- .../pages/datasource/datasourceEditPage.tsx | 8 +- .../src/pages/datasource/datasourceList.tsx | 2 +- .../src/pages/datasource/datasourceModal.tsx | 12 +- .../datasource/form/esDatasourceForm.tsx | 4 +- .../form/googleSheetsDatasourceForm.tsx | 4 +- .../datasource/form/graphqlDatasourceForm.tsx | 8 +- .../datasource/form/httpDatasourceForm.tsx | 8 +- .../datasource/form/mongoDatasourceForm.tsx | 2 +- .../datasource/form/oracleDatasourceForm.tsx | 4 +- .../datasource/form/pluginDataSourceForm.tsx | 4 +- .../datasource/form/redisDatasourceForm.tsx | 2 +- .../datasource/form/smtpDatasourceForm.tsx | 4 +- .../form/snowflakeDatasourceForm.tsx | 4 +- .../datasource/form/sqlDatasourceForm.tsx | 4 +- .../lowcoder/src/pages/editor/LeftContent.tsx | 2 +- .../lowcoder/src/pages/editor/appSnapshot.tsx | 2 +- .../pages/editor/bottom/BottomMetaDrawer.tsx | 8 +- .../src/pages/editor/bottom/BottomSidebar.tsx | 30 +- .../src/pages/editor/bottom/BottomTabs.tsx | 44 +-- .../src/pages/editor/codeEditorPanel.tsx | 4 +- .../lowcoder/src/pages/editor/editorView.tsx | 10 +- .../pages/editor/right/styledComponent.tsx | 10 +- .../src/pages/editor/right/uiCompPanel.tsx | 2 +- .../src/pages/editor/styledComponents.tsx | 4 +- .../src/pages/queryLibrary/LeftNav.tsx | 30 +- .../queryLibrary/QueryLibraryHistoryView.tsx | 12 +- .../queryLibrary/queryLibraryEditorView.tsx | 4 +- .../setting/permission/styledComponents.tsx | 8 +- .../setting/profile/profileComponets.tsx | 2 +- .../src/pages/setting/theme/createModal.tsx | 2 +- .../pages/setting/theme/styledComponents.tsx | 44 +-- .../src/pages/setting/theme/themeList.tsx | 2 +- .../src/pages/userAuth/authComponents.tsx | 12 +- .../lowcoder/src/util/bottomResUtils.tsx | 18 +- client/yarn.lock | 317 +++++++++++++----- 144 files changed, 1188 insertions(+), 1040 deletions(-) diff --git a/client/package.json b/client/package.json index 0b64d0cd5..2f49baf8c 100644 --- a/client/package.json +++ b/client/package.json @@ -34,7 +34,6 @@ "@types/react-resizable": "^3.0.5", "@types/react-router-dom": "^5.3.2", "@types/shelljs": "^0.8.11", - "@types/styled-components": "^5.1.19", "@types/stylis": "^4.0.2", "@types/tern": "0.23.4", "@types/ua-parser-js": "^0.7.36", @@ -71,6 +70,9 @@ }, "dependencies": { "@lottiefiles/react-lottie-player": "^3.5.3", + "@testing-library/react": "^14.1.2", + "@testing-library/user-event": "^14.5.1", + "@types/styled-components": "^5.1.34", "antd-mobile": "^5.28.0", "chalk": "4", "number-precision": "^1.6.0", diff --git a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx index 37c15507f..0265ab4c8 100644 --- a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx @@ -290,11 +290,11 @@ let CalendarBasicComp = (function () { return ( ` position: relative; height: 100%; @@ -205,9 +205,9 @@ export const Wrapper = styled.div<{ flex-direction: inherit; } .fc-day-today .fc-daygrid-day-number { - background-color: ${(props) => props.theme.primary}; + background-color: ${(props) => props.$theme.primary}; color: ${(props) => - contrastText(props.theme.primary || "", props.theme.textDark, props.theme.textLight)}; + contrastText(props.$theme.primary || "", props.$theme.textDark, props.$theme.textLight)}; } .fc-daygrid-day-events { padding: 1px 0 5px 0; @@ -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% - 210px)) !important`}; + left: ${(props) => `min(${props.$left}px, calc(100% - 210px)) !important`}; .fc-popover-body { padding: 4px 0; min-width: 200px; @@ -368,7 +368,7 @@ export const Wrapper = styled.div<{ } &:hover { .event-remove { - opacity: ${(props) => props.editable && 1}; + opacity: ${(props) => props.$editable ? 1 : undefined}; } } } @@ -585,10 +585,10 @@ export const Wrapper = styled.div<{ } .fc-day-today.fc-col-header-cell { background-color: ${(props) => - isDarkColor(props.$style.background) ? "#ffffff19" : toHex(props.theme.primary!) + "19"}; + isDarkColor(props.$style.background) ? "#ffffff19" : toHex(props.$theme.primary!) + "19"}; a { color: ${(props) => - !isDarkColor(props.$style.background) && darkenColor(props.theme.primary!, 0.1)}; + !isDarkColor(props.$style.background) && darkenColor(props.$theme.primary!, 0.1)}; } } .fc-col-header-cell-cushion { diff --git a/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/chartUrls.tsx b/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/chartUrls.tsx index 320bfc0c1..ef8ada4b0 100644 --- a/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/chartUrls.tsx +++ b/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/chartUrls.tsx @@ -4,6 +4,6 @@ const echartsUrlLocale = language === "zh" ? "zh" : "en"; export const optionUrl = `https://echarts.apache.org/${echartsUrlLocale}/option.html`; export const examplesUrl = `https://echarts.apache.org/examples/${echartsUrlLocale}/index.html`; export const xAxisTypeUrl = `${optionUrl}#xAxis.type`; -export const googleMapsApiUrl = `https://maps.googleapis.com/maps/api/js?v=3.exp`; +export const googleMapsApiUrl = `https://maps.googleapis.com/maps/api/js`; export const mapOptionUrl = `https://github.com/plainheart/echarts-extension-gmap`; export const mapExamplesUrl = `https://codepen.io/plainheart/pen/VweLGbR`; \ No newline at end of file diff --git a/client/packages/lowcoder-comps/src/comps/chartComp/chartUtils.ts b/client/packages/lowcoder-comps/src/comps/chartComp/chartUtils.ts index 2e784b56f..8a1d912fe 100644 --- a/client/packages/lowcoder-comps/src/comps/chartComp/chartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/chartComp/chartUtils.ts @@ -266,8 +266,8 @@ export function getSelectedPoints(param: any, option: any) { return []; } -export function loadGoogleMapsScript(apiKey?: string) { - const mapsUrl = `${googleMapsApiUrl}&key=${apiKey}`; +export function loadGoogleMapsScript(apiKey: string) { + const mapsUrl = `${googleMapsApiUrl}?key=${apiKey}`; const scripts = document.getElementsByTagName('script'); // is script already loaded let scriptIndex = _.findIndex(scripts, (script) => script.src.endsWith(mapsUrl)); diff --git a/client/packages/lowcoder-design/src/components/Collapase.tsx b/client/packages/lowcoder-design/src/components/Collapase.tsx index 63b849835..72045ca81 100644 --- a/client/packages/lowcoder-design/src/components/Collapase.tsx +++ b/client/packages/lowcoder-design/src/components/Collapase.tsx @@ -5,22 +5,16 @@ import { ReactComponent as Omit } from "icons/icon-omit.svg"; import styled, { css } from "styled-components"; import React, { ReactNode } from "react"; -const Panel = styled(AntdCollapse.Panel)` - .ant-collapse-header-text { - max-width: calc(100% - 14px); - } -`; - -const Container = styled.div<{ optColor?: boolean; simple?: boolean }>` +const Container = styled.div<{ $optColor?: boolean; $simple?: boolean }>` &&& { - background: ${(props) => (props.optColor ? "#f2f7fc" : null)}; + background: ${(props) => (props.$optColor ? "#f2f7fc" : null)}; } cursor: pointer; - padding-left: ${(props) => (props.simple ? 0 : "2px")}; + padding-left: ${(props) => (props.$simple ? 0 : "2px")}; &:hover { - background-color: ${(props) => (props.simple ? "#FFFFFF" : "#f2f7fc80")}; + background-color: ${(props) => (props.$simple ? "#FFFFFF" : "#f2f7fc80")}; } .ant-collapse > .ant-collapse-item > .ant-collapse-header { @@ -39,12 +33,12 @@ const Container = styled.div<{ optColor?: boolean; simple?: boolean }>` font-weight: 500; font-size: 13px; line-height: 13px; - padding-left: ${(props) => (props.simple ? 0 : "6px")}; + padding-left: ${(props) => (props.$simple ? 0 : "6px")}; user-select: none; } .ant-collapse > .ant-collapse-item > .ant-collapse-header .ant-collapse-arrow { - margin-right: ${(props) => (props.simple ? 0 : "2px")}; + margin-right: ${(props) => (props.$simple ? 0 : "2px")}; } `; @@ -106,7 +100,7 @@ export const Collapse = (props: Iprops) => { return ( // - + ` display: flex; flex-direction: column; - width: ${(props) => (props.width ? props.width : "368px")}; + width: ${(props) => (props.$width ? props.$width : "368px")}; height: fit-content; background: #ffffff; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1); @@ -217,7 +217,7 @@ const DEFAULT_PROPS = { function CustomModalRender(props: CustomModalProps & ModalFuncProps) { return ( - + <> ` +export const DropdownContainer = styled.div<{ $placement: ControlPlacement }>` display: flex; height: 32px; width: ${(props) => - props.placement === "right" + props.$placement === "right" ? "calc(100% - 96px)" : "bottom" ? "calc(100% - 112px)" @@ -35,18 +35,18 @@ export const DropdownContainer = styled.div<{ placement: ControlPlacement }>` } > div { - width: 100%; + width: 100% !important; } ${(props) => - props.placement === "bottom" && + props.$placement === "bottom" && ` > div { width: 184px; flex-grow: 1; } - ::after { + &::after { content: ""; width: 264px; flex-grow: 1; @@ -60,21 +60,21 @@ const DropDownItemLabel = styled.div` line-height: 15px; `; -const SegmentedWrapper = styled.div<{ placement: ControlPlacement }>` +const SegmentedWrapper = styled.div<{ $placement: ControlPlacement }>` display: flex; height: 28px; - width: ${(props) => (props.placement === "right" ? "calc(100% - 96px)" : "100% - 112px")}; + width: ${(props) => (props.$placement === "right" ? "calc(100% - 96px)" : "100% - 112px")}; flex-grow: 1; ${(props) => - props.placement === "bottom" && + props.$placement === "bottom" && ` > div { width: 184px; flex-grow: 1; } - ::after { + &::after { content: ""; width: 264px; flex-grow: 1; @@ -120,9 +120,9 @@ const FlexDiv = styled.div` align-items: center; `; -const LabelWrapper = styled.div<{ placement: ControlPlacement }>` +const LabelWrapper = styled.div<{ $placement: ControlPlacement }>` flex-shrink: 0; - width: ${(props) => (props.placement === "right" ? "96px" : "bottom" ? "112px" : "136px")}; + width: ${(props) => (props.$placement === "right" ? "96px" : "bottom" ? "112px" : "136px")}; `; export type OptionType = { @@ -159,14 +159,14 @@ export function Dropdown(props: DropdownProps) { return ( {props.label && ( - + )} {!props.radioButton && ( - + (props: DropdownProps) { )} {props.radioButton && ( - + props.onChange(value.toString())} diff --git a/client/packages/lowcoder-design/src/components/ExternalLink.tsx b/client/packages/lowcoder-design/src/components/ExternalLink.tsx index d496a497e..51fcb3c8e 100644 --- a/client/packages/lowcoder-design/src/components/ExternalLink.tsx +++ b/client/packages/lowcoder-design/src/components/ExternalLink.tsx @@ -9,7 +9,7 @@ export const ExternalLink = styled.a` display: inline-flex; align-items: center; - :hover { + &:hover { color: ${ActiveTextColor}; } `; diff --git a/client/packages/lowcoder-design/src/components/Label.tsx b/client/packages/lowcoder-design/src/components/Label.tsx index c07eed08a..0ec5cce40 100644 --- a/client/packages/lowcoder-design/src/components/Label.tsx +++ b/client/packages/lowcoder-design/src/components/Label.tsx @@ -7,7 +7,7 @@ export const labelCss: any = css` font-size: 13px; color: #222222; - :hover { + &:hover { cursor: default; } `; @@ -67,21 +67,21 @@ export const BlockLabel = (props: IBlocklabel) => { // Title text in each line of Collapse const LeftTitle = styled.span<{ - color?: string; - line?: number; - hasChild?: boolean; + $color?: string; + $line?: number; + $hasChild?: boolean; }>` word-wrap: break-word; word-break: break-all; white-space: pre-wrap; user-select: none; font-size: 13px; - line-height: ${(props) => (props.line ? props.line : 23)}px; - color: ${(props) => (props.color ? props.color : "#333333")}; + line-height: ${(props) => (props.$line ? props.$line : 23)}px; + color: ${(props) => (props.$color ? props.$color : "#333333")}; margin-right: 8px; - font-weight: ${(props) => (props.hasChild ? "600" : "normal")}; + font-weight: ${(props) => (props.$hasChild ? "600" : "normal")}; - :hover { + &:hover { cursor: pointer; } `; @@ -97,7 +97,7 @@ interface ICollapseTitle { export const CollapseTitle = (props: ICollapseTitle) => { const { color, label, lineHeight, hasChild } = props; return ( - + {label} ); @@ -140,16 +140,16 @@ export const CommonGrayLabel = styled.p` margin: 0; `; -export const CommonErrorLabel = styled.p<{ fontSize?: number }>` - font-size: ${(props) => (props.fontSize ? props.fontSize : 12)}px; - line-height: ${(props) => (props.fontSize ? props.fontSize : 12)}px; +export const CommonErrorLabel = styled.p<{ $fontSize?: number }>` + font-size: ${(props) => (props.$fontSize ? props.$fontSize : 12)}px; + line-height: ${(props) => (props.$fontSize ? props.$fontSize : 12)}px; color: #f73131; margin: 0; `; export const CommonBlueLabel = styled.span` ${labelCss} - :hover { + &:hover { cursor: pointer; } diff --git a/client/packages/lowcoder-design/src/components/Loading.tsx b/client/packages/lowcoder-design/src/components/Loading.tsx index 97adc7232..21718bd07 100644 --- a/client/packages/lowcoder-design/src/components/Loading.tsx +++ b/client/packages/lowcoder-design/src/components/Loading.tsx @@ -2,9 +2,9 @@ import styled, { css } from "styled-components"; import { CSSProperties } from "react"; type LoadingContainerProps = { - backgroundColor: string; - color: string; - size: number; + $backgroundColor: string; + $color: string; + $size: number; }; const LoadingWrapper = styled.div` @@ -16,8 +16,8 @@ const LoadingWrapper = styled.div` // Loading const ContainerX = styled.div` - height: ${(props) => props.size}px; - width: ${(props) => props.size}px; + height: ${(props) => props.$size}px; + width: ${(props) => props.$size}px; animation: circle infinite 1.75s linear; @keyframes circle { 0% { @@ -29,14 +29,14 @@ const ContainerX = styled.div` } `; const Container = styled.div` - height: ${(props) => props.size / 2}px; - width: ${(props) => props.size}px; - background-color: ${(props) => props.backgroundColor}; + height: ${(props) => props.$size / 2}px; + width: ${(props) => props.$size}px; + background-color: ${(props) => props.$backgroundColor}; overflow: hidden; `; const loadcss = css` - width: ${(props) => props.size}px; - height: ${(props) => props.size}px; + width: ${(props) => props.$size}px; + height: ${(props) => props.$size}px; border: solid 2.5px transparent; border-radius: 999px; background-origin: border-box; @@ -46,19 +46,19 @@ const loadcss = css` const Load1 = styled.div` ${loadcss}; background-image: linear-gradient( - ${(props) => props.backgroundColor}, - ${(props) => props.backgroundColor} + ${(props) => props.$backgroundColor}, + ${(props) => props.$backgroundColor} ), - linear-gradient(to left, ${(props) => props.color}, ${(props) => props.color}91); + linear-gradient(to left, ${(props) => props.$color}, ${(props) => props.$color}91); `; const Load2 = styled.div` ${loadcss}; - transform: translateY(-${(props) => props.size / 2}px); + transform: translateY(-${(props) => props.$size / 2}px); background-image: linear-gradient( - ${(props) => props.backgroundColor}, - ${(props) => props.backgroundColor} + ${(props) => props.$backgroundColor}, + ${(props) => props.$backgroundColor} ), - linear-gradient(to right, ${(props) => props.color}a3, ${(props) => props.color}1a); + linear-gradient(to right, ${(props) => props.$color}a3, ${(props) => props.$color}1a); `; type LoadingProps = { @@ -71,9 +71,9 @@ type LoadingProps = { export const Loading = (props: LoadingProps) => { const loadingProps = { - backgroundColor: props.backgroundColor ?? "#315efb", - color: props.color ?? "#ffffff", - size: props.size ?? 14, + $backgroundColor: props.backgroundColor ?? "#315efb", + $color: props.color ?? "#ffffff", + $size: props.size ?? 14, }; return ( diff --git a/client/packages/lowcoder-design/src/components/Menu.tsx b/client/packages/lowcoder-design/src/components/Menu.tsx index 9fdfd7946..365b86e2a 100644 --- a/client/packages/lowcoder-design/src/components/Menu.tsx +++ b/client/packages/lowcoder-design/src/components/Menu.tsx @@ -107,7 +107,7 @@ const StyledCreateBtn = styled.button` cursor: pointer; height: 40px; - :hover { + &:hover { color: #315efb; svg g path { diff --git a/client/packages/lowcoder-design/src/components/MenuItem.tsx b/client/packages/lowcoder-design/src/components/MenuItem.tsx index 077a17635..9510c13d9 100644 --- a/client/packages/lowcoder-design/src/components/MenuItem.tsx +++ b/client/packages/lowcoder-design/src/components/MenuItem.tsx @@ -4,14 +4,14 @@ import { PointIcon, DragIcon, PencilIcon } from "icons"; import { labelCss } from "./Label"; interface IItem { - width?: number; - colorChange?: number; + $width?: number; + $colorChange?: number; } const Item = styled.div` - width: ${(props) => (props.width ? props.width : 280)}px; + width: ${(props) => (props.$width ? props.$width : 280)}px; height: 32px; background: #f5f5f6; - background: ${(props) => (props.colorChange ? "#E1E3EB" : "#f5f5f6")}; + background: ${(props) => (props.$colorChange ? "#E1E3EB" : "#f5f5f6")}; border-radius: 4px; float: right; margin-right: 16px; @@ -22,7 +22,7 @@ const IconCss = css` height: 16px; width: 16px; color: #8b8fa3; - :hover { + &:hover { cursor: pointer; } `; @@ -49,7 +49,7 @@ interface IMenuItem { export const MenuItem = (props: IMenuItem) => { const { label, width, colorChange } = props; return ( - + {label} diff --git a/client/packages/lowcoder-design/src/components/Modal/handler.tsx b/client/packages/lowcoder-design/src/components/Modal/handler.tsx index 8b22b96e3..c5c293ca3 100644 --- a/client/packages/lowcoder-design/src/components/Modal/handler.tsx +++ b/client/packages/lowcoder-design/src/components/Modal/handler.tsx @@ -26,9 +26,9 @@ const EdgeHandle = css` } `; -const HorizontalHandle = css<{ axis: string }>` +const HorizontalHandle = css<{ $axis: string }>` ${EdgeHandle} - ${(props) => (props.axis === "s" ? "bottom: -10px;" : "top: -10px;")} + ${(props) => (props.$axis === "s" ? "bottom: -10px;" : "top: -10px;")} /* left: -4px; */ height: 12px !important; /* width: calc(100% + 8px) !important; */ @@ -42,9 +42,9 @@ const HorizontalHandle = css<{ axis: string }>` } `; -const VerticalHandleStyles = css<{ axis: string }>` +const VerticalHandleStyles = css<{ $axis: string }>` ${EdgeHandle} - ${(props) => (props.axis === "e" ? "right: -10px;" : "left: -10px;")} + ${(props) => (props.$axis === "e" ? "right: -10px;" : "left: -10px;")} width: 12px !important; top: 0px; /* height: calc(100% + 8px) !important; */ @@ -58,7 +58,7 @@ const VerticalHandleStyles = css<{ axis: string }>` } `; -const CornerHandle = css<{ axis: string }>` +const CornerHandle = css<{ $axis: string }>` position: absolute; z-index: 3; width: 10px !important; @@ -68,23 +68,23 @@ const CornerHandle = css<{ axis: string }>` height: 10px !important; border: none !important; } - cursor: ${(props) => props.axis + "-resize"} !important; - ${(props) => (["nw", "ne"].indexOf(props.axis) >= 0 ? "top: -5px;" : "")}; - ${(props) => (["sw", "se"].indexOf(props.axis) >= 0 ? "bottom: -5px;" : "")}; - ${(props) => (["sw", "nw"].indexOf(props.axis) >= 0 ? "left: -5px;" : "")}; - ${(props) => (["se", "ne"].indexOf(props.axis) >= 0 ? "right: -5px;" : "")}; + cursor: ${(props) => props.$axis + "-resize"} !important; + ${(props) => (["nw", "ne"].indexOf(props.$axis) >= 0 ? "top: -5px;" : "")}; + ${(props) => (["sw", "se"].indexOf(props.$axis) >= 0 ? "bottom: -5px;" : "")}; + ${(props) => (["sw", "nw"].indexOf(props.$axis) >= 0 ? "left: -5px;" : "")}; + ${(props) => (["se", "ne"].indexOf(props.$axis) >= 0 ? "right: -5px;" : "")}; `; -const ResizeHandle = styled.div<{ axis: string }>` +const ResizeHandle = styled.div<{ $axis: string }>` position: absolute; background-image: none; - ${(props) => (["s", "n"].indexOf(props.axis) >= 0 ? HorizontalHandle : "")}; - ${(props) => (["w", "e"].indexOf(props.axis) >= 0 ? VerticalHandleStyles : "")}; - ${(props) => (["sw", "nw", "se", "ne"].indexOf(props.axis) >= 0 ? CornerHandle : "")}; + ${(props) => (["s", "n"].indexOf(props.$axis) >= 0 ? HorizontalHandle : "")}; + ${(props) => (["w", "e"].indexOf(props.$axis) >= 0 ? VerticalHandleStyles : "")}; + ${(props) => (["sw", "nw", "se", "ne"].indexOf(props.$axis) >= 0 ? CornerHandle : "")}; `; const Handle = (axis: ResizeHandleAxis, ref: ReactRef) => { - return ; + return ; }; export default Handle; diff --git a/client/packages/lowcoder-design/src/components/Search.tsx b/client/packages/lowcoder-design/src/components/Search.tsx index 2e97e8e98..e72729ff1 100644 --- a/client/packages/lowcoder-design/src/components/Search.tsx +++ b/client/packages/lowcoder-design/src/components/Search.tsx @@ -14,7 +14,7 @@ const SearchInput = styled(Input)` user-select: none; overflow: hidden; - :focus { + &:focus { outline: none; box-shadow: 0 0 0 3px #daecfc; } diff --git a/client/packages/lowcoder-design/src/components/Section.tsx b/client/packages/lowcoder-design/src/components/Section.tsx index e1c019bde..869c0eabf 100644 --- a/client/packages/lowcoder-design/src/components/Section.tsx +++ b/client/packages/lowcoder-design/src/components/Section.tsx @@ -5,8 +5,8 @@ import { ReactComponent as Packup } from "icons/icon-Pack-up.svg"; import { labelCss } from "./Label"; import { controlItem, ControlNode } from "./control"; -const SectionItem = styled.div<{ width?: number }>` - width: ${(props) => (props.width ? props.width : 312)}px; +const SectionItem = styled.div<{ $width?: number }>` + width: ${(props) => (props.$width ? props.$width : 312)}px; border-bottom: 1px solid #e1e3eb; &:last-child { @@ -21,7 +21,7 @@ const SectionLabel = styled.div` line-height: 46px; font-weight: 600; - :hover { + &:hover { cursor: pointer; } `; @@ -39,7 +39,7 @@ const PackupIcon = styled(Packup)` color: #8b8fa3; transform: ${(props) => props.deg}; - :hover { + &:hover { cursor: pointer; } `; @@ -50,7 +50,7 @@ const SectionLabelDiv = styled.div` height: 46px; margin-left: 16px; - :hover { + &:hover { cursor: pointer; } @@ -63,14 +63,14 @@ const SectionLabelDiv = styled.div` } `; -const ShowChildren = styled.div<{ show?: string; noMargin?: boolean }>` - display: ${(props) => props.show || "none"}; +const ShowChildren = styled.div<{ $show?: string; $noMargin?: boolean }>` + display: ${(props) => props.$show || "none"}; flex-direction: column; gap: 8px; transition: all 3s; - margin-left: ${(props) => (props.noMargin ? 0 : 16)}px; + margin-left: ${(props) => (props.$noMargin ? 0 : 16)}px; padding-bottom: 16px; - padding-right: ${(props) => (props.noMargin ? 0 : "16px")}; + padding-right: ${(props) => (props.$noMargin ? 0 : "16px")}; `; interface ISectionConfig { @@ -113,7 +113,7 @@ export const BaseSection = (props: ISectionConfig) => { }; return ( - + {props.name && ( {props.name} @@ -123,7 +123,7 @@ export const BaseSection = (props: ISectionConfig) => { )} - + {props.children} diff --git a/client/packages/lowcoder-design/src/components/SuspensionBox.tsx b/client/packages/lowcoder-design/src/components/SuspensionBox.tsx index d1a666340..d62ed39a4 100644 --- a/client/packages/lowcoder-design/src/components/SuspensionBox.tsx +++ b/client/packages/lowcoder-design/src/components/SuspensionBox.tsx @@ -2,8 +2,8 @@ import styled from "styled-components"; import { ReactComponent as close } from "icons/icon-flokclose.svg"; import { ScrollBar } from "../components/ScrollBar"; -const Container = styled.div<{ width: number }>` - width: ${(props) => props.width}px; +const Container = styled.div<{ $width: number }>` + width: ${(props) => props.$width}px; background: #ffffff; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1); border-radius: 8px; @@ -24,7 +24,7 @@ const CloseIcon = styled(close)` padding: 1px; color: #8b8fa3; - :hover { + &:hover { cursor: pointer; } @@ -75,7 +75,7 @@ export const SuspensionBox = (props: Iprops) => { scrollable, } = props; return ( - + {title} {onClose && } diff --git a/client/packages/lowcoder-design/src/components/Switch.tsx b/client/packages/lowcoder-design/src/components/Switch.tsx index 09946f7ae..05f5b2577 100644 --- a/client/packages/lowcoder-design/src/components/Switch.tsx +++ b/client/packages/lowcoder-design/src/components/Switch.tsx @@ -27,20 +27,20 @@ const SwitchStyle: any = styled.input` transform: translateY(0); /* transition: all 0.4s ease; */ - :hover { + &:hover { cursor: pointer; } - :checked { + &:checked { border-color: #636775; background-color: #636775; } - :checked::before { + &:checked::before { left: 10px; } - ::before { + &::before { content: ""; left: 0; transition: left 0.4s; @@ -55,13 +55,13 @@ const SwitchStyle: any = styled.input` `; const SwitchDiv = styled.div<{ - placement?: ControlPlacement; + $placement?: ControlPlacement; }>` min-height: 21px; display: flex; align-items: center; ${(props) => { - if (props.placement === "bottom") { + if (props.$placement === "bottom") { return css` margin-left: 112px; `; @@ -82,7 +82,7 @@ const IconCss = css` width: 20px; margin-top: 1px; - :hover { + &:hover { cursor: pointer; } @@ -137,7 +137,7 @@ export const SwitchWrapper = (props: { const tooltip = props.tooltip; const label = props.label; return ( - + {props.children} {label ? ( diff --git a/client/packages/lowcoder-design/src/components/Tab.tsx b/client/packages/lowcoder-design/src/components/Tab.tsx index 0ac9c88fa..0c9df3216 100644 --- a/client/packages/lowcoder-design/src/components/Tab.tsx +++ b/client/packages/lowcoder-design/src/components/Tab.tsx @@ -15,7 +15,7 @@ const IconCss = css` margin-bottom: 12px; `; -const IconAndName = styled.div<{ isActive: boolean }>` +const IconAndName = styled.div<{ $isActive: boolean }>` padding: 0; display: inline-block; margin-left: 17px; @@ -24,7 +24,7 @@ const IconAndName = styled.div<{ isActive: boolean }>` vertical-align: top; height: 40px; transition: all 0.2s ease; - border-bottom: 2px solid ${(props) => (props.isActive ? "#222222" : "transparent")}; + border-bottom: 2px solid ${(props) => (props.$isActive ? "#222222" : "transparent")}; &:hover path { transition: all 0.2s ease; @@ -40,13 +40,13 @@ const IconAndName = styled.div<{ isActive: boolean }>` ${IconCss}; path { - fill: ${(props) => (props.isActive ? "#222222" : "#8b8fa3")}; + fill: ${(props) => (props.$isActive ? "#222222" : "#8b8fa3")}; } } `; const Text = styled.p<{ - color: string; + $color: string; }>` user-select: none; display: inline-block; @@ -56,7 +56,7 @@ const Text = styled.p<{ line-height: 40px; margin-left: 5px; margin-bottom: 0; - color: ${(props) => props.color || "#222222"}; + color: ${(props) => props.$color || "#222222"}; vertical-align: top; `; @@ -89,9 +89,9 @@ const Tabs = (props: ITabs) => { {props.tabsConfig.map((tab) => { const isActive = activeTab.key === tab.key; return ( - onChange(tab.key)} isActive={isActive}> + onChange(tab.key)} $isActive={isActive}> {tab.icon} - {tab.title} + {tab.title} ); })} diff --git a/client/packages/lowcoder-design/src/components/button.tsx b/client/packages/lowcoder-design/src/components/button.tsx index a159ecae7..ac0fff3b2 100644 --- a/client/packages/lowcoder-design/src/components/button.tsx +++ b/client/packages/lowcoder-design/src/components/button.tsx @@ -1,6 +1,6 @@ import { Button, ButtonProps } from "antd"; import styled, { css } from "styled-components"; -import { LightLoading, Loading } from "./Loading"; +import { Loading } from "./Loading"; import * as React from "react"; import { CSSProperties, forwardRef } from "react"; @@ -12,13 +12,13 @@ const buttonStyleConfig = { color: #333333; /* padding: 4px; */ - :focus { + &:focus { background: #f5f5f6; border: 1px solid #d7d9e0; color: #333333; } - :hover { + &:hover { background: #f5f5f6; border: 1px solid #d7d9e0; color: #333333; @@ -35,33 +35,33 @@ const buttonStyleConfig = { color: #4965f2; border-color: #c9d1fc; - :hover { + &:hover { color: #315efb; background-color: #f5faff; border-color: #c2d6ff; } - :focus { + &:focus { color: #315efb; background-color: #f5faff; border-color: #c2d6ff; } } - :focus { + &:focus { background: #4965f2; border: 1px solid #4965f2; color: #ffffff; } - :hover { + &:hover { border: 1px solid #315efb; background: #315efb; color: #ffffff; } :disabled { - :hover { + &:hover { border: 1px solid #dbe1fd; background: #dbe1fd; color: #ffffff; @@ -80,13 +80,13 @@ const buttonStyleConfig = { color: #4965f2; border-color: #c9d1fc; - :hover { + &:hover { color: #315efb; background-color: #f5faff; border-color: #c2d6ff; } - :focus { + &:focus { color: #315efb; background-color: #f5faff; border-color: #c2d6ff; @@ -277,7 +277,7 @@ const StyledAddButton = styled.button` user-select: none; padding: 0; - :hover { + &:hover { color: #315efb; background: white; @@ -286,7 +286,7 @@ const StyledAddButton = styled.button` } } - :focus { + &:focus { background: white; color: #315efb; } diff --git a/client/packages/lowcoder-design/src/components/colorSelect/index.tsx b/client/packages/lowcoder-design/src/components/colorSelect/index.tsx index 71339c86f..2e5c7512e 100644 --- a/client/packages/lowcoder-design/src/components/colorSelect/index.tsx +++ b/client/packages/lowcoder-design/src/components/colorSelect/index.tsx @@ -45,7 +45,7 @@ export const ColorSelect = (props: ColorSelectProps) => {
- +
@@ -65,8 +65,8 @@ export const ColorSelect = (props: ColorSelectProps) => { } > - - + + ); @@ -80,7 +80,7 @@ const ConstantDiv = styled.div` flex-wrap: wrap; `; const ConstantBlock = styled.div.attrs<{ color: string }>((props) => ({ - tabIndex: "0", + tabIndex: 0, style: { backgroundColor: props.color, }, @@ -159,9 +159,9 @@ const AlphaDiv = styled.div.attrs((props) => ({ background-clip: content-box; `; -const BackDiv = styled.div.attrs<{ color: string }>((props: { color: string }) => ({ +const BackDiv = styled.div.attrs<{ $color: string }>((props: { $color: string }) => ({ style: { - opacity: 1 - parseFloat(props.color ? props.color : "1"), + opacity: 1 - parseFloat(props.$color ? props.$color : "1"), }, }))` height: 100%; @@ -169,8 +169,8 @@ const BackDiv = styled.div.attrs<{ color: string }>((props: { color: string }) = background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8ZGVmcz4KICAgICAgICA8cGF0dGVybiBpZD0icGF0dGVybi0xIiBwYXR0ZXJuVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiB4PSIwJSIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSI+CiAgICAgICAgICAgIDx1c2UgeGxpbms6aHJlZj0iI2ltYWdlLTIiIHRyYW5zZm9ybT0ic2NhbGUoMC41LDAuNSkiPjwvdXNlPgogICAgICAgIDwvcGF0dGVybj4KICAgICAgICA8aW1hZ2UgaWQ9ImltYWdlLTIiIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgeGxpbms6aHJlZj0iZGF0YTppbWFnZS9wbmc7YmFzZTY0LGlWQk9SdzBLR2dvQUFBQU5TVWhFVWdBQUFEQUFBQUF3Q0FZQUFBQlhBdm1IQUFBQUFYTlNSMElBcnM0YzZRQUFBTE5KUkVGVWFBWHRtRUVLd3pBTUJPUCt5ZjkvZ0IvVjB1TWV4WkJ0QTVPYndKTGlHUXVNMTk3N2ZRMitjODRhTEwvdXJ2K2EvTXcvcm5VRHY3YWlBUTFBQWg0aENCQ25hd0FqaEFVZWIyQjByL25DdXZ0dU02My9lQU51QU00Z1R0Y0FSZ2dMYUFBQ3hPa2F3QWhoQVExQWdEaDlUZThldmd0aDVsbkFHVWdlL1VnRGZlYlpVUVBKb3g5cG9NODhPMm9nZWZRajM0WDZ6TE9qTTVBOCtwRUcrc3l6b3dhU1J6L1NRSjk1ZHRSQTh1aEhIeHRKRzVsckREVTlBQUFBQUVsRlRrU3VRbUNDIj48L2ltYWdlPgogICAgPC9kZWZzPgogICAgPGcgaWQ9Iumhtemdoi0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0i572R5qC85bqV6ImyIj4KICAgICAgICAgICAgPHBvbHlnb24gaWQ9Iue7hOS7ti3ovpPlhaXmoYYiIGZpbGw9IiNGRkZGRkYiIHBvaW50cz0iLTkuMjgyNTc3MzdlLTE1IDAgMjQgMCAyNCAyNCAtOS4yODI1NzczN2UtMTUgMjQiPjwvcG9seWdvbj4KICAgICAgICAgICAgPHBvbHlnb24gaWQ9Iue7hOS7ti3ovpPlhaXmoYYiIGZpbGwtb3BhY2l0eT0iMC4yIiBmaWxsPSJ1cmwoI3BhdHRlcm4tMSkiIHBvaW50cz0iLTkuMjgyNTc3MzdlLTE1IDAgMjQgMCAyNCAyNCAtOS4yODI1NzczN2UtMTUgMjQiPjwvcG9seWdvbj4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg=="); `; // main block -const ColorBlock = styled.div<{ color: string }>` - background-color: ${(props) => (isValidColor(props.color) ? props.color : "#FFFFFF")}; +const ColorBlock = styled.div<{ $color: string }>` + background-color: ${(props) => (isValidColor(props.$color) ? props.color : "#FFFFFF")}; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 4px; height: 24px; diff --git a/client/packages/lowcoder-design/src/components/control.tsx b/client/packages/lowcoder-design/src/components/control.tsx index fb9f2480e..e8f1f4ca1 100644 --- a/client/packages/lowcoder-design/src/components/control.tsx +++ b/client/packages/lowcoder-design/src/components/control.tsx @@ -15,17 +15,17 @@ type ControlPlacement = "bottom" | "right" | "modal"; // set propertyView's posi // place common comps of control comps const Wrapper = styled.div<{ - layout: ControlLayout; - placement: ControlPlacement; + $layout: ControlLayout; + $placement: ControlPlacement; }>` width: 100%; ${(props) => { - switch (props.layout) { + switch (props.$layout) { case "horizontal": return css` display: flex; flex-direction: row; - align-items: ${props.placement === "bottom" ? "baseline" : "center"}; + align-items: ${props.$placement === "bottom" ? "baseline" : "center"}; justify-content: space-between; `; case "vertical": @@ -57,15 +57,15 @@ function getWidth(placement: ControlPlacement) { } const LabelWrapper = styled.div<{ - layout: ControlLayout; - placement: ControlPlacement; - labelEllipsis?: boolean; + $layout: ControlLayout; + $placement: ControlPlacement; + $labelEllipsis?: boolean; }>` ${(props) => { - switch (props.layout) { + switch (props.$layout) { case "horizontal": return css` - flex: 0 0 ${getWidth(props.placement)}px; + flex: 0 0 ${getWidth(props.$placement)}px; `; case "vertical": return css` @@ -74,10 +74,10 @@ const LabelWrapper = styled.div<{ } }} ${(props) => { - if (props.labelEllipsis && props.layout === "horizontal") { + if (props.$labelEllipsis && props.$layout === "horizontal") { return css` .tooltipLabel { - width: ${getWidth(props.placement)}px; + width: ${getWidth(props.$placement)}px; padding-right: 2px; text-overflow: ellipsis; overflow: hidden; @@ -87,10 +87,10 @@ const LabelWrapper = styled.div<{ } }} `; -const ChildrenWrapper = styled.div<{ layout: ControlLayout }>` +const ChildrenWrapper = styled.div<{ $layout: ControlLayout }>` min-width: 0; ${(props) => { - switch (props.layout) { + switch (props.$layout) { case "horizontal": return ` flex:1 1 auto; @@ -148,12 +148,12 @@ export const ControlPropertyViewWrapper = ( } = props; return ( - + {label && ( )} {preInputNode} - + {children} {extraChildren} diff --git a/client/packages/lowcoder-design/src/components/customSelect.tsx b/client/packages/lowcoder-design/src/components/customSelect.tsx index 8a5889b86..acd1309d5 100644 --- a/client/packages/lowcoder-design/src/components/customSelect.tsx +++ b/client/packages/lowcoder-design/src/components/customSelect.tsx @@ -3,7 +3,7 @@ import { ReactComponent as PackUpIcon } from "icons/icon-Pack-up.svg"; import styled from "styled-components"; import React from "react"; -const SelectWrapper = styled.div<{ border?: boolean }>` +const SelectWrapper = styled.div<{ $border?: boolean }>` .ant-select-open { .ant-select-arrow { transform: rotate(0deg); @@ -15,9 +15,9 @@ const SelectWrapper = styled.div<{ border?: boolean }>` } .ant-select .ant-select-selector { - border: ${(props) => (props.border ? "1px solid transparent" : "1px solid #d7d9e0")}; + border: ${(props) => (props.$border ? "1px solid transparent" : "1px solid #d7d9e0")}; border-radius: 4px; - padding: ${(props) => (props.border ? "0px" : "0 0 0 12px")}; + padding: ${(props) => (props.$border ? "0px" : "0 0 0 12px")}; height: 100%; align-items: center; margin-right: 8px; @@ -30,16 +30,16 @@ const SelectWrapper = styled.div<{ border?: boolean }>` .ant-select-focused.ant-select.ant-select-show-arrow { .ant-select-selector { - border: ${(props) => (props.border ? "1px solid transparent" : "1px solid #3377ff")}; + border: ${(props) => (props.$border ? "1px solid transparent" : "1px solid #3377ff")}; border-radius: 4px; - box-shadow: 0 0 0 2px ${(props) => (props.border ? "transparent" : "rgba(51,119,255,0.20)")}; + box-shadow: 0 0 0 2px ${(props) => (props.$border ? "transparent" : "rgba(51,119,255,0.20)")}; } } .ant-select:hover, .ant-select-disabled:hover { .ant-select-selector { - border: ${(props) => (props.border ? "1px solid transparent" : "1px solid #8b8fa3")}; + border: ${(props) => (props.$border ? "1px solid transparent" : "1px solid #8b8fa3")}; border-radius: 4px; } } @@ -56,7 +56,7 @@ const SelectWrapper = styled.div<{ border?: boolean }>` .ant-select-disabled.ant-select { .ant-select-selector { - background: ${(props) => (props.border ? "#ffffff" : "#fdfdfd")}; + background: ${(props) => (props.$border ? "#ffffff" : "#fdfdfd")}; border-radius: 4px; color: #b8b9bf; } @@ -93,7 +93,7 @@ const CustomSelect = React.forwardRef(( ...restProps } = props; return ( - + ` +export const EditTextWrapper = styled.div<{ disabled?: boolean; $hasPrefix?: boolean }>` font-weight: 500; display: flex; justify-content: space-between; align-items: center; padding: 0 8px 0 4px; - padding-left: ${(props) => (props.hasPrefix ? "28px" : "4px")}; + padding-left: ${(props) => (props.$hasPrefix ? "28px" : "4px")}; border-radius: 4px; width: 220px; height: 28px; @@ -29,7 +29,7 @@ export const EditTextWrapper = styled.div<{ disabled?: boolean; hasPrefix?: bool font-size: 14px; cursor: ${(props) => !props.disabled && "pointer"}; - :hover { + &:hover { background-color: ${(props) => !props.disabled && "#8b8fa34c"}; } @@ -72,7 +72,7 @@ const TextInput = styled(Input)` line-height: 28px; font-size: 14px; - :focus { + &:focus { box-shadow: none; } `; @@ -123,7 +123,7 @@ export const EditText = (props: EditTextProps) => { !props.disabled && !props.forceClickIcon && setEditing(true)} > diff --git a/client/packages/lowcoder-design/src/components/form.tsx b/client/packages/lowcoder-design/src/components/form.tsx index 23487d8a3..624a674b1 100644 --- a/client/packages/lowcoder-design/src/components/form.tsx +++ b/client/packages/lowcoder-design/src/components/form.tsx @@ -86,13 +86,13 @@ const StartIcon = styled(Star)` margin-right: 4px; flex-shrink: 0; `; -const LabelDiv = styled.div<{ width?: number }>` +const LabelDiv = styled.div<{ $width?: number }>` display: flex; justify-content: flex-start; flex-wrap: nowrap; align-items: center; margin-right: 8px; - width: ${(props) => props.width || 122}px; + width: ${(props) => props.$width || 122}px; flex-shrink: 0; `; const FormItemContain = styled.div` @@ -132,11 +132,11 @@ export const FormSectionLabel = styled.label` overflow: hidden; max-width: 100px; `; -export const FormSection = styled.div<{ size?: FormSize }>` +export const FormSection = styled.div<{ $size?: FormSize }>` width: 100%; .taco-form-item-wrapper { - padding-left: ${(props) => (props.size === "middle" ? "24px" : "0")}; + padding-left: ${(props) => (props.$size === "middle" ? "24px" : "0")}; } `; @@ -153,7 +153,7 @@ const FormItemLabel = (props: Partial) => { const isRequired = props.required || !!props.rules?.find((i) => typeof i === "object" && i.required); return ( - + @@ -263,7 +263,7 @@ const CustomCheckbox = (props: any) => { export const FormCheckboxItem = (props: FormItemProps) => { return ( - + props.$forbidden && "stroke: #D7D9E0;"} } - :hover { + &:hover { cursor: ${(props) => (props.$forbidden ? "default" : "pointer")}; } @@ -50,13 +50,13 @@ const AddBtn = styled(TacoButton)` box-shadow: none; margin-bottom: 2px; - :hover { + &:hover { color: #315efb; border: none; background-color: #ffffff; } - :focus { + &:focus { color: #315efb; border: none; background-color: #ffffff; diff --git a/client/packages/lowcoder-design/src/components/option.tsx b/client/packages/lowcoder-design/src/components/option.tsx index fd822af9f..90b34d2db 100644 --- a/client/packages/lowcoder-design/src/components/option.tsx +++ b/client/packages/lowcoder-design/src/components/option.tsx @@ -31,25 +31,25 @@ const RowText = styled.span` margin-left: 4px; max-width: calc(100% - 56px); - :hover { + &:hover { cursor: pointer; } `; -const OptionRow = styled.div<{ selected?: boolean }>` +const OptionRow = styled.div<{ $selected?: boolean }>` color: #ffffff; width: 100%; height: 32px; border-bottom: 1px solid #d7d9e0; display: flex; - :hover { + &:hover { background-color: #fafafa; cursor: pointer; } ${(props) => { - if (props.selected) { + if (props.$selected) { return css` background-color: #fafafa; @@ -59,7 +59,7 @@ const OptionRow = styled.div<{ selected?: boolean }>` `; } }} - :last-child { + &:last-child { border-bottom: none; height: 31px; } @@ -76,7 +76,7 @@ const IconCss = css` height: 16px; width: 16px; - :hover { + &:hover { cursor: pointer; } `; @@ -109,12 +109,12 @@ const StyledDragIcon = styled(DragIcon)` margin-left: 8px; color: #8b8fa3; - :hover { + &:hover { cursor: grab; outline: none; } - :focus { + &:focus { cursor: grab; outline: none; } @@ -165,7 +165,7 @@ const OptionItem = (props: { transition, }; const optionRow = ( - + {draggable && } {title} {optionExtra} diff --git a/client/packages/lowcoder-design/src/components/popover.tsx b/client/packages/lowcoder-design/src/components/popover.tsx index 2f9167fb2..89752dd8b 100644 --- a/client/packages/lowcoder-design/src/components/popover.tsx +++ b/client/packages/lowcoder-design/src/components/popover.tsx @@ -11,9 +11,9 @@ const Wedge = styled.div` /* width: 88px; */ min-width: 110px; `; -const HandleText = styled.span<{ color?: string }>` +const HandleText = styled.span<{ $color?: string }>` font-size: 13px; - color: ${(props) => (props.color ? props.color : "#333333")}; + color: ${(props) => (props.$color ? props.$color : "#333333")}; line-height: 13px; display: block; `; @@ -29,7 +29,7 @@ const Handle = styled.div` padding: 0 8px; cursor: pointer; - :hover { + &:hover { background-color: #f2f7fc; border-radius: 4px; cursor: pointer; @@ -181,7 +181,7 @@ const EditPopover = (props: EditPopoverProps) => { hide(); }} > - + {item.text} @@ -238,7 +238,7 @@ const EditPopover = (props: EditPopoverProps) => { hide(); }} > - {trans("delete")} + {trans("delete")} )} diff --git a/client/packages/lowcoder-design/src/components/popupCard.tsx b/client/packages/lowcoder-design/src/components/popupCard.tsx index 0d109c309..652560ad6 100644 --- a/client/packages/lowcoder-design/src/components/popupCard.tsx +++ b/client/packages/lowcoder-design/src/components/popupCard.tsx @@ -4,10 +4,10 @@ import { CSSProperties, ReactNode, useState } from "react"; import styled from "styled-components"; import { ErrorIcon, SuccessIcon } from "icons"; -const StyledCard = styled(Card)<{ backcolor: string }>` +const StyledCard = styled(Card)<{ $backcolor: string }>` z-index: 3; margin-top: 4px; - background-color: ${(props) => (props.backcolor ? props.backcolor : "#eff9f6")}; + background-color: ${(props) => (props.$backcolor ? props.$backcolor : "#eff9f6")}; border-color: #82bf99; color: #3b734f; border: none; @@ -119,7 +119,7 @@ export function PopupCard(props: PopupCardProps) { ` +const TutorialButtonWrapper = styled.div<{ $styleName: TutorialStyle }>` height: 100%; display: flex; align-items: center; ${(props) => { - if (props.styleName === "dropdownRight") { + if (props.$styleName === "dropdownRight") { return css` padding-left: 8px; width: 264px; @@ -134,7 +134,7 @@ export const QueryTutorialButton = ({ styleName: "dropdownRight" | "begin"; }) => url ? ( - + {label} ) : ( diff --git a/client/packages/lowcoder-design/src/components/tacoInput.tsx b/client/packages/lowcoder-design/src/components/tacoInput.tsx index 84445f409..d8b4d88f4 100644 --- a/client/packages/lowcoder-design/src/components/tacoInput.tsx +++ b/client/packages/lowcoder-design/src/components/tacoInput.tsx @@ -17,15 +17,15 @@ const TacoInput = styled(AntdInput)` line-height: 13px; height: 32px; - :hover { + &:hover { border: 1px solid #8b8fa3; } - :focus { + &:focus { border: 1px solid #3377ff; } - ::placeholder { + &::placeholder { font-size: 13px; color: #b8b9bf; line-height: 13px; @@ -93,7 +93,7 @@ const OptInputWrapper = styled.div` border: 1px solid #d7d9e0; border-radius: 8px; - :hover { + &:hover { border: 1px solid #8b8fa3; } @@ -107,8 +107,8 @@ const OtpInput = styled(TacoInput)` border: none; box-shadow: none; - :focus, - :hover { + &:focus, + &:hover { border: none; box-shadow: none; } @@ -122,12 +122,12 @@ const OtpSplit = styled.span` transform: scaleX(0.8); `; -const StyledOtpButton = styled.button<{ isTiming: boolean }>` +const StyledOtpButton = styled.button<{ $isTiming: boolean }>` flex-shrink: 0; width: 124px; font-size: 16px; - color: ${(props) => (props.isTiming ? "#8B8FA3" : "#4965f2")}; + color: ${(props) => (props.$isTiming ? "#8B8FA3" : "#4965f2")}; line-height: 16px; border: none; cursor: pointer; @@ -208,11 +208,11 @@ const PhoneNumberInputWrapper = styled.div` border-radius: 4px; height: 40px; - :hover { + &:hover { border: 1px solid #8b8fa3; } - :focus-within { + &:focus-within { box-shadow: 0 0 0 2px rgb(24 144 255 / 20%); border: 1px solid #3377ff; } @@ -227,7 +227,7 @@ const StyledPhoneNumberInput = styled(AntdInput)` border: unset; border-radius: 4px !important; - :focus { + &:focus { box-shadow: unset; } `; @@ -513,7 +513,7 @@ const OtpFormInput = (props: { setTiming(true); onOtpSend(); }} - isTiming={timing} + $isTiming={timing} > {timing ? `${count}s` : trans("verifyCodeInput.sendCode")} diff --git a/client/packages/lowcoder-design/src/components/toolTip.tsx b/client/packages/lowcoder-design/src/components/toolTip.tsx index 892ea9d92..d4a878387 100644 --- a/client/packages/lowcoder-design/src/components/toolTip.tsx +++ b/client/packages/lowcoder-design/src/components/toolTip.tsx @@ -71,13 +71,13 @@ const PreButton = styled(Button)` ${buttonCss}; &, - :focus { + &:focus { background-color: #6179f2; border-color: #6179f2; color: #ffffff; } - :hover { + &:hover { background-color: #798df2; border-color: #798df2; color: #ffffff; @@ -88,13 +88,13 @@ const NextButton = styled(Button)` ${buttonCss}; &, - :focus { + &:focus { color: #4965f2; border-color: #ffffff; background-color: #ffffff; } - :hover { + &:hover { color: #4965f2; border-color: #e6eaff; background-color: #e6eaff; @@ -129,8 +129,8 @@ export const TooltipCodeBlock = (props: { text: string }) => { export const TooltipLink = styled.a` &, - :hover, - :focus { + &:hover, + &:focus { color: #ffffff; text-decoration: underline; } @@ -158,10 +158,10 @@ function Tooltip(props: TooltipProps) { return ; } -const Label = styled.div<{ border?: boolean }>` +const Label = styled.div<{ $border?: boolean }>` span { - ${(props) => props.border && UnderlineCss} - line-height: ${(props) => props.border && "18px"}; + ${(props) => props.$border && UnderlineCss} + line-height: ${(props) => props.$border ? "18px" : undefined}; } ${labelCss}; margin: 0; @@ -192,7 +192,7 @@ function ToolTipLabel( {...restProps} > {label ? ( -