-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'product-version' into consumo-com-produto
- Loading branch information
Showing
37 changed files
with
878 additions
and
190 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
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,36 @@ | ||
| import { PlusOutlined, MinusOutlined } from '@ant-design/icons'; | ||
| import React, { useCallback } from 'react'; | ||
| import { ActionWrapper, ActionButton } from './styles'; | ||
|
|
||
| export type NumberPickerProps = { | ||
| value: number; | ||
| onChange?: (value: number) => void; | ||
| }; | ||
|
|
||
| /** | ||
| * Resource selector component | ||
| * @param props component props | ||
| */ | ||
| export const NumberPicker: React.FC<NumberPickerProps> = ({ value, onChange }) => { | ||
| // Whenever a + or - button is clicked, send the updated value to the onChange event | ||
| const handleChangeAmount = useCallback( | ||
| (value: number) => { | ||
| if (onChange) { | ||
| onChange(value); | ||
| } | ||
| }, | ||
| [onChange] | ||
| ); | ||
|
|
||
| return ( | ||
| <ActionWrapper> | ||
| <ActionButton disabled={value === 0} onClick={() => handleChangeAmount(value - 1)}> | ||
| <MinusOutlined /> | ||
| </ActionButton> | ||
| {value} | ||
| <ActionButton onClick={() => handleChangeAmount(value + 1)}> | ||
| <PlusOutlined /> | ||
| </ActionButton> | ||
| </ActionWrapper> | ||
| ); | ||
| }; |
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,20 @@ | ||
| import styled from 'styled-components'; | ||
| import { Button } from 'antd'; | ||
|
|
||
| export const ActionWrapper = styled.div` | ||
| display: flex; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| `; | ||
|
|
||
| export const ActionButton = styled(Button)` | ||
| display: inline-block; | ||
| border-radius: 50%; | ||
| && { | ||
| width: ${(props) => props.theme.spacing.md}; | ||
| min-width: ${(props) => props.theme.spacing.md}; | ||
| height: ${(props) => props.theme.spacing.md}; | ||
| } | ||
| padding: 4px; | ||
| font-size: 12px; | ||
| `; |
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,84 @@ | ||
| import { Table } from 'antd'; | ||
| import React, { useCallback, useMemo } from 'react'; | ||
| import { NumberPicker } from '../numberPicker'; | ||
|
|
||
| type IdType<IdName extends string> = { | ||
| [I in IdName]: string | number; | ||
| }; | ||
|
|
||
| export type ResourceSelectorDataSourceItem<IdName extends string> = { | ||
| name: string; | ||
| amount: number; | ||
| } & IdType<IdName>; | ||
|
|
||
| export type ResourceSelectorValueItem<IdName extends string> = { | ||
| amount: number; | ||
| } & IdType<IdName>; | ||
|
|
||
| export type ResourceSelectorProps<IdName extends string> = { | ||
| idName: IdName; | ||
| title?: string; | ||
| datasource: ResourceSelectorDataSourceItem<IdName>[]; | ||
| value: ResourceSelectorValueItem<IdName>[]; | ||
| onChange?: (value: ResourceSelectorValueItem<IdName>[]) => void; | ||
| pagination?: boolean; | ||
| }; | ||
|
|
||
| /** | ||
| * Resource selector component | ||
| * @param props component props | ||
| */ | ||
| export function ResourceSelector<IdName extends string = 'id'>({ | ||
| idName, | ||
| title, | ||
| datasource, | ||
| value, | ||
| onChange, | ||
| pagination | ||
| }: ResourceSelectorProps<IdName>) { | ||
| // Reset the state every time the datasource changes | ||
| const resourceList = useMemo( | ||
| () => | ||
| datasource.map((item) => ({ | ||
| [idName]: item[idName], | ||
| name: item.name, | ||
| amount: value.find((resource) => resource[idName] === item[idName])?.amount || 0 | ||
| })), | ||
| [datasource, value, idName] | ||
| ); | ||
|
|
||
| // Whenever a + or - button is clicked, send the updated list of resources to the onChange event | ||
| const handleChangeAmount = useCallback( | ||
| (id: string | number, amount: number) => { | ||
| if (onChange) { | ||
| onChange( | ||
| resourceList | ||
| .map((resource) => | ||
| resource[idName] === id | ||
| ? { [idName]: id, amount } | ||
| : { [idName]: resource[idName], amount: resource.amount } | ||
| ) | ||
| .filter((resource) => resource.amount > 0) as ResourceSelectorValueItem<IdName>[] | ||
| ); | ||
| } | ||
| }, | ||
| [resourceList, onChange, idName] | ||
| ); | ||
|
|
||
| return ( | ||
| <Table | ||
| dataSource={resourceList} | ||
| showHeader={!!title} | ||
| pagination={pagination ? { pageSize: 5, showLessItems: true } : false} | ||
| rowKey="id" | ||
| > | ||
| <Table.Column title={title} dataIndex="name" width="65%" ellipsis={true} /> | ||
| <Table.Column | ||
| width="35%" | ||
| render={(item: ResourceSelectorValueItem<IdName>) => { | ||
| return <NumberPicker value={item.amount} onChange={(value) => handleChangeAmount(item[idName], value)} />; | ||
| }} | ||
| /> | ||
| </Table> | ||
| ); | ||
| } |
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
Oops, something went wrong.