-
Notifications
You must be signed in to change notification settings - Fork 208
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[GEN-2165] create "Segment" component, and replace "ToggleButtons" & …
…"ToggleCode" (#2140) This pull request includes significant changes to the frontend codebase, focusing on replacing the `ToggleCodeComponent` and `ToggleButtons` components with a new `Segment` component. The updates span across multiple files, simplifying the code and improving the user interface. Component Replacement and Refactoring: * Removed `ToggleCodeComponent` and replaced it with the new `Segment` component in `describe-drawer.tsx`, `source-drawer-container/index.tsx`, and `action-form-body/index.tsx` to toggle between code and pretty modes. [[1]](diffhunk://#diff-840f9f31ab7f0b7437b98105569846f658412a1c2ae133dfa36c129ef518a262L20-R42) [[2]](diffhunk://#diff-d4745da2f63be90cb1f7af8ea29fb2f37cf0a80f0f04a207b6fc9149855ca6d5L53-R53) [[3]](diffhunk://#diff-13a4f6f896b629d2504615533aa1d48fe792fbadb7132f640b09c03312243ee9L33-R42) * Removed `ToggleButtons` and replaced it with the `Segment` component in `rule-form-body/index.tsx` and `action-form-body/index.tsx` to toggle between active and inactive statuses. [[1]](diffhunk://#diff-6624df2f04a59bc64a0825c4c5bad0f3ff91baeb56c89e3bf286f61b77167065L33-R42) [[2]](diffhunk://#diff-13a4f6f896b629d2504615533aa1d48fe792fbadb7132f640b09c03312243ee9L33-R42) File and Import Cleanup: * Removed the `toggle-code-component` export from `index.ts` files and deleted the `toggle-code-component/index.tsx` file. [[1]](diffhunk://#diff-7d82b799a8e9e094527658980bb418eed24947d6ca0daa65fabb9cab8305ce91L1) [[2]](diffhunk://#diff-41caeebe24ebfb15cef4fb61e0b64cef8522a865e6da945fd260c5366cc80995L1-L40) * Removed the `toggle-buttons` export from `index.ts` files and deleted the `toggle-buttons/index.tsx` file. [[1]](diffhunk://#diff-6d130f82a4bd07ed79a48c836695e61245cb93220e180db6e494a4234c129e67L1) [[2]](diffhunk://#diff-f9e56033127f413a93fdcc202e25f7922a065208c18cd38c0a9ffe6967bd4296L1-L93) * Added the `segment` export to `reuseable-components/index.ts`. New Component Addition: * Added the new `Segment` component in `reuseable-components/segment/index.tsx`, which provides a flexible and reusable segmented control for toggling between different states.
- Loading branch information
1 parent
9a7bcce
commit 409bb0b
Showing
10 changed files
with
162 additions
and
153 deletions.
There are no files selected for viewing
This file was deleted.
Oops, something went wrong.
40 changes: 0 additions & 40 deletions
40
frontend/webapp/components/common/buttons/toggle-code-component/index.tsx
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,2 +1 @@ | ||
| export * from './buttons'; | ||
| export * from './dropdowns'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,109 @@ | ||
| import React, { CSSProperties, useEffect, useRef, useState } from 'react'; | ||
| import { SVG } from '@/assets'; | ||
| import { Text } from '../text'; | ||
| import { FlexRow } from '@/styles'; | ||
| import styled from 'styled-components'; | ||
|
|
||
| type SelectedValue = any; | ||
|
|
||
| interface Props { | ||
| options: { | ||
| icon?: SVG; | ||
| label?: string; | ||
| value: SelectedValue; | ||
| selectedBgColor?: CSSProperties['backgroundColor']; | ||
| }[]; | ||
| selected: SelectedValue; | ||
| setSelected: (value: SelectedValue) => void; | ||
| } | ||
|
|
||
| const Container = styled(FlexRow)` | ||
| position: relative; | ||
| gap: 0; | ||
| `; | ||
|
|
||
| const Button = styled.button<{ $isFirstItem: boolean; $isLastItem: boolean }>` | ||
| flex: 1; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| gap: 4px; | ||
| padding: 6px 12px; | ||
| background-color: transparent; | ||
| border-radius: ${({ $isFirstItem, $isLastItem }) => ($isFirstItem ? '32px 0px 0px 32px' : $isLastItem ? '0px 32px 32px 0px' : '0')}; | ||
| border: 1px solid ${({ theme }) => theme.colors.border}; | ||
| cursor: pointer; | ||
| &:hover { | ||
| border: 1px solid ${({ theme }) => theme.colors.secondary}; | ||
| } | ||
| `; | ||
|
|
||
| const Background = styled.div<{ $bgColor?: CSSProperties['backgroundColor']; $width: number; $height: number; $x: number; $y: number; $isFirstItem: boolean; $isLastItem: boolean }>` | ||
| position: absolute; | ||
| top: ${({ $y }) => $y}px; | ||
| left: ${({ $x }) => $x}px; | ||
| z-index: -1; | ||
| width: ${({ $width }) => $width}px; | ||
| height: ${({ $height }) => $height}px; | ||
| background-color: ${({ theme, $bgColor }) => $bgColor || theme.colors.white_opacity['008']}; | ||
| border-radius: ${({ $isFirstItem, $isLastItem }) => ($isFirstItem ? '32px 0px 0px 32px' : $isLastItem ? '0px 32px 32px 0px' : '0')}; | ||
| transition: all 0.3s; | ||
| `; | ||
|
|
||
| export const Segment: React.FC<Props> = ({ options = [], selected, setSelected }) => { | ||
| const selectedIdx = options.findIndex((option) => option.value === selected); | ||
| const [bgColor, setBgColor] = useState(options[selectedIdx]?.selectedBgColor || ''); | ||
| const [bgSize, setBgSize] = useState({ width: 0, height: 0 }); | ||
| const [bgPosition, setBgPosition] = useState({ x: 0, y: 0 }); | ||
| const selectedRef = useRef<HTMLButtonElement>(null); | ||
|
|
||
| useEffect(() => { | ||
| if (!!selectedRef.current) { | ||
| setBgSize({ | ||
| width: selectedRef.current.offsetWidth, | ||
| height: selectedRef.current.offsetHeight, | ||
| }); | ||
| setBgPosition({ | ||
| x: selectedRef.current.offsetWidth * selectedIdx, | ||
| y: 0, | ||
| }); | ||
| } | ||
| }, [selected, selectedIdx]); | ||
|
|
||
| return ( | ||
| <Container> | ||
| {options.map(({ icon: Icon, label, value, selectedBgColor }, idx) => { | ||
| const isSelected = selected === value; | ||
|
|
||
| return ( | ||
| <Button | ||
| ref={isSelected ? selectedRef : undefined} | ||
| $isFirstItem={idx === 0} | ||
| $isLastItem={idx === options.length - 1} | ||
| onClick={() => { | ||
| setSelected(value); | ||
| setBgColor(selectedBgColor || ''); | ||
| }} | ||
| > | ||
| {Icon && <Icon />} | ||
| {label && ( | ||
| <Text size={12} family='secondary' decoration='underline'> | ||
| {label} | ||
| </Text> | ||
| )} | ||
| </Button> | ||
| ); | ||
| })} | ||
|
|
||
| <Background | ||
| $bgColor={bgColor} | ||
| $width={bgSize.width} | ||
| $height={bgSize.height} | ||
| $x={bgPosition.x} | ||
| $y={bgPosition.y} | ||
| $isFirstItem={selectedIdx === 0} | ||
| $isLastItem={selectedIdx === options.length - 1} | ||
| /> | ||
| </Container> | ||
| ); | ||
| }; |
Oops, something went wrong.