admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Refacto/abstract inplace input (#530)

Browse Source 
* Move code to new folder

* Deduplicate code, remove dependancy on table

* Remove more table dependency

* Move close logic to input

* Migrate editable text cell

* Rename EditableTextInput

* Fix component test id
This commit is contained in:
Emilien Chauvet
2023-07-07 12:11:57 -07:00
committed by GitHub
parent 26b033abc9
commit c847bca293
19 changed files with 189 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
front/src/pages/companies/companies-columns.tsx
View File

@ -4,7 +4,7 @@ import { createColumnHelper } from '@tanstack/react-table';
import { CompanyAccountOwnerCell } from '@/companies/components/CompanyAccountOwnerCell';
import { CompanyEditableNameChipCell } from '@/companies/components/CompanyEditableNameCell';
import { EditableDate } from '@/ui/components/editable-cell/types/EditableDate';
import { EditableText } from '@/ui/components/editable-cell/types/EditableText';
import { EditableTextCell } from '@/ui/components/editable-cell/types/EditableTextCell';
import { ColumnHead } from '@/ui/components/table/ColumnHead';
import {
IconBuildingSkyscraper,
@ -44,7 +44,7 @@ export const useCompaniesColumns = () => {
<ColumnHead viewName="URL" viewIcon={<IconLink size={16} />} />
),
cell: (props) => (
<EditableText
<EditableTextCell
content={props.row.original.domainName || ''}
placeholder="Domain name"
changeHandler={(value) => {
@ -66,7 +66,7 @@ export const useCompaniesColumns = () => {
<ColumnHead viewName="Employees" viewIcon={<IconUsers size={16} />} />
),
cell: (props) => (
<EditableText
<EditableTextCell
content={props.row.original.employees?.toString() || ''}
placeholder="Employees"
changeHandler={(value) => {
@ -89,7 +89,7 @@ export const useCompaniesColumns = () => {
<ColumnHead viewName="Address" viewIcon={<IconMap size={16} />} />
),
cell: (props) => (
<EditableText
<EditableTextCell
content={props.row.original.address || ''}
placeholder="Address"
changeHandler={(value) => {

8
front/src/pages/people/__stories__/People.inputs.stories.tsx
View File

@ -39,13 +39,13 @@ export const InteractWithManyRows: Story = {
);
expect(
canvas.queryByTestId('editable-cell-edit-mode-container'),
canvas.queryByTestId('inplace-input-edit-mode-container'),
).toBeNull();
await userEvent.click(firstRowEmailCell);
expect(
canvas.queryByTestId('editable-cell-edit-mode-container'),
canvas.queryByTestId('inplace-input-edit-mode-container'),
).toBeInTheDocument();
await userEvent.click(secondRowEmailCell);
@ -57,7 +57,7 @@ export const InteractWithManyRows: Story = {
);
expect(
canvas.queryByTestId('editable-cell-edit-mode-container'),
canvas.queryByTestId('inplace-input-edit-mode-container'),
).toBeNull();
await userEvent.click(secondRowEmailCellFocused);
@ -65,7 +65,7 @@ export const InteractWithManyRows: Story = {
await sleep(25);
expect(
canvas.queryByTestId('editable-cell-edit-mode-container'),
canvas.queryByTestId('inplace-input-edit-mode-container'),
).toBeInTheDocument();
},
parameters: {

6
front/src/pages/people/people-columns.tsx
View File

@ -5,7 +5,7 @@ import { EditablePeopleFullName } from '@/people/components/EditablePeopleFullNa
import { PeopleCompanyCell } from '@/people/components/PeopleCompanyCell';
import { EditableDate } from '@/ui/components/editable-cell/types/EditableDate';
import { EditablePhone } from '@/ui/components/editable-cell/types/EditablePhone';
import { EditableText } from '@/ui/components/editable-cell/types/EditableText';
import { EditableTextCell } from '@/ui/components/editable-cell/types/EditableTextCell';
import { ColumnHead } from '@/ui/components/table/ColumnHead';
import {
IconBuildingSkyscraper,
@ -55,7 +55,7 @@ export const usePeopleColumns = () => {
<ColumnHead viewName="Email" viewIcon={<IconMail size={16} />} />
),
cell: (props) => (
<EditableText
<EditableTextCell
placeholder="Email"
content={props.row.original.email || ''}
changeHandler={async (value: string) => {
@ -137,7 +137,7 @@ export const usePeopleColumns = () => {
<ColumnHead viewName="City" viewIcon={<IconMap size={16} />} />
),
cell: (props) => (
<EditableText
<EditableTextCell
editModeHorizontalAlign="right"
placeholder="City"
content={props.row.original.city || ''}