Skip to content

Commit

Permalink
Types: Add types to <EditableList /> component
Browse files Browse the repository at this point in the history 
As we changed some code here, specifically around initializing instance
variables, we need to be extra careful in testing to prevent regressions.
  • Loading branch information
@dmsnell
dmsnell committed Feb 10, 2020
1 parent 1632c11 commit 9f353c8
Show file tree
Hide file tree
Showing 3 changed files with 83 additions and 28 deletions.
100 changes: 74 additions & 26 deletions lib/editable-list/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,22 +5,39 @@ import classNames from 'classnames';
import SmallCrossOutlineIcon from '../icons/cross-outline-small';
import ReorderIcon from '../icons/reorder';

export class EditableList extends Component {
import * as S from '../state';
import * as T from '../types';

type OwnProps = {
className: string;
getItemKey: (item: T.TagEntity) => T.EntityId;
onRemove: (tag: T.TagEntity) => any;
onReorder: (tags: T.TagEntity[]) => any;
renderItem: (tag: T.TagEntity) => React.ReactNode;
};

type StateProps = {
editing: boolean;
items: T.TagEntity[] | null;
sortTagsAlpha: boolean;
};

type Props = OwnProps & StateProps;

export class EditableList extends Component<Props> {
static displayName = 'EditableList';

reorderingElement: HTMLElement | null = null;
reorderingClientY: number = 0;
reorderingOffsetY: number = 0;
reorderingTranslateY: number = 0;

static propTypes = {
className: PropTypes.string,
editing: PropTypes.bool.isRequired,
items: PropTypes.array.isRequired,
renderItem: PropTypes.func.isRequired,
sortTagsAlpha: PropTypes.bool.isRequired,
getItemKey: PropTypes.func,
onRemove: PropTypes.func,
onReorder: PropTypes.func,
};

static defaultProps = {
getItemKey: item => item.id,
getItemKey: (item: T.TagEntity) => item.id,
};

state = {
Expand All @@ -32,17 +49,17 @@ export class EditableList extends Component {
componentWillMount() {
this.setState({
items: this.props.items,
reorderedItems: this.props.items.slice(),
reorderedItems: this.props.items ? this.props.items.slice() : [],
});
}

componentWillReceiveProps(nextProps) {
componentWillReceiveProps(nextProps: Props) {
if (nextProps.items !== this.state.items) {
this.stopReordering();

this.setState({
items: nextProps.items,
reorderedItems: nextProps.items.slice(),
reorderedItems: nextProps.items ? nextProps.items.slice() : [],
});
}
}
Expand Down Expand Up @@ -95,7 +112,7 @@ export class EditableList extends Component {
{onRemove && (
<span
className="editable-list-trash"
tabIndex={editing ? '0' : '-1'}
tabIndex={editing ? 0 : -1}
onClick={onRemove.bind(null, item)}
>
<SmallCrossOutlineIcon />
Expand All @@ -110,7 +127,7 @@ export class EditableList extends Component {
{onReorder && !sortTagsAlpha && (
<span
className="editable-list-reorder"
tabIndex={editing ? '0' : '-1'}
tabIndex={editing ? 0 : -1}
onDragStart={e => e.preventDefault()}
onMouseDown={this.onReorderStart.bind(this, itemId)}
onTouchStart={this.onReorderStart.bind(this, itemId)}
Expand All @@ -126,7 +143,10 @@ export class EditableList extends Component {
);
}

setReorderingElementRef = (reorderingId, element) => {
setReorderingElementRef = (
reorderingId: T.EntityId,
element: HTMLElement
) => {
if (reorderingId !== this.state.reorderingId) {
return;
}
Expand Down Expand Up @@ -177,12 +197,12 @@ export class EditableList extends Component {
this.reorderingElement = null;
};

stopReordering = resetOrdering => {
stopReordering = (resetOrdering = false) => {
this.unsetReorderingElement();

if (resetOrdering) {
this.setState({
reorderedItems: this.props.items.slice(),
reorderedItems: this.props.items ? this.props.items.slice() : [],
reorderingId: null,
});
} else {
Expand All @@ -192,10 +212,15 @@ export class EditableList extends Component {
}
};

reorderItemById = (reorderingId, offset, targetReorderingId) => {
reorderItemById = (
reorderingId: T.EntityId | null,
offset: number,
targetReorderingId: T.EntityId | null = null
) => {
const { getItemKey } = this.props;
const { reorderedItems } = this.state;
let reorderingIndex, targetIndex;
let reorderingIndex = null;
let targetIndex = null;

if (targetReorderingId === null) {
targetReorderingId = reorderingId;
Expand All @@ -215,7 +240,10 @@ export class EditableList extends Component {
return this.reorderItemByIndex(reorderingIndex, targetIndex + offset);
};

reorderItemByIndex = (reorderingIndex, targetIndex) => {
reorderItemByIndex = (
reorderingIndex: number | null,
targetIndex: number | null
) => {
if (reorderingIndex === targetIndex) {
return;
}
Expand All @@ -235,7 +263,13 @@ export class EditableList extends Component {
this.setState({ reorderedItems });
};

onReorderStart = (reorderingId, event) => {
onReorderStart = (
reorderingId: T.EntityId,
event: T.XOR<
React.MouseEvent<HTMLSpanElement>,
React.TouchEvent<HTMLSpanElement>
>
) => {
event.preventDefault();
event.currentTarget.focus();

Expand All @@ -252,7 +286,13 @@ export class EditableList extends Component {
this.bindReorderingListeners();
};

onReorderMove = (targetReorderingId, event) => {
onReorderMove = (
targetReorderingId: T.EntityId,
event: T.XOR<
React.MouseEvent<HTMLLIElement>,
React.TouchEvent<HTMLLIElement>
>
) => {
if (!this.reorderingElement || !this.props.editing) {
return;
}
Expand All @@ -276,15 +316,18 @@ export class EditableList extends Component {
this.positionReorderingElement();
};

onReorderEnd = event => {
onReorderEnd = (event: MouseEvent | TouchEvent) => {
event.preventDefault();
this.stopReordering();
this.props.onReorder(this.state.reorderedItems);
};

onReorderCancel = () => this.stopReordering(true);

onReorderKeyDown = (reorderingId, event) => {
onReorderKeyDown = (
reorderingId: T.EntityId,
event: React.KeyboardEvent<HTMLSpanElement>
) => {
if (event.key === 'ArrowUp') {
event.preventDefault();
this.reorderItemById(reorderingId, -1);
Expand All @@ -294,7 +337,7 @@ export class EditableList extends Component {
}
};

onKeyDown = event => {
onKeyDown = (event: KeyboardEvent) => {
const keyCode = event.keyCode || event.which;

if (keyCode === 27) {
Expand All @@ -304,7 +347,12 @@ export class EditableList extends Component {
};
}

const mapStateToProps = ({ settings: { sortTagsAlpha } }) => ({
const mapStateToProps: S.MapState<StateProps> = ({
appState: { editingTags, tags },
settings: { sortTagsAlpha },
}) => ({
editing: editingTags,
items: tags,
sortTagsAlpha,
});

Expand Down
2 changes: 0 additions & 2 deletions lib/tag-list/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,8 +83,6 @@ export class TagList extends Component {
</div>
<EditableList
className="tag-list-items"
items={tags}
editing={editingTags}
renderItem={this.renderItem}
onRemove={this.onTrashTag}
onReorder={this.onReorderTags}
Expand Down
9 changes: 9 additions & 0 deletions lib/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,3 +68,12 @@ export type ListDisplayMode = 'expanded' | 'comfy' | 'condensed';
export type SortType = 'alphabetical' | 'creationDate' | 'modificationDate';
export type Theme = 'system' | 'light' | 'dark';
export type TranslatableString = string;

///////////////////////////////////////
// Language and Platform
///////////////////////////////////////

export type Without<T, U> = { [P in Exclude<keyof T, keyof U>]?: never };
export type XOR<T, U> = T | U extends object
? (Without<T, U> & U) | (Without<U, T> & T)
: T | U;

0 comments on commit 9f353c8

Please sign in to comment.