Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[table] feat(EditableCell2): new placeholder prop #5421

Merged
merged 7 commits into from
Jul 20, 2022
Merged

[table] feat(EditableCell2): new placeholder prop #5421

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
490e769
Fix for placeholder issue #5083
Jul 8, 2022
5c6a1ed
Cleanup of code from previous commit
ayxliu19 Jul 8, 2022
2f4c940
Added develop yarn.lock
ayxliu19 Jul 19, 2022
c34b4a8
Merge remote-tracking branch 'origin/develop' into AL/Placeholder
ayxliu19 Jul 19, 2022
75fa9fd
Added new placeholder prop to EditableCell2
ayxliu19 Jul 19, 2022
531dfc6
Update packages/table/src/cell/editableCell2.tsx
ayxliu19 Jul 19, 2022
52b785e
Added placeholder to isEditing mode
ayxliu19 Jul 20, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions packages/table/src/cell/_cell.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,3 +64,11 @@
right: 0;
top: 0;
}

.#{$ns}-table-cell-text-placeholder {
color: $pt-text-color-muted;

.#{$ns}-dark & {
color: $pt-dark-text-color-muted;
}
}
12 changes: 10 additions & 2 deletions packages/table/src/cell/editableCell2.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,12 @@ export interface EditableCell2Props extends Omit<ICellProps, "onKeyDown" | "onKe
*/
isFocused?: boolean;

/**
* Optional placeholder value for when the cell is empty (overrides the
* placeholder in {@link EditableTextProps})
*/
placeholder?: string;

/**
* The value displayed in the text box. Be sure to update this value when
* rendering this component after a confirmed change.
Expand Down Expand Up @@ -143,6 +149,7 @@ export class EditableCell2 extends React.Component<EditableCell2Props, EditableC

const { isEditing, dirtyValue, savedValue } = this.state;
const interactive = spreadableProps.interactive || isEditing;
const hasValue = this.props.value != null && this.props.value !== "";

let cellContents: JSX.Element | undefined;
if (isEditing) {
Expand All @@ -158,7 +165,7 @@ export class EditableCell2 extends React.Component<EditableCell2Props, EditableC
onChange={this.handleChange}
onConfirm={this.handleConfirm}
onEdit={this.handleEdit}
placeholder=""
placeholder={this.props.placeholder}
selectAllOnFocus={false}
value={dirtyValue}
/>
Expand All @@ -167,9 +174,10 @@ export class EditableCell2 extends React.Component<EditableCell2Props, EditableC
const textClasses = classNames(Classes.TABLE_EDITABLE_TEXT, {
[Classes.TABLE_TRUNCATED_TEXT]: truncated,
[Classes.TABLE_NO_WRAP_TEXT]: !wrapText,
[Classes.TABLE_CELL_TEXT_PLACEHOLDER]: !hasValue,
});

cellContents = <div className={textClasses}>{savedValue}</div>;
cellContents = <div className={textClasses}>{hasValue ? savedValue : this.props.placeholder}</div>;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is good but I think we need to bring back the change to cellContents a few lines above here... <EditableText placeholder={this.props.placeholder}> should be set on L168, as suggested in the documentation of the new prop you just added.

}

return (
Expand Down
1 change: 1 addition & 0 deletions packages/table/src/common/classes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ export const TABLE_CONTAINER = `${NS}-table-container`;
export const TABLE_DRAGGING = `${NS}-table-dragging`;
export const TABLE_EDITABLE_NAME = `${NS}-table-editable-name`;
export const TABLE_EDITABLE_TEXT = `${NS}-table-editable-text`;
export const TABLE_CELL_TEXT_PLACEHOLDER = `${NS}-table-cell-text-placeholder`;
export const TABLE_FOCUS_REGION = `${NS}-table-focus-region`;
export const TABLE_HAS_INTERACTION_BAR = `${NS}-table-has-interaction-bar`;
export const TABLE_HAS_REORDER_HANDLE = `${NS}-table-has-reorder-handle`;
Expand Down