-
Notifications
You must be signed in to change notification settings - Fork 23
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #775 from mprasanjith/feature/action-builder-style…
…-updates Feature/action builder style updates
- Loading branch information
Showing
21 changed files
with
568 additions
and
539 deletions.
There are no files selected for viewing
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,25 +1,13 @@ | ||
| import { getEditor } from '../SupportedActions'; | ||
| import { DecodedAction, DecodedCall } from '../types'; | ||
| import { DecodedAction } from '../types'; | ||
| import ActionView from './ViewMode'; | ||
|
|
||
| interface ActionEditorProps { | ||
| action: DecodedAction; | ||
| onChange: (updatedCall: DecodedAction) => void; | ||
| } | ||
|
|
||
| const ActionEditor: React.FC<ActionEditorProps> = ({ action, onChange }) => { | ||
| const Editor = getEditor(action?.decodedCall?.callType); | ||
|
|
||
| const updateCall = (updatedCall: DecodedCall) => { | ||
| onChange({ ...action, decodedCall: updatedCall }); | ||
| }; | ||
|
|
||
| return ( | ||
| <Editor | ||
| contract={action.contract} | ||
| call={action.decodedCall} | ||
| updateCall={updateCall} | ||
| /> | ||
| ); | ||
| const ActionEditor: React.FC<ActionEditorProps> = ({ action }) => { | ||
| return <ActionView isEditable={true} decodedCall={action?.decodedCall} />; | ||
| }; | ||
|
|
||
| export default ActionEditor; |
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,122 @@ | ||
| import styled from 'styled-components'; | ||
| import { ProposalOptionTag } from './common/ProposalOptionTag'; | ||
| import AddButton from './common/AddButton'; | ||
| import ActionEditor from './Action/EditMode'; | ||
| import { DecodedAction, Option } from './types'; | ||
| import { useState } from 'react'; | ||
| import ActionModal from 'components/Guilds/ActionsModal'; | ||
| import Grip from './common/Grip'; | ||
| import DataTag from './common/DataTag'; | ||
| import EditButton from './common/EditButton'; | ||
| import ActionView from './Action/ViewMode'; | ||
| import { Box } from 'components/Guilds/common/Layout'; | ||
|
|
||
| export const OptionWrapper = styled(Box)` | ||
| padding: 1rem; | ||
| `; | ||
|
|
||
| export const DetailWrapper = styled(Box)` | ||
| padding: 0.5rem 0; | ||
| display: flex; | ||
| flex-direction: row; | ||
| justify-content: space-between; | ||
| `; | ||
|
|
||
| export const Detail = styled(Box)` | ||
| display: inline-flex; | ||
| margin-right: 0.75rem; | ||
| `; | ||
|
|
||
| const ActionsWrapper = styled.div` | ||
| margin-left: ${({ indented }) => (indented ? '1.75rem' : '0')}; | ||
| `; | ||
|
|
||
| interface OptionRowProps { | ||
| option: Option; | ||
| isEditable?: boolean; | ||
| onChange?: (updatedOption: Option) => void; | ||
| } | ||
|
|
||
| const OptionRow: React.FC<OptionRowProps> = ({ | ||
| isEditable, | ||
| option, | ||
| onChange, | ||
| }) => { | ||
| const [isActionsModalOpen, setIsActionsModalOpen] = useState(false); | ||
|
|
||
| function addAction(action: DecodedAction) { | ||
| onChange({ | ||
| ...option, | ||
| decodedActions: [...option.decodedActions, action], | ||
| }); | ||
| } | ||
|
|
||
| function updateAction(index: number, action: DecodedAction) { | ||
| const updatedActions = option?.decodedActions.map((a, i) => | ||
| index === i ? action : a | ||
| ); | ||
| onChange({ ...option, decodedActions: updatedActions }); | ||
| } | ||
|
|
||
| return ( | ||
| <OptionWrapper> | ||
| <DetailWrapper> | ||
| <div> | ||
| {isEditable && ( | ||
| <Detail> | ||
| <Grip /> | ||
| </Detail> | ||
| )} | ||
| <Detail> | ||
| <ProposalOptionTag option={option} /> | ||
| </Detail> | ||
| <Detail> | ||
| <DataTag> | ||
| {option?.actions?.length || 'No'} on-chain{' '} | ||
| {option?.actions?.length >= 2 ? 'actions' : 'action'} | ||
| </DataTag> | ||
| </Detail> | ||
| </div> | ||
| {isEditable && ( | ||
| <div> | ||
| <EditButton>Edit</EditButton> | ||
| </div> | ||
| )} | ||
| </DetailWrapper> | ||
|
|
||
| <ActionsWrapper indented={isEditable}> | ||
| {!isEditable && | ||
| option?.actions?.map((action, index) => ( | ||
| <ActionView key={index} call={action} isEditable={isEditable} /> | ||
| ))} | ||
|
|
||
| {isEditable && | ||
| option?.decodedActions?.map((action, index) => ( | ||
| <ActionEditor | ||
| key={index} | ||
| action={action} | ||
| onChange={updatedAction => updateAction(index, updatedAction)} | ||
| /> | ||
| ))} | ||
|
|
||
| {isEditable && ( | ||
| <AddButton | ||
| label="Add Action" | ||
| onClick={() => setIsActionsModalOpen(true)} | ||
| /> | ||
| )} | ||
| </ActionsWrapper> | ||
|
|
||
| <ActionModal | ||
| isOpen={isActionsModalOpen} | ||
| setIsOpen={setIsActionsModalOpen} | ||
| onAddAction={action => { | ||
| addAction(action); | ||
| setIsActionsModalOpen(false); | ||
| }} | ||
| /> | ||
| </OptionWrapper> | ||
| ); | ||
| }; | ||
|
|
||
| export default OptionRow; |
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.