Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

react-trello-ts

Package Overview
Dependencies
Maintainers
1
Versions
32
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-trello-ts - npm Package Compare versions

Comparing version 1.0.3 to 2.0.13

dist/components/AddCardLink.d.ts
dist/components/AddCardLink.js
dist/components/Card.d.ts
dist/components/Card.js
dist/components/Card/Tag.d.ts
dist/components/Card/Tag.js
dist/components/index.d.ts
dist/components/index.js
dist/components/Lane/LaneFooter.d.ts
dist/components/Lane/LaneFooter.js
dist/components/Lane/LaneHeader.d.ts
dist/components/Lane/LaneHeader.js
dist/components/Lane/LaneHeader/LaneMenu.d.ts
dist/components/Lane/LaneHeader/LaneMenu.js
dist/components/Loader.d.ts
dist/components/Loader.js
dist/components/NewCardForm.d.ts
dist/components/NewCardForm.js
dist/components/NewLaneForm.d.ts
dist/components/NewLaneForm.js
dist/components/NewLaneSection.d.ts
dist/components/NewLaneSection.js
dist/controllers/Board.d.ts
dist/controllers/Board.js
dist/controllers/BoardContainer.d.ts
dist/controllers/BoardContainer.js
dist/controllers/Lane.d.ts
dist/controllers/Lane.js
dist/dnd/Container.d.ts
dist/dnd/Container.js
dist/dnd/Draggable.d.ts
dist/dnd/Draggable.js
dist/helpers/createTranslate.d.ts
dist/helpers/createTranslate.js
dist/helpers/deprecationWarnings.d.ts
dist/helpers/deprecationWarnings.js
dist/locales/en/translation.json
dist/locales/index.d.ts
dist/locales/index.js
dist/locales/ru/translation.json
dist/store/store.d.ts
dist/store/store.js
dist/store/useBoard.d.ts
dist/store/useBoard.js
dist/styles/Base.d.ts
dist/styles/Base.js
dist/styles/Elements.d.ts
dist/styles/Elements.js
dist/styles/Loader.d.ts
dist/styles/Loader.js
dist/types/Board.d.ts
dist/types/Board.js
dist/types/EventBus.d.ts
dist/types/EventBus.js
dist/types/utilities.d.ts
dist/types/utilities.js
dist/widgets/DeleteButton.d.ts
dist/widgets/DeleteButton.js
dist/widgets/EditableLabel.d.ts
dist/widgets/EditableLabel.js
dist/widgets/index.d.ts
dist/widgets/index.js
dist/widgets/InlineInput.d.ts
dist/widgets/InlineInput.js
dist/widgets/NewLaneTitleEditor.d.ts
dist/widgets/NewLaneTitleEditor.js
src/index.tsx

348

dist/index.d.ts

@@ -1,338 +0,14 @@

import React, { FC, PropsWithChildren, HTMLAttributes, ReactElement, Component, CSSProperties } from 'react';
import * as styled_components from 'styled-components';
import { ThemedStyledFunction } from 'styled-components';
interface DraggableProps extends HTMLAttributes<HTMLDivElement> {
render?: () => ReactElement;
}
declare const Draggable: FC<PropsWithChildren<DraggableProps>>;
interface ContainerProps {
behaviour?: 'move' | 'copy' | 'drag-zone';
groupName?: string;
orientation?: 'horizontal' | 'vertical';
style?: object;
dragHandleSelector?: string;
className?: string;
nonDragAreaSelector?: string;
dragBeginDelay?: number;
animationDuration?: number;
autoScrollEnabled?: string;
lockAxis?: string;
dragClass?: string;
dropClass?: string;
onDragStart?: (params: any) => void;
onDragEnd?: (params: any) => void;
onDrop?: (params: any) => void;
onDropReady?: (params: any) => void;
getChildPayload?: (index: number) => any;
shouldAnimateDrop?: (params: any) => boolean;
shouldAcceptDrop?: (params: any) => boolean;
onDragEnter?: (params: any) => void;
onDragLeave?: (params: any) => void;
render?: (params: any) => any;
getGhostParent?: () => any;
removeOnDropOut?: boolean;
}
declare class Container extends Component<ContainerProps> {
containerDiv: typeof Container | Element | Text;
prevContainer: typeof Container | Element | Text;
container: any;
constructor(props: any);
componentDidMount(): void;
componentWillUnmount(): void;
componentDidUpdate(): void;
render(): any;
setRef(element: any): void;
getContainerOptions(): Readonly<ContainerProps> & Readonly<{
children?: React.ReactNode;
}> & Pick<ContainerProps, "render" | "onDragEnd" | "onDragEnter" | "onDragLeave" | "onDragStart" | "onDrop" | "onDropReady" | "getChildPayload" | "shouldAnimateDrop" | "shouldAcceptDrop" | "getGhostParent">;
}
declare const loadBoard: any;
declare const addLane: any;
declare const boardActions_loadBoard: typeof loadBoard;
declare const boardActions_addLane: typeof addLane;
declare namespace boardActions {
export {
boardActions_loadBoard as loadBoard,
boardActions_addLane as addLane,
};
}
declare const addCard: any;
declare const updateCard: any;
declare const removeCard: any;
declare const moveCardAcrossLanes: any;
declare const updateCards: any;
declare const updateLanes: any;
declare const updateLane: any;
declare const paginateLane: any;
declare const moveLane: any;
declare const removeLane: any;
declare const laneActions_addCard: typeof addCard;
declare const laneActions_updateCard: typeof updateCard;
declare const laneActions_removeCard: typeof removeCard;
declare const laneActions_moveCardAcrossLanes: typeof moveCardAcrossLanes;
declare const laneActions_updateCards: typeof updateCards;
declare const laneActions_updateLanes: typeof updateLanes;
declare const laneActions_updateLane: typeof updateLane;
declare const laneActions_paginateLane: typeof paginateLane;
declare const laneActions_moveLane: typeof moveLane;
declare const laneActions_removeLane: typeof removeLane;
declare namespace laneActions {
export {
laneActions_addCard as addCard,
laneActions_updateCard as updateCard,
laneActions_removeCard as removeCard,
laneActions_moveCardAcrossLanes as moveCardAcrossLanes,
laneActions_updateCards as updateCards,
laneActions_updateLanes as updateLanes,
laneActions_updateLane as updateLane,
laneActions_paginateLane as paginateLane,
laneActions_moveLane as moveLane,
laneActions_removeLane as removeLane,
};
}
interface BoardData {
lanes: Lane[];
}
interface Lane {
id: string;
title?: string;
label?: string;
style?: CSSProperties;
cards: Card$1[];
currentPage?: number;
droppable?: boolean;
labelStyle?: CSSProperties;
cardStyle?: CSSProperties;
disallowAddingCard?: boolean;
[key: string]: any;
}
interface Card$1 {
id: string;
title?: string;
label?: string;
description?: string;
laneId?: string;
style?: CSSProperties;
draggable?: boolean;
[key: string]: any;
}
declare function _default$4(TABLE: any): (key: any) => any;
interface FormState {
title: string;
description: string;
label: string;
laneId: string;
}
interface NewCardFormProps {
laneId: string;
onCancel: () => void;
onAdd: (formState: FormState) => void;
t: typeof _default$4;
}
declare const NewCardForm: FC<PropsWithChildren<NewCardFormProps>>;
declare type LaneHeaderProps = _LaneHeaderProps & {
[key: string]: any;
};
interface _LaneHeaderProps extends HTMLAttributes<HTMLHeadElement> {
updateTitle?: (title: string) => void;
canAddLanes?: boolean;
onDelete?: () => void;
editLaneTitle?: boolean;
label?: string;
titleStyle?: CSSProperties;
labelStyle?: CSSProperties;
laneDraggable?: boolean;
t: typeof _default$4;
}
declare const LaneHeader: FC<PropsWithChildren<LaneHeaderProps>>;
interface LaneFooterProps extends HTMLAttributes<HTMLDivElement> {
collapsed?: boolean;
}
declare const LaneFooter: FC<PropsWithChildren<LaneFooterProps>>;
interface TagProps {
title: string;
color?: string;
bgcolor?: string;
tagStyle?: CSSProperties;
}
declare type CardProps = {
showDeleteButton?: boolean;
onDelete?: () => void;
onClick?: (e: any) => void;
onChange?: (card: Card$1) => void;
style?: CSSProperties;
tagStyle?: CSSProperties;
className?: string;
id: string;
index: number;
title?: string;
label?: string;
description?: string;
tags?: TagProps[];
cardDraggable?: boolean;
editable?: boolean;
t: typeof _default$4;
} & {
[key: string]: any;
};
declare const Card: FC<PropsWithChildren<CardProps>>;
declare const Loader: () => JSX.Element;
interface NewLaneFormProps extends HTMLAttributes<ThemedStyledFunction<'section', any, {}, never>> {
onCancel: () => void;
onAdd: ({ id, title }: {
id: string;
title: string;
}) => void;
t: typeof _default$4;
}
declare const NewLaneForm: FC<PropsWithChildren<NewLaneFormProps>>;
interface AddCardLinkProps extends HTMLAttributes<HTMLAnchorElement> {
t: typeof _default$4;
}
declare const AddCardLink: FC<PropsWithChildren<AddCardLinkProps>>;
declare const NewLaneSection: FC<PropsWithChildren<{
t: typeof _default$4;
onClick: () => void;
}>>;
declare const GlobalStyle: styled_components.GlobalStyleComponent<{}, styled_components.DefaultTheme>;
declare const BoardWrapper: styled_components.StyledComponent<"div", any, {}, never>;
declare const Section: styled_components.StyledComponent<"section", any, {}, never>;
declare const ScrollableLane: styled_components.StyledComponent<"div", any, {
isDraggingOver?: boolean;
}, never>;
declare const DefaultComponents_GlobalStyle: typeof GlobalStyle;
declare const DefaultComponents_BoardWrapper: typeof BoardWrapper;
declare const DefaultComponents_Loader: typeof Loader;
declare const DefaultComponents_ScrollableLane: typeof ScrollableLane;
declare const DefaultComponents_LaneHeader: typeof LaneHeader;
declare const DefaultComponents_LaneFooter: typeof LaneFooter;
declare const DefaultComponents_Section: typeof Section;
declare const DefaultComponents_NewLaneForm: typeof NewLaneForm;
declare const DefaultComponents_NewLaneSection: typeof NewLaneSection;
declare const DefaultComponents_NewCardForm: typeof NewCardForm;
declare const DefaultComponents_Card: typeof Card;
declare const DefaultComponents_AddCardLink: typeof AddCardLink;
declare namespace DefaultComponents {
export {
DefaultComponents_GlobalStyle as GlobalStyle,
DefaultComponents_BoardWrapper as BoardWrapper,
DefaultComponents_Loader as Loader,
DefaultComponents_ScrollableLane as ScrollableLane,
DefaultComponents_LaneHeader as LaneHeader,
DefaultComponents_LaneFooter as LaneFooter,
DefaultComponents_Section as Section,
DefaultComponents_NewLaneForm as NewLaneForm,
DefaultComponents_NewLaneSection as NewLaneSection,
DefaultComponents_NewCardForm as NewCardForm,
DefaultComponents_Card as Card,
DefaultComponents_AddCardLink as AddCardLink,
};
}
interface BoardContainerProps {
id?: string;
components?: Partial<typeof DefaultComponents>;
actions?: typeof laneActions & typeof boardActions;
data: BoardData;
reducerData?: BoardData;
onDataChange?: (reducerData: BoardData) => void;
eventBusHandle?: (handle: {
publish: (event: any) => any;
}) => void;
onLaneScroll?: (requestedPage: any, laneId: any) => Promise<unknown> | unknown;
onCardClick?: (cardId: Card$1['id'], metadata: {
id: string;
}, card: Card$1) => void;
onBeforeCardDelete?: () => void;
onCardDelete?: (cardId: string, laneId: string) => void;
onCardAdd?: (card: Card$1, laneId: string) => void;
onCardUpdate?: (cardId: string, data: Card$1) => void;
onLaneAdd?: (laneAddParams: FormState) => void;
onLaneDelete?: () => void;
onLaneClick?: (laneId: string) => void;
onLaneUpdate?: (laneId: string, data: Lane) => void;
laneSortFunction?: (cardA: Card$1, cardB: Card$1) => number;
draggable?: boolean;
collapsibleLanes?: boolean;
editable?: boolean;
canAddLanes?: boolean;
hideCardDeleteAction?: boolean;
hideCardDeleteIcon?: boolean;
handleDragStart?: (cardId: string, laneId: string) => void;
handleDragEnd?: (cardId: Card$1['id'], sourceLandId: Lane['id'], targetLaneId: Lane['id'], position: number, card: Card$1) => void;
handleLaneDragStart?: (payloadId: string) => void;
handleLaneDragEnd?: (removedIndex: string, addedIndex: string, payload: Lane) => void;
style?: CSSProperties;
tagStyle?: CSSProperties;
laneStyle?: CSSProperties;
cardStyle?: CSSProperties;
laneDraggable?: boolean;
cardDraggable?: boolean;
cardDragClass?: string;
laneDragClass?: string;
laneDropClass?: string;
editLaneTitle?: boolean;
onCardMoveAcrossLanes?: (fromLaneId: string, toLaneId: string, cardId: string, addedIndex: string) => void;
t?: typeof _default$4;
}
declare const _default$3: any;
declare const _default$2: any;
declare const _default$1: {
en: {
translation: any;
};
ru: {
translation: any;
};
};
interface DeleteButtonProps extends HTMLAttributes<HTMLDivElement> {
}
declare const DeleteButton: FC<PropsWithChildren<DeleteButtonProps>>;
interface EditableLabelProps {
onChange?: (labelText: string) => void;
placeholder?: string;
autoFocus?: boolean;
inline?: boolean;
value?: string;
}
declare const EditableLabel: FC<PropsWithChildren<EditableLabelProps>>;
interface InlineInputProps {
onSave?: (inputValue: string) => void;
onCancel?: () => void;
border?: boolean;
placeholder?: string;
value?: string;
autoFocus?: boolean;
resize?: 'vertical' | 'horizontal' | 'none';
}
declare const InlineInput: FC<PropsWithChildren<InlineInputProps>>;
import { Draggable } from "./dnd/Draggable";
import Container from "./dnd/Container";
import { BoardContainer, BoardContainerProps } from "./controllers/BoardContainer";
import { Lane } from "./controllers/Lane";
import * as DefaultComponents from "./components";
import locales from "./locales";
export * from "./widgets";
import createTranslate from "./helpers/createTranslate";
export { Draggable, Container, BoardContainer, Lane, createTranslate, locales };
export { DefaultComponents as components };
declare const _default: ({ components, lang, ...otherProps }: BoardContainerProps & {
lang?: keyof typeof _default$1;
lang?: keyof typeof locales;
}) => JSX.Element;
export { _default$3 as BoardContainer, Container, DeleteButton, Draggable, EditableLabel, InlineInput, _default$2 as Lane, DefaultComponents as components, _default$4 as createTranslate, _default as default, _default$1 as locales };
export default _default;

2024

dist/index.js

@@ -1,1961 +0,99 @@

var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __commonJS = (cb, mod) => function __require() {
return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
var _exportNames = {
Draggable: true,
Container: true,
BoardContainer: true,
Lane: true,
components: true,
locales: true,
createTranslate: true
};
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
Object.defineProperty(exports, "BoardContainer", {
enumerable: true,
get: function get() {
return _BoardContainer.BoardContainer;
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/locales/en/translation.json
var require_translation = __commonJS({
"src/locales/en/translation.json"(exports, module2) {
module2.exports = {
"Add another lane": "+ Add another lane",
"Click to add card": "Click to add card",
"Delete lane": "Delete lane",
"Lane actions": "Lane actions",
button: {
"Add lane": "Add lane",
"Add card": "Add card",
Cancel: "Cancel"
},
placeholder: {
title: "title",
description: "description",
label: "label"
}
};
});
Object.defineProperty(exports, "Container", {
enumerable: true,
get: function get() {
return _Container.default;
}
});
// src/locales/ru/translation.json
var require_translation2 = __commonJS({
"src/locales/ru/translation.json"(exports, module2) {
module2.exports = {
"Add another lane": "\uFF0B\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u043A\u043E\u043B\u043E\u043D\u043A\u0443",
"Click to add card": "\uFF0B\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u043A\u0430\u0440\u0442\u043E\u0447\u043A\u0443",
"Delete lane": "\u0423\u0434\u0430\u043B\u0438\u0442\u044C \u043A\u043E\u043B\u043E\u043D\u043A\u0443",
"Lane actions": "\u0414\u0435\u0439\u0441\u0442\u0432\u0438\u044F \u043D\u0430\u0434 \u043A\u043E\u043B\u043E\u043D\u043A\u043E\u0439",
button: {
"Add card": "\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u043A\u0430\u0440\u0442\u0443",
"Add lane": "\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u043A\u043E\u043B\u043E\u043D\u043A\u0443",
Cancel: "\u041E\u0442\u043C\u0435\u043D\u0438\u0442\u044C"
},
placeholder: {
title: "\u041D\u0430\u0437\u0432\u0430\u043D\u0438\u0435",
description: "\u041E\u043F\u0438\u0441\u0430\u043D\u0438\u0435",
label: "\u041C\u0435\u0442\u043A\u0430"
}
};
Object.defineProperty(exports, "Draggable", {
enumerable: true,
get: function get() {
return _Draggable.Draggable;
}
});
// src/index.tsx
var src_exports = {};
__export(src_exports, {
BoardContainer: () => BoardContainer_default,
Container: () => Container_default,
DeleteButton: () => DeleteButton,
Draggable: () => Draggable,
EditableLabel: () => EditableLabel,
InlineInput: () => InlineInput2,
Lane: () => Lane_default,
components: () => components_exports,
createTranslate: () => createTranslate_default,
default: () => src_default,
locales: () => locales_default
});
module.exports = __toCommonJS(src_exports);
// react-shim.js
var import_react = __toESM(require("react"));
// src/index.tsx
var import_react21 = __toESM(require("react"));
// src/dnd/Draggable.tsx
var import_react2 = __toESM(require("react"));
var import_trello_smooth_dnd = require("trello-smooth-dnd");
var { wrapperClass } = import_trello_smooth_dnd.constants;
var Draggable = ({ className, render, children, ...rest }) => {
if (render) {
return import_react2.default.cloneElement(render(), { className: wrapperClass });
Object.defineProperty(exports, "Lane", {
enumerable: true,
get: function get() {
return _Lane.Lane;
}
const clsName = `${className ? className + " " : ""}`;
return /* @__PURE__ */ import_react2.default.createElement("div", {
...rest,
className: `${clsName}${wrapperClass}`
}, children);
};
// src/dnd/Container.tsx
var import_react3 = __toESM(require("react"));
var import_react_dom = __toESM(require("react-dom"));
var import_trello_smooth_dnd2 = __toESM(require("trello-smooth-dnd"));
import_trello_smooth_dnd2.default.dropHandler = import_trello_smooth_dnd2.dropHandlers.reactDropHandler().handler;
import_trello_smooth_dnd2.default.wrapChild = (p) => p;
var Container = class extends import_react3.Component {
constructor(props) {
super(props);
this.getContainerOptions = this.getContainerOptions.bind(this);
this.setRef = this.setRef.bind(this);
this.prevContainer = null;
}
componentDidMount() {
this.containerDiv = this.containerDiv || import_react_dom.default.findDOMNode(this);
this.prevContainer = this.containerDiv;
this.container = (0, import_trello_smooth_dnd2.default)(this.containerDiv, this.getContainerOptions());
}
componentWillUnmount() {
this.container.dispose();
this.container = null;
}
componentDidUpdate() {
this.containerDiv = this.containerDiv || import_react_dom.default.findDOMNode(this);
if (this.containerDiv) {
if (this.prevContainer && this.prevContainer !== this.containerDiv) {
this.container.dispose();
this.container = (0, import_trello_smooth_dnd2.default)(this.containerDiv, this.getContainerOptions());
this.prevContainer = this.containerDiv;
}
}
}
render() {
if (this.props.render) {
return this.props.render(this.setRef);
} else {
return /* @__PURE__ */ import_react3.default.createElement("div", {
style: this.props.style,
ref: this.setRef
}, this.props.children);
}
}
setRef(element) {
this.containerDiv = element;
}
getContainerOptions() {
const functionProps = {};
if (this.props.onDragStart) {
functionProps.onDragStart = (...p) => this.props.onDragStart(...p);
}
if (this.props.onDragEnd) {
functionProps.onDragEnd = (...p) => this.props.onDragEnd(...p);
}
if (this.props.onDrop) {
functionProps.onDrop = (...p) => this.props.onDrop(...p);
}
if (this.props.getChildPayload) {
functionProps.getChildPayload = (...p) => this.props.getChildPayload(...p);
}
if (this.props.shouldAnimateDrop) {
functionProps.shouldAnimateDrop = (...p) => this.props.shouldAnimateDrop(...p);
}
if (this.props.shouldAcceptDrop) {
functionProps.shouldAcceptDrop = (...p) => this.props.shouldAcceptDrop(...p);
}
if (this.props.onDragEnter) {
functionProps.onDragEnter = (...p) => this.props.onDragEnter(...p);
}
if (this.props.onDragLeave) {
functionProps.onDragLeave = (...p) => this.props.onDragLeave(...p);
}
if (this.props.render) {
functionProps.render = (...p) => this.props.render(...p);
}
if (this.props.onDropReady) {
functionProps.onDropReady = (...p) => this.props.onDropReady(...p);
}
if (this.props.getGhostParent) {
functionProps.getGhostParent = (...p) => this.props.getGhostParent(...p);
}
return Object.assign({}, this.props, functionProps);
}
};
var Container_default = Container;
// src/controllers/BoardContainer.tsx
var import_react5 = __toESM(require("react"));
var import_redux2 = require("redux");
var import_react_redux2 = require("react-redux");
var import_pick = __toESM(require("lodash/pick"));
var import_isEqual2 = __toESM(require("lodash/isEqual"));
// src/controllers/Lane.tsx
var import_react4 = __toESM(require("react"));
var import_classnames = __toESM(require("classnames"));
var import_redux = require("redux");
var import_react_redux = require("react-redux");
var import_isEqual = __toESM(require("lodash/isEqual"));
var import_cloneDeep = __toESM(require("lodash/cloneDeep"));
var import_v1 = __toESM(require("uuid/v1"));
// src/actions/LaneActions.ts
var LaneActions_exports = {};
__export(LaneActions_exports, {
addCard: () => addCard,
moveCardAcrossLanes: () => moveCardAcrossLanes,
moveLane: () => moveLane,
paginateLane: () => paginateLane,
removeCard: () => removeCard,
removeLane: () => removeLane,
updateCard: () => updateCard,
updateCards: () => updateCards,
updateLane: () => updateLane,
updateLanes: () => updateLanes
});
var import_redux_actions = require("redux-actions");
var addCard = (0, import_redux_actions.createAction)("ADD_CARD");
var updateCard = (0, import_redux_actions.createAction)("UPDATE_CARD");
var removeCard = (0, import_redux_actions.createAction)("REMOVE_CARD");
var moveCardAcrossLanes = (0, import_redux_actions.createAction)("MOVE_CARD");
var updateCards = (0, import_redux_actions.createAction)("UPDATE_CARDS");
var updateLanes = (0, import_redux_actions.createAction)("UPDATE_LANES");
var updateLane = (0, import_redux_actions.createAction)("UPDATE_LANE");
var paginateLane = (0, import_redux_actions.createAction)("PAGINATE_LANE");
var moveLane = (0, import_redux_actions.createAction)("MOVE_LANE");
var removeLane = (0, import_redux_actions.createAction)("REMOVE_LANE");
// src/controllers/Lane.tsx
var Lane = class extends import_react4.Component {
constructor() {
super(...arguments);
this.state = {
loading: false,
currentPage: this.props.currentPage,
addCardMode: false,
collapsed: false,
isDraggingOver: false
};
this.handleScroll = (evt) => {
const node = evt.target;
const elemScrollPosition = node.scrollHeight - node.scrollTop - node.clientHeight;
const { onLaneScroll } = this.props;
if (elemScrollPosition < 1 && onLaneScroll && !this.state.loading) {
const { currentPage } = this.state;
this.setState({ loading: true });
const nextPage = currentPage + 1;
onLaneScroll(nextPage, this.props.id).then((moreCards) => {
if ((moreCards || []).length > 0) {
this.props.actions.paginateLane({
laneId: this.props.id,
newCards: moreCards,
nextPage
});
}
this.setState({ loading: false });
});
}
};
this.laneDidMount = (node) => {
if (node) {
node.addEventListener("scroll", this.handleScroll);
}
};
this.removeCard = (cardId) => {
if (this.props.onBeforeCardDelete && typeof this.props.onBeforeCardDelete === "function") {
this.props.onBeforeCardDelete(() => {
this.props.onCardDelete && this.props.onCardDelete(cardId, this.props.id);
this.props.actions.removeCard({ laneId: this.props.id, cardId });
});
} else {
this.props.onCardDelete && this.props.onCardDelete(cardId, this.props.id);
this.props.actions.removeCard({ laneId: this.props.id, cardId });
}
};
this.handleCardClick = (e, card) => {
const { onCardClick } = this.props;
onCardClick && onCardClick(card.id, card.metadata, card.laneId);
e.stopPropagation();
};
this.showEditableCard = () => {
this.setState({ addCardMode: true });
};
this.hideEditableCard = () => {
this.setState({ addCardMode: false });
};
this.addNewCard = (params) => {
const _laneId = params.laneId || this.props.id;
const id = (0, import_v1.default)();
this.hideEditableCard();
let card = { id, ...params };
this.props.actions.addCard({ _laneId, card });
this.props.onCardAdd(card, _laneId);
};
this.onDragStart = ({ payload }) => {
const { handleDragStart } = this.props;
handleDragStart && handleDragStart(payload.id, payload.laneId);
};
this.shouldAcceptDrop = (sourceContainerOptions) => {
return this.props.droppable && sourceContainerOptions.groupName === this.groupName;
};
this.onDragEnd = (laneId, result) => {
const { handleDragEnd } = this.props;
const { addedIndex, payload } = result;
if (this.state.isDraggingOver) {
this.setState({ isDraggingOver: false });
}
if (addedIndex != null) {
const newCard = { ...(0, import_cloneDeep.default)(payload), laneId };
const response = handleDragEnd ? handleDragEnd(payload.id, payload.laneId, laneId, addedIndex, newCard) : true;
if (response === void 0 || !!response) {
this.props.actions.moveCardAcrossLanes({
fromLaneId: payload.laneId,
toLaneId: laneId,
cardId: payload.id,
index: addedIndex
});
this.props.onCardMoveAcrossLanes(payload.laneId, laneId, payload.id, addedIndex);
}
return response;
}
};
this.updateCard = (updatedCard) => {
this.props.actions.updateCard({ laneId: this.props.id, card: updatedCard });
this.props.onCardUpdate(this.props.id, updatedCard);
};
this.renderDragContainer = (isDraggingOver) => {
const {
id,
cards,
laneSortFunction,
editable = false,
hideCardDeleteIcon,
cardDraggable,
cardDragClass,
cardDropClass,
tagStyle,
cardStyle,
components,
t
} = this.props;
const { addCardMode, collapsed } = this.state;
const showableCards = collapsed ? [] : cards;
const cardList = this.sortCards(showableCards, laneSortFunction).map((card, idx) => {
const onDeleteCard = () => this.removeCard(card.id);
const cardToRender = /* @__PURE__ */ import_react4.default.createElement(components.Card, {
key: card.id,
index: idx,
style: card.style || cardStyle,
className: "react-trello-card",
onDelete: onDeleteCard,
onClick: (e) => this.handleCardClick(e, card),
onChange: (updatedCard) => this.updateCard(updatedCard),
showDeleteButton: !hideCardDeleteIcon,
tagStyle,
cardDraggable,
editable,
t,
...card
});
return cardDraggable && (!card.hasOwnProperty("draggable") || card.draggable) ? /* @__PURE__ */ import_react4.default.createElement(Draggable, {
key: card.id
}, cardToRender) : /* @__PURE__ */ import_react4.default.createElement("span", {
key: card.id
}, cardToRender);
});
return /* @__PURE__ */ import_react4.default.createElement(components.ScrollableLane, {
ref: this.laneDidMount,
isDraggingOver
}, /* @__PURE__ */ import_react4.default.createElement(Container_default, {
orientation: "vertical",
groupName: this.groupName,
dragClass: cardDragClass,
dropClass: cardDropClass,
onDragStart: this.onDragStart,
onDrop: (e) => this.onDragEnd(id, e),
onDragEnter: () => this.setState({ isDraggingOver: true }),
onDragLeave: () => this.setState({ isDraggingOver: false }),
shouldAcceptDrop: this.shouldAcceptDrop,
getChildPayload: (index) => this.props.getCardDetails(id, index)
}, cardList), editable && !addCardMode && /* @__PURE__ */ import_react4.default.createElement(components.AddCardLink, {
onClick: this.showEditableCard,
t
}), addCardMode && /* @__PURE__ */ import_react4.default.createElement(components.NewCardForm, {
onCancel: this.hideEditableCard,
t,
laneId: id,
onAdd: this.addNewCard
}));
};
this.removeLane = () => {
const { id } = this.props;
this.props.actions.removeLane({ laneId: id });
this.props.onLaneDelete(id);
};
this.updateTitle = (value) => {
this.props.actions.updateLane({ id: this.props.id, title: value });
this.props.onLaneUpdate(this.props.id, { title: value });
};
this.renderHeader = (pickedProps) => {
const { components, t } = this.props;
return /* @__PURE__ */ import_react4.default.createElement(components.LaneHeader, {
onDelete: this.removeLane,
onDoubleClick: this.toggleLaneCollapsed,
updateTitle: this.updateTitle,
...pickedProps,
t
});
};
this.toggleLaneCollapsed = () => {
this.props.collapsibleLanes && this.setState((state) => ({ collapsed: !state.collapsed }));
};
exports.components = void 0;
Object.defineProperty(exports, "createTranslate", {
enumerable: true,
get: function get() {
return _createTranslate.default;
}
sortCards(cards, sortFunction) {
if (!cards)
return [];
if (!sortFunction)
return cards;
return cards.concat().sort(function(card1, card2) {
return sortFunction(card1, card2);
});
}
UNSAFE_componentWillReceiveProps(nextProps) {
if (!(0, import_isEqual.default)(this.props.cards, nextProps.cards)) {
this.setState({
currentPage: nextProps.currentPage
});
}
}
get groupName() {
const { boardId } = this.props;
return `TrelloBoard${boardId}Lane`;
}
render() {
const { loading, isDraggingOver, collapsed } = this.state;
const {
id,
cards,
collapsibleLanes,
components,
onLaneClick,
onLaneScroll,
onCardClick,
onCardAdd,
onBeforeCardDelete,
onCardDelete,
onLaneDelete,
onLaneUpdate,
onCardUpdate,
onCardMoveAcrossLanes,
...otherProps
} = this.props;
const allClassNames = (0, import_classnames.default)("react-trello-lane", this.props.className || "");
const showFooter = collapsibleLanes && cards.length > 0;
return /* @__PURE__ */ import_react4.default.createElement(components.Section, {
...otherProps,
key: id,
onClick: () => onLaneClick && onLaneClick(id),
draggable: false,
className: allClassNames
}, this.renderHeader({ id, cards, ...otherProps }), this.renderDragContainer(isDraggingOver), loading && /* @__PURE__ */ import_react4.default.createElement(components.Loader, null), showFooter && /* @__PURE__ */ import_react4.default.createElement(components.LaneFooter, {
onClick: this.toggleLaneCollapsed,
collapsed
}));
}
};
var mapDispatchToProps = (dispatch) => ({
actions: (0, import_redux.bindActionCreators)(LaneActions_exports, dispatch)
});
var Lane_default = (0, import_react_redux.connect)(
null,
mapDispatchToProps
)(Lane);
// src/controllers/BoardContainer.tsx
var import_react_popopo = require("react-popopo");
// src/actions/BoardActions.ts
var BoardActions_exports = {};
__export(BoardActions_exports, {
addLane: () => addLane,
loadBoard: () => loadBoard
});
var import_redux_actions2 = require("redux-actions");
var loadBoard = (0, import_redux_actions2.createAction)("LOAD_BOARD");
var addLane = (0, import_redux_actions2.createAction)("ADD_LANE");
// src/controllers/BoardContainer.tsx
var BoardContainer = class extends import_react5.Component {
constructor() {
super(...arguments);
this.state = {
addLaneMode: false
};
this.onDragStart = ({ payload }) => {
const { handleLaneDragStart } = this.props;
handleLaneDragStart(payload.id);
};
this.onLaneDrop = ({ removedIndex, addedIndex, payload }) => {
const { actions, handleLaneDragEnd } = this.props;
if (removedIndex !== addedIndex) {
actions.moveLane({ oldIndex: removedIndex, newIndex: addedIndex });
handleLaneDragEnd(removedIndex, addedIndex, payload);
}
};
this.getCardDetails = (laneId, cardIndex) => {
return this.props.reducerData.lanes.find((lane) => lane.id === laneId).cards[cardIndex];
};
this.getLaneDetails = (index) => {
return this.props.reducerData.lanes[index];
};
this.wireEventBus = () => {
const { actions, eventBusHandle } = this.props;
let eventBus = {
publish: (event) => {
switch (event.type) {
case "ADD_CARD":
return actions.addCard({ laneId: event.laneId, card: event.card });
case "UPDATE_CARD":
return actions.updateCard({ laneId: event.laneId, card: event.card });
case "REMOVE_CARD":
return actions.removeCard({ laneId: event.laneId, cardId: event.cardId });
case "REFRESH_BOARD":
return actions.loadBoard(event.data);
case "MOVE_CARD":
return actions.moveCardAcrossLanes({
fromLaneId: event.fromLaneId,
toLaneId: event.toLaneId,
cardId: event.cardId,
index: event.index
});
case "UPDATE_CARDS":
return actions.updateCards({ laneId: event.laneId, cards: event.cards });
case "UPDATE_LANES":
return actions.updateLanes(event.lanes);
case "UPDATE_LANE":
return actions.updateLane(event.lane);
}
}
};
eventBusHandle(eventBus);
};
this.hideEditableLane = () => {
this.setState({ addLaneMode: false });
};
this.showEditableLane = () => {
this.setState({ addLaneMode: true });
};
this.addNewLane = (params) => {
this.hideEditableLane();
this.props.actions.addLane(params);
this.props.onLaneAdd(params);
};
exports.default = void 0;
Object.defineProperty(exports, "locales", {
enumerable: true,
get: function get() {
return _locales.default;
}
componentDidMount() {
const { actions, eventBusHandle } = this.props;
actions.loadBoard(this.props.data);
if (eventBusHandle) {
this.wireEventBus();
}
}
UNSAFE_componentWillReceiveProps(nextProps) {
const { data, reducerData, onDataChange } = this.props;
if (nextProps.reducerData && !(0, import_isEqual2.default)(reducerData, nextProps.reducerData)) {
onDataChange(nextProps.reducerData);
}
if (nextProps.data && !(0, import_isEqual2.default)(nextProps.data, data)) {
this.props.actions.loadBoard(nextProps.data);
onDataChange(nextProps.data);
}
}
get groupName() {
const { id } = this.props;
return `TrelloBoard${id}`;
}
render() {
const {
id,
components,
reducerData,
draggable = false,
laneDraggable = true,
laneDragClass = "react_trello_dragLaneClass",
laneDropClass = "",
style,
onDataChange = () => {
},
onCardAdd,
onCardUpdate = () => {
},
onCardClick,
onBeforeCardDelete,
onCardDelete,
onLaneScroll,
onLaneClick,
onLaneAdd = () => {
},
onLaneDelete = () => {
},
onLaneUpdate,
editable = false,
canAddLanes = false,
laneStyle,
onCardMoveAcrossLanes = () => {
},
t,
...otherProps
} = this.props;
const { addLaneMode } = this.state;
const passthroughProps = (0, import_pick.default)(this.props, [
"onCardMoveAcrossLanes",
"onLaneScroll",
"onLaneDelete",
"onLaneUpdate",
"onCardClick",
"onBeforeCardDelete",
"onCardDelete",
"onCardAdd",
"onCardUpdate",
"onLaneClick",
"laneSortFunction",
"draggable",
"laneDraggable",
"cardDraggable",
"collapsibleLanes",
"canAddLanes",
"hideCardDeleteIcon",
"tagStyle",
"handleDragStart",
"handleDragEnd",
"cardDragClass",
"editLaneTitle",
"t"
]);
return /* @__PURE__ */ import_react5.default.createElement(components.BoardWrapper, {
style,
...otherProps,
draggable: false
}, /* @__PURE__ */ import_react5.default.createElement(import_react_popopo.PopoverWrapper, null, /* @__PURE__ */ import_react5.default.createElement(Container_default, {
orientation: "horizontal",
onDragStart: this.onDragStart,
dragClass: laneDragClass,
dropClass: laneDropClass,
onDrop: this.onLaneDrop,
lockAxis: "x",
getChildPayload: (index) => this.getLaneDetails(index),
groupName: this.groupName
}, reducerData.lanes.map((lane, index) => {
const { id: id2, droppable, ...otherProps2 } = lane;
const laneToRender = /* @__PURE__ */ import_react5.default.createElement(Lane_default, {
key: id2,
boardId: this.groupName,
components,
id: id2,
getCardDetails: this.getCardDetails,
index,
droppable: droppable === void 0 ? true : droppable,
style: laneStyle || lane.style || {},
labelStyle: lane.labelStyle || {},
cardStyle: this.props.cardStyle || lane.cardStyle,
editable: editable && !lane.disallowAddingCard,
...otherProps2,
...passthroughProps
});
return draggable && laneDraggable ? /* @__PURE__ */ import_react5.default.createElement(Draggable, {
key: lane.id
}, laneToRender) : laneToRender;
}))), canAddLanes && /* @__PURE__ */ import_react5.default.createElement(Container_default, {
orientation: "horizontal"
}, editable && !addLaneMode ? /* @__PURE__ */ import_react5.default.createElement(components.NewLaneSection, {
t,
onClick: this.showEditableLane
}) : addLaneMode && /* @__PURE__ */ import_react5.default.createElement(components.NewLaneForm, {
onCancel: this.hideEditableLane,
onAdd: this.addNewLane,
t
})));
}
};
BoardContainer.defaultProps = {
t: (v) => v,
onDataChange: () => {
},
handleDragStart: () => {
},
handleDragEnd: () => {
},
handleLaneDragStart: () => {
},
handleLaneDragEnd: () => {
},
onCardUpdate: () => {
},
onLaneAdd: () => {
},
onLaneDelete: () => {
},
onCardMoveAcrossLanes: () => {
},
onLaneUpdate: () => {
},
editable: false,
canAddLanes: false,
hideCardDeleteIcon: false,
draggable: false,
collapsibleLanes: false,
laneDraggable: true,
cardDraggable: true,
cardDragClass: "react_trello_dragClass",
laneDragClass: "react_trello_dragLaneClass",
laneDropClass: ""
};
var mapStateToProps = (state) => {
return state.lanes ? { reducerData: state } : {};
};
var mapDispatchToProps2 = (dispatch) => ({
actions: (0, import_redux2.bindActionCreators)({ ...BoardActions_exports, ...LaneActions_exports }, dispatch)
});
var BoardContainer_default = (0, import_react_redux2.connect)(
mapStateToProps,
mapDispatchToProps2
)(BoardContainer);
// src/helpers/deprecationWarnings.ts
var REPLACE_TABLE = {
addCardLink: "components.Card",
customLaneHeader: "components.LaneHeader",
newLaneTemplate: "components.NewLaneSection",
newCardTemplate: "components.NewCardForm",
children: "components.Card",
customCardLayout: "components.Card",
addLaneTitle: '`t` function with key "Add another lane"'
};
var warn = (prop) => {
const use = REPLACE_TABLE[prop];
console.warn(
`react-trello property '${prop}' is removed. Use '${use}' instead. More - https://github.com/rcdexta/react-trello/blob/master/UPGRADE.md`
);
};
var deprecationWarnings_default = (props) => {
Object.keys(REPLACE_TABLE).forEach((key) => {
if (props.hasOwnProperty(key)) {
warn(key);
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireDefault(require("react"));
var _Draggable = require("./dnd/Draggable");
var _Container = _interopRequireDefault(require("./dnd/Container"));
var _BoardContainer = require("./controllers/BoardContainer");
var _Lane = require("./controllers/Lane");
var _deprecationWarnings = _interopRequireDefault(require("./helpers/deprecationWarnings"));
var DefaultComponents = _interopRequireWildcard(require("./components"));
exports.components = DefaultComponents;
var _locales = _interopRequireDefault(require("./locales"));
var _widgets = require("./widgets");
Object.keys(_widgets).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
if (key in exports && exports[key] === _widgets[key]) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function get() {
return _widgets[key];
}
});
};
// src/components/index.ts
var components_exports = {};
__export(components_exports, {
AddCardLink: () => AddCardLink2,
BoardWrapper: () => BoardWrapper,
Card: () => Card,
GlobalStyle: () => GlobalStyle,
LaneFooter: () => LaneFooter2,
LaneHeader: () => LaneHeader2,
Loader: () => Loader,
NewCardForm: () => NewCardForm,
NewLaneForm: () => NewLaneForm,
NewLaneSection: () => NewLaneSection2,
ScrollableLane: () => ScrollableLane,
Section: () => Section
});
// src/components/Lane/LaneHeader.tsx
var import_react8 = __toESM(require("react"));
// src/widgets/InlineInput.tsx
var import_react6 = __toESM(require("react"));
// src/styles/Base.ts
var import_react_popopo2 = require("react-popopo");
var import_styled_components = __toESM(require("styled-components"));
var GlobalStyle = import_styled_components.createGlobalStyle`
.comPlainTextContentEditable {
-webkit-user-modify: read-write-plaintext-only;
cursor: text;
}
.comPlainTextContentEditable--has-placeholder::before {
content: attr(placeholder);
opacity: 0.5;
color: inherit;
cursor: text;
}
.react_trello_dragClass {
transform: rotate(3deg);
}
.react_trello_dragLaneClass {
transform: rotate(3deg);
}
.icon-overflow-menu-horizontal:before {
content: "\\E91F";
}
.icon-lg, .icon-sm {
color: #798d99;
}
.icon-lg {
height: 32px;
font-size: 16px;
line-height: 32px;
width: 32px;
}
`;
var CustomPopoverContainer = (0, import_styled_components.default)(import_react_popopo2.PopoverContainer)`
position: absolute;
right: 10px;
flex-flow: column nowrap;
`;
var CustomPopoverContent = (0, import_styled_components.default)(import_react_popopo2.PopoverContent)`
visibility: hidden;
margin-top: -5px;
opacity: 0;
position: absolute;
z-index: 10;
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
transition: all 0.3s ease 0ms;
border-radius: 3px;
min-width: 7em;
flex-flow: column nowrap;
background-color: #fff;
color: #000;
padding: 5px;
left: 50%;
transform: translateX(-50%);
${(props) => props.active && `
visibility: visible;
opacity: 1;
transition-delay: 100ms;
`} &::before {
visibility: hidden;
}
a {
color: rgba(255, 255, 255, 0.56);
padding: 0.5em 1em;
margin: 0;
text-decoration: none;
&:hover {
background-color: #00bcd4 !important;
color: #37474f;
}
}
`;
var BoardWrapper = import_styled_components.default.div`
background-color: #3179ba;
overflow-y: hidden;
padding: 5px;
color: #393939;
display: flex;
flex-direction: row;
align-items: flex-start;
height: 100vh;
`;
var Header = import_styled_components.default.header`
margin-bottom: 10px;
display: flex;
flex-direction: row;
align-items: flex-start;
`;
var Section = import_styled_components.default.section`
background-color: #e3e3e3;
border-radius: 3px;
margin: 5px 5px;
position: relative;
padding: 10px;
display: inline-flex;
height: auto;
max-height: 90%;
flex-direction: column;
`;
var LaneHeader = (0, import_styled_components.default)(Header)`
margin-bottom: 0px;
${(props) => props.editLaneTitle && import_styled_components.css`
padding: 0px;
line-height: 30px;
`} ${(props) => !props.editLaneTitle && import_styled_components.css`
padding: 0px 5px;
`};
`;
var LaneFooter = import_styled_components.default.div`
display: flex;
justify-content: center;
align-items: center;
width: 100%;
position: relative;
height: 10px;
`;
var ScrollableLane = import_styled_components.default.div`
flex: 1;
overflow-y: auto;
min-width: 250px;
overflow-x: hidden;
align-self: center;
max-height: 90vh;
margin-top: 10px;
flex-direction: column;
justify-content: space-between;
`;
var Title = import_styled_components.default.span`
font-weight: bold;
font-size: 15px;
line-height: 18px;
cursor: ${(props) => props.draggable ? "grab" : `auto`};
width: 70%;
`;
var RightContent = import_styled_components.default.span`
width: 38%;
text-align: right;
padding-right: 10px;
font-size: 13px;
`;
var CardWrapper = import_styled_components.default.article`
border-radius: 3px;
border-bottom: 1px solid #ccc;
background-color: #fff;
position: relative;
padding: 10px;
cursor: pointer;
max-width: 250px;
margin-bottom: 7px;
min-width: 230px;
`;
var MovableCardWrapper = (0, import_styled_components.default)(CardWrapper)`
&:hover {
background-color: #f0f0f0;
color: #000;
}
`;
var CardHeader = (0, import_styled_components.default)(Header)`
border-bottom: 1px solid #eee;
padding-bottom: 6px;
color: #000;
`;
var CardTitle = (0, import_styled_components.default)(Title)`
font-size: 14px;
`;
var CardRightContent = (0, import_styled_components.default)(RightContent)`
font-size: 10px;
`;
var Detail = import_styled_components.default.div`
font-size: 12px;
color: #4d4d4d;
white-space: pre-wrap;
`;
var Footer = import_styled_components.default.div`
border-top: 1px solid #eee;
padding-top: 6px;
text-align: right;
display: flex;
justify-content: flex-end;
flex-direction: row;
flex-wrap: wrap;
`;
var TagSpan = import_styled_components.default.span`
padding: 2px 3px;
border-radius: 3px;
margin: 2px 5px;
font-size: 70%;
`;
var AddCardLink = import_styled_components.default.a`
border-radius: 0 0 3px 3px;
color: #838c91;
display: block;
padding: 5px 2px;
margin-top: 10px;
position: relative;
text-decoration: none;
cursor: pointer;
&:hover {
//background-color: #cdd2d4;
color: #4d4d4d;
text-decoration: underline;
}
`;
var LaneTitle = import_styled_components.default.div`
font-size: 15px;
width: 268px;
height: auto;
`;
var LaneSection = import_styled_components.default.section`
background-color: #2b6aa3;
border-radius: 3px;
margin: 5px;
position: relative;
padding: 5px;
display: inline-flex;
height: auto;
flex-direction: column;
`;
var NewLaneSection = (0, import_styled_components.default)(LaneSection)`
width: 200px;
`;
var NewLaneButtons = import_styled_components.default.div`
margin-top: 10px;
`;
var CardForm = import_styled_components.default.div`
background-color: #e3e3e3;
`;
var InlineInput = import_styled_components.default.textarea`
overflow-x: hidden; /* for Firefox (issue #5) */
word-wrap: break-word;
min-height: 18px;
max-height: 112px; /* optional, but recommended */
resize: none;
width: 100%;
height: 18px;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
text-align: inherit;
background-color: transparent;
box-shadow: none;
box-sizing: border-box;
border-radius: 3px;
border: 0;
padding: 0 8px;
outline: 0;
${(props) => props.border && import_styled_components.css`
&:focus {
box-shadow: inset 0 0 0 2px #0079bf;
}
`} &:focus {
background-color: white;
}
${(props) => props.resize && import_styled_components.css`
resize: ${props.resize};
`};
`;
// src/widgets/InlineInput.tsx
var import_autosize = __toESM(require("autosize"));
var InlineInput2 = ({
autoFocus = false,
border = false,
onSave,
onCancel,
placeholder = "",
resize = "none",
value = ""
}) => {
const inputRef = (0, import_react6.useRef)();
const [inputValue, setInputValue] = (0, import_react6.useState)(value);
const onFocus = (e) => {
e.target.select();
};
const onMouseDown = (e) => {
if (document.activeElement != e.target) {
e.preventDefault();
inputRef.current.focus();
}
};
const onBlur = () => {
if (inputValue != value) {
onSave(inputValue);
}
};
const onKeyDown = (e) => {
if (e.key === "Enter") {
inputRef.current.blur();
e.preventDefault();
}
if (e.key === "Escape") {
setInputValue(value);
inputRef.current.blur();
e.preventDefault();
}
if (e.key === "Tab") {
if (inputValue.length == 0) {
onCancel();
}
inputRef.current.blur();
e.preventDefault();
}
};
const setRef = (ref) => {
inputRef.current = ref;
if (resize != "none") {
(0, import_autosize.default)(inputRef);
}
};
(0, import_react6.useEffect)(
() => {
setInputValue(value);
},
[resize]
);
return /* @__PURE__ */ import_react6.default.createElement(InlineInput, {
ref: setRef,
border,
onMouseDown,
onFocus,
onBlur,
onKeyDown,
placeholder: value.length == 0 ? void 0 : placeholder,
defaultValue: value,
autoComplete: "off",
autoCorrect: "off",
autoCapitalize: "off",
spellCheck: "false",
rows: 1,
autoFocus
});
};
// src/components/Lane/LaneHeader/LaneMenu.tsx
var import_react7 = __toESM(require("react"));
var import_react_popopo3 = require("react-popopo");
// src/styles/Elements.ts
var import_styled_components2 = __toESM(require("styled-components"));
var DeleteWrapper = import_styled_components2.default.div`
text-align: center;
position: absolute;
top: -1px;
right: 2px;
cursor: pointer;
`;
var GenDelButton = import_styled_components2.default.button`
transition: all 0.5s ease;
display: inline-block;
border: none;
font-size: 15px;
height: 15px;
padding: 0;
margin-top: 5px;
text-align: center;
width: 15px;
background: inherit;
cursor: pointer;
`;
var DelButton = import_styled_components2.default.button`
transition: all 0.5s ease;
display: inline-block;
border: none;
font-size: 8px;
height: 15px;
line-height: 1px;
margin: 0 0 8px;
padding: 0;
text-align: center;
width: 15px;
background: inherit;
cursor: pointer;
opacity: 0;
${MovableCardWrapper}:hover & {
opacity: 1;
}
`;
var MenuButton = import_styled_components2.default.button`
transition: all 0.5s ease;
display: inline-block;
border: none;
outline: none;
font-size: 16px;
font-weight: bold;
height: 15px;
line-height: 1px;
margin: 0 0 8px;
padding: 0;
text-align: center;
width: 15px;
background: inherit;
cursor: pointer;
`;
var LaneMenuHeader = import_styled_components2.default.div`
position: relative;
margin-bottom: 4px;
text-align: center;
`;
var LaneMenuContent = import_styled_components2.default.div`
overflow-x: hidden;
overflow-y: auto;
padding: 0 12px 12px;
`;
var LaneMenuItem = import_styled_components2.default.div`
cursor: pointer;
display: block;
font-weight: 700;
padding: 6px 12px;
position: relative;
margin: 0 -12px;
text-decoration: none;
&:hover {
background-color: #3179BA;
color: #fff;
}
`;
var LaneMenuTitle = import_styled_components2.default.span`
box-sizing: border-box;
color: #6b808c;
display: block;
line-height: 30px;
border-bottom: 1px solid rgba(9,45,66,.13);
margin: 0 6px;
overflow: hidden;
padding: 0 32px;
position: relative;
text-overflow: ellipsis;
white-space: nowrap;
z-index: 1;
`;
var DeleteIcon = import_styled_components2.default.span`
position: relative;
display: inline-block;
width: 4px;
height: 4px;
opacity: 1;
overflow: hidden;
border: 1px solid #83bd42;
border-radius: 50%;
padding: 4px;
background-color: #83bd42;
${CardWrapper}:hover & {
opacity: 1;
}
&:hover::before,
&:hover::after {
background: red;
}
&:before,
&:after {
content: '';
position: absolute;
height: 2px;
width: 60%;
top: 45%;
left: 20%;
background: #fff;
border-radius: 5px;
}
&:before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
&:after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
`;
var ExpandCollapseBase = import_styled_components2.default.span`
width: 36px;
margin: 0 auto;
font-size: 14px;
position: relative;
cursor: pointer;
`;
var CollapseBtn = (0, import_styled_components2.default)(ExpandCollapseBase)`
&:before {
content: '';
position: absolute;
top: 0;
left: 0;
border-bottom: 7px solid #444;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-radius: 6px;
}
&:after {
content: '';
position: absolute;
left: 4px;
top: 4px;
border-bottom: 3px solid #e3e3e3;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
}
`;
var ExpandBtn = (0, import_styled_components2.default)(ExpandCollapseBase)`
&:before {
content: '';
position: absolute;
top: 0;
left: 0;
border-top: 7px solid #444;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-radius: 6px;
}
&:after {
content: '';
position: absolute;
left: 4px;
top: 0px;
border-top: 3px solid #e3e3e3;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
}
`;
var AddButton = import_styled_components2.default.button`
background: #5aac44;
color: #fff;
transition: background 0.3s ease;
min-height: 32px;
padding: 4px 16px;
vertical-align: top;
margin-top: 0;
margin-right: 8px;
font-weight: bold;
border-radius: 3px;
font-size: 14px;
cursor: pointer;
margin-bottom: 0;
`;
var CancelButton = import_styled_components2.default.button`
background: #999999;
color: #fff;
transition: background 0.3s ease;
min-height: 32px;
padding: 4px 16px;
vertical-align: top;
margin-top: 0;
font-weight: bold;
border-radius: 3px;
font-size: 14px;
cursor: pointer;
margin-bottom: 0;
`;
var AddLaneLink = import_styled_components2.default.button`
background: #2b6aa3;
border: none;
color: #fff;
transition: background 0.3s ease;
min-height: 32px;
padding: 4px 16px;
vertical-align: top;
margin-top: 0;
margin-right: 0px;
border-radius: 4px;
font-size: 13px;
cursor: pointer;
margin-bottom: 0;
`;
// src/components/Lane/LaneHeader/LaneMenu.tsx
var LaneMenu = ({ t, onDelete }) => /* @__PURE__ */ import_react7.default.createElement(import_react_popopo3.Popover, {
position: "bottom",
PopoverContainer: CustomPopoverContainer,
PopoverContent: CustomPopoverContent,
trigger: /* @__PURE__ */ import_react7.default.createElement(MenuButton, null, "\u22EE")
}, /* @__PURE__ */ import_react7.default.createElement(LaneMenuHeader, null, /* @__PURE__ */ import_react7.default.createElement(LaneMenuTitle, null, t("Lane actions")), /* @__PURE__ */ import_react7.default.createElement(DeleteWrapper, null, /* @__PURE__ */ import_react7.default.createElement(GenDelButton, null, "\u2716"))), /* @__PURE__ */ import_react7.default.createElement(LaneMenuContent, null, /* @__PURE__ */ import_react7.default.createElement(LaneMenuItem, {
onClick: onDelete
}, t("Delete lane"))));
// src/components/Lane/LaneHeader.tsx
var LaneHeader2 = ({
updateTitle = () => {
},
canAddLanes = false,
onDelete,
onDoubleClick,
editLaneTitle,
label,
title,
titleStyle,
labelStyle,
t,
laneDraggable
}) => {
return /* @__PURE__ */ import_react8.default.createElement(LaneHeader, {
onDoubleClick,
editLaneTitle
}, /* @__PURE__ */ import_react8.default.createElement(Title, {
draggable: laneDraggable,
style: titleStyle
}, editLaneTitle ? /* @__PURE__ */ import_react8.default.createElement(InlineInput2, {
value: title,
border: true,
placeholder: t("placeholder.title"),
resize: "vertical",
onSave: updateTitle
}) : title), label && /* @__PURE__ */ import_react8.default.createElement(RightContent, null, /* @__PURE__ */ import_react8.default.createElement("span", {
style: labelStyle
}, label)), canAddLanes && /* @__PURE__ */ import_react8.default.createElement(LaneMenu, {
t,
onDelete
}));
};
// src/components/Lane/LaneFooter.tsx
var import_react9 = __toESM(require("react"));
var LaneFooter2 = ({ onClick, collapsed }) => /* @__PURE__ */ import_react9.default.createElement(LaneFooter, {
onClick
}, collapsed ? /* @__PURE__ */ import_react9.default.createElement(ExpandBtn, null) : /* @__PURE__ */ import_react9.default.createElement(CollapseBtn, null));
// src/components/Card.tsx
var import_react12 = __toESM(require("react"));
// src/components/Card/Tag.tsx
var import_react10 = __toESM(require("react"));
var Tag = ({ title, color, bgcolor, tagStyle, ...otherProps }) => {
const style = { color: color || "white", backgroundColor: bgcolor || "orange", ...tagStyle };
return /* @__PURE__ */ import_react10.default.createElement(TagSpan, {
style,
...otherProps
}, title);
};
// src/widgets/DeleteButton.tsx
var import_react11 = __toESM(require("react"));
var DeleteButton = ({ ...rest }) => {
return /* @__PURE__ */ import_react11.default.createElement(DeleteWrapper, {
...rest
}, /* @__PURE__ */ import_react11.default.createElement(DelButton, null, "\u2716"));
};
// src/components/Card.tsx
var Card = ({
onDelete,
onChange,
id,
onClick,
style,
className,
description,
label,
t,
tags,
title,
cardDraggable,
editable,
showDeleteButton,
tagStyle
}) => {
const _onDelete = (e) => {
onDelete();
e.stopPropagation();
};
const updateCard2 = (card) => {
onChange({ ...card, id });
};
return /* @__PURE__ */ import_react12.default.createElement(MovableCardWrapper, {
"data-id": id,
onClick,
style,
className
}, /* @__PURE__ */ import_react12.default.createElement(CardHeader, null, /* @__PURE__ */ import_react12.default.createElement(CardTitle, {
draggable: cardDraggable
}, editable ? /* @__PURE__ */ import_react12.default.createElement(InlineInput2, {
value: title,
border: true,
placeholder: t("placeholder.title"),
resize: "vertical",
onSave: (value) => updateCard2({ title: value })
}) : title), /* @__PURE__ */ import_react12.default.createElement(CardRightContent, null, editable ? /* @__PURE__ */ import_react12.default.createElement(InlineInput2, {
value: label,
border: true,
placeholder: t("placeholder.label"),
resize: "vertical",
onSave: (value) => updateCard2({ label: value })
}) : label), showDeleteButton && /* @__PURE__ */ import_react12.default.createElement(DeleteButton, {
onClick: _onDelete
})), /* @__PURE__ */ import_react12.default.createElement(Detail, null, editable ? /* @__PURE__ */ import_react12.default.createElement(InlineInput2, {
value: description,
border: true,
placeholder: t("placeholder.description"),
resize: "vertical",
onSave: (value) => updateCard2({ description: value })
}) : description), tags && tags.length > 0 && /* @__PURE__ */ import_react12.default.createElement(Footer, null, tags.map((tag) => /* @__PURE__ */ import_react12.default.createElement(Tag, {
key: tag.title,
...tag,
tagStyle
}))));
};
// src/components/Loader.tsx
var import_react13 = __toESM(require("react"));
// src/styles/Loader.ts
var import_styled_components3 = __toESM(require("styled-components"));
var keyframeAnimation = import_styled_components3.keyframes`
0% {
transform: scale(1);
}
20% {
transform: scale(1, 2.2);
}
40% {
transform: scale(1);
}
`;
var LoaderDiv = import_styled_components3.default.div`
text-align: center;
margin: 15px 0;
`;
var LoadingBar = import_styled_components3.default.div`
display: inline-block;
margin: 0 2px;
width: 4px;
height: 18px;
border-radius: 4px;
animation: ${keyframeAnimation} 1s ease-in-out infinite;
background-color: #777;
&:nth-child(1) {
animation-delay: 0.0001s;
}
&:nth-child(2) {
animation-delay: 0.09s;
}
&:nth-child(3) {
animation-delay: 0.18s;
}
&:nth-child(4) {
animation-delay: 0.27s;
}
`;
// src/components/Loader.tsx
var Loader = () => /* @__PURE__ */ import_react13.default.createElement(LoaderDiv, null, /* @__PURE__ */ import_react13.default.createElement(LoadingBar, null), /* @__PURE__ */ import_react13.default.createElement(LoadingBar, null), /* @__PURE__ */ import_react13.default.createElement(LoadingBar, null), /* @__PURE__ */ import_react13.default.createElement(LoadingBar, null));
// src/components/NewLaneForm.tsx
var import_react15 = __toESM(require("react"));
// src/widgets/NewLaneTitleEditor.tsx
var import_react14 = __toESM(require("react"));
var import_autosize2 = __toESM(require("autosize"));
var NewLaneTitleEditor = ({
autoFocus = false,
border = false,
onCancel = () => {
},
onSave = () => {
},
placeholder = "",
resize = "none",
value = "",
inputRef
}) => {
const [inputValue, setInputValue] = (0, import_react14.useState)(value);
const onKeyDown = (e) => {
if (e.key === "Enter") {
inputRef.current.blur();
saveValue();
e.preventDefault();
}
if (e.key === "Escape") {
setInputValue(value);
inputRef.current.blur();
cancel();
e.preventDefault();
}
if (e.key === "Tab") {
if (inputValue.length == 0) {
onCancel();
}
inputRef.current.blur();
e.preventDefault();
}
};
const setRef = (ref) => {
inputRef.current = ref;
if (resize != "none") {
(0, import_autosize2.default)(inputRef);
}
};
const cancel = () => {
setInputValue("");
onCancel();
inputRef.current.blur();
};
const saveValue = () => {
if (inputValue !== value) {
onSave(inputValue);
}
};
return /* @__PURE__ */ import_react14.default.createElement(InlineInput, {
style: { resize },
ref: setRef,
border,
onKeyDown,
placeholder: inputValue.length === 0 ? void 0 : placeholder,
defaultValue: value,
rows: 3,
autoFocus
});
};
// src/components/NewLaneForm.tsx
var import_v12 = __toESM(require("uuid/v1"));
var NewLaneForm = ({ onAdd, onCancel, t }) => {
const titleRef = (0, import_react15.useRef)();
const handleSubmit = () => {
onAdd({
id: (0, import_v12.default)(),
title: titleRef.current.value
});
};
return /* @__PURE__ */ import_react15.default.createElement(Section, null, /* @__PURE__ */ import_react15.default.createElement(LaneTitle, null, /* @__PURE__ */ import_react15.default.createElement(NewLaneTitleEditor, {
inputRef: titleRef,
placeholder: t("placeholder.title"),
onCancel,
onSave: handleSubmit,
resize: "vertical",
border: true,
autoFocus: true
})), /* @__PURE__ */ import_react15.default.createElement(NewLaneButtons, null, /* @__PURE__ */ import_react15.default.createElement(AddButton, {
onClick: handleSubmit
}, t("button.Add lane")), /* @__PURE__ */ import_react15.default.createElement(CancelButton, {
onClick: onCancel
}, t("button.Cancel"))));
};
// src/components/NewCardForm.tsx
var import_react17 = __toESM(require("react"));
// src/widgets/EditableLabel.tsx
var import_react16 = __toESM(require("react"));
var EditableLabel = ({
autoFocus = false,
inline = false,
onChange = () => {
},
placeholder = "",
value = "",
children
}) => {
const [labelText, setLabelText] = (0, import_react16.useState)("");
const divRef = (0, import_react16.createRef)();
(0, import_react16.useEffect)(() => {
if (autoFocus) {
divRef.current.focus();
}
});
const getClassName = () => {
const placeholder2 = labelText === "" ? "comPlainTextContentEditable--has-placeholder" : "";
return `comPlainTextContentEditable ${placeholder2}`;
};
const onPaste = (event) => {
event.preventDefault();
navigator.clipboard.writeText(event.clipboardData.getData("text"));
};
const onBlur = () => {
onChange(labelText);
};
const onKeyDown = (event) => {
if (event.key === "Enter") {
event.preventDefault();
onChange(labelText);
divRef.current.blur();
}
if (event.key === "Escape") {
divRef.current.textContent = labelText;
event.preventDefault();
event.stopPropagation();
}
};
const onTextChange = (event) => {
const value2 = event.currentTarget.innerText;
setLabelText(value2);
};
return /* @__PURE__ */ import_react16.default.createElement("div", {
ref: divRef,
contentEditable: "true",
className: getClassName(),
onPaste,
onBlur,
onInput: onTextChange,
onKeyDown,
placeholder
});
};
// src/components/NewCardForm.tsx
var NewCardForm = ({ laneId, onCancel, onAdd, t }) => {
const [formState, setFormState] = (0, import_react17.useState)();
const handleAdd = () => {
onAdd({ ...formState, laneId });
};
const updateField = (field, value) => {
setFormState({ ...formState, [field]: value });
};
return /* @__PURE__ */ import_react17.default.createElement(CardForm, null, /* @__PURE__ */ import_react17.default.createElement(CardWrapper, null, /* @__PURE__ */ import_react17.default.createElement(CardHeader, null, /* @__PURE__ */ import_react17.default.createElement(CardTitle, null, /* @__PURE__ */ import_react17.default.createElement(EditableLabel, {
placeholder: t("placeholder.title"),
onChange: (val) => updateField("title", val),
autoFocus: true
})), /* @__PURE__ */ import_react17.default.createElement(CardRightContent, null, /* @__PURE__ */ import_react17.default.createElement(EditableLabel, {
placeholder: t("placeholder.label"),
onChange: (val) => updateField("label", val)
}))), /* @__PURE__ */ import_react17.default.createElement(Detail, null, /* @__PURE__ */ import_react17.default.createElement(EditableLabel, {
placeholder: t("placeholder.description"),
onChange: (val) => updateField("description", val)
}))), /* @__PURE__ */ import_react17.default.createElement(AddButton, {
onClick: handleAdd
}, t("button.Add card")), /* @__PURE__ */ import_react17.default.createElement(CancelButton, {
onClick: onCancel
}, t("button.Cancel")));
};
// src/components/AddCardLink.tsx
var import_react18 = __toESM(require("react"));
var AddCardLink2 = ({ onClick, t }) => /* @__PURE__ */ import_react18.default.createElement(AddCardLink, {
onClick
}, t("Click to add card"));
// src/components/NewLaneSection.tsx
var import_react19 = __toESM(require("react"));
var NewLaneSection2 = ({
t,
onClick
}) => /* @__PURE__ */ import_react19.default.createElement(NewLaneSection, null, /* @__PURE__ */ import_react19.default.createElement(AddLaneLink, {
onClick
}, t("Add another lane")));
// src/locales/index.ts
var locales_default = {
en: {
translation: require_translation()
},
ru: {
translation: require_translation2()
}
};
// src/helpers/createTranslate.js
var import_get = __toESM(require("lodash/get"));
var createTranslate_default = (TABLE) => (key) => (0, import_get.default)(TABLE, key);
// src/controllers/Board.tsx
var import_react20 = __toESM(require("react"));
var import_react_redux3 = require("react-redux");
var import_classnames2 = __toESM(require("classnames"));
var import_redux3 = require("redux");
var import_v13 = __toESM(require("uuid/v1"));
// src/helpers/LaneHelper.ts
var import_immutability_helper = __toESM(require("immutability-helper"));
var LaneHelper = {
initialiseLanes: (state, { lanes }) => {
const newLanes = lanes.map((lane) => {
lane.currentPage = 1;
lane.cards && lane.cards.forEach((c) => c.laneId = lane.id);
return lane;
});
return (0, import_immutability_helper.default)(state, { lanes: { $set: newLanes } });
},
paginateLane: (state, { laneId, newCards, nextPage }) => {
const updatedLanes = LaneHelper.appendCardsToLane(state, { laneId, newCards, index: void 0 });
updatedLanes.find((lane) => lane.id === laneId).currentPage = nextPage;
return (0, import_immutability_helper.default)(state, { lanes: { $set: updatedLanes } });
},
appendCardsToLane: (state, { laneId, newCards, index }) => {
const lane = state.lanes.find((lane2) => lane2.id === laneId);
newCards = newCards.map((c) => (0, import_immutability_helper.default)(c, { laneId: { $set: laneId } })).filter((c) => lane.cards.find((card) => card.id === c.id) == null);
return state.lanes.map((lane2) => {
if (lane2.id === laneId) {
if (index !== void 0) {
return (0, import_immutability_helper.default)(lane2, { cards: { $splice: [[index, 0, ...newCards]] } });
} else {
const cardsToUpdate = [...lane2.cards, ...newCards];
return (0, import_immutability_helper.default)(lane2, { cards: { $set: cardsToUpdate } });
}
} else {
return lane2;
}
});
},
appendCardToLane: (state, { laneId, card, index }) => {
const newLanes = LaneHelper.appendCardsToLane(state, { laneId, newCards: [card], index });
return (0, import_immutability_helper.default)(state, { lanes: { $set: newLanes } });
},
addLane: (state, lane) => {
const newLane = { cards: [], ...lane };
return (0, import_immutability_helper.default)(state, { lanes: { $push: [newLane] } });
},
updateLane: (state, updatedLane) => {
const newLanes = state.lanes.map((lane) => {
if (updatedLane.id == lane.id) {
return { ...lane, ...updatedLane };
} else {
return lane;
}
});
return (0, import_immutability_helper.default)(state, { lanes: { $set: newLanes } });
},
removeCardFromLane: (state, { laneId, cardId }) => {
const lanes = state.lanes.map((lane) => {
if (lane.id === laneId) {
let newCards = lane.cards.filter((card) => card.id !== cardId);
return (0, import_immutability_helper.default)(lane, { cards: { $set: newCards } });
} else {
return lane;
}
});
return (0, import_immutability_helper.default)(state, { lanes: { $set: lanes } });
},
moveCardAcrossLanes: (state, { fromLaneId, toLaneId, cardId, index }) => {
let cardToMove = null;
const interimLanes = state.lanes.map((lane) => {
if (lane.id === fromLaneId) {
cardToMove = lane.cards.find((card) => card.id === cardId);
const newCards = lane.cards.filter((card) => card.id !== cardId);
return (0, import_immutability_helper.default)(lane, { cards: { $set: newCards } });
} else {
return lane;
}
});
const updatedState = (0, import_immutability_helper.default)(state, { lanes: { $set: interimLanes } });
return LaneHelper.appendCardToLane(updatedState, { laneId: toLaneId, card: cardToMove, index });
},
updateCardsForLane: (state, { laneId, cards }) => {
const lanes = state.lanes.map((lane) => {
if (lane.id === laneId) {
return (0, import_immutability_helper.default)(lane, { cards: { $set: cards } });
} else {
return lane;
}
});
return (0, import_immutability_helper.default)(state, { lanes: { $set: lanes } });
},
updateCardForLane: (state, { laneId, card: updatedCard }) => {
const lanes = state.lanes.map((lane) => {
if (lane.id === laneId) {
const cards = lane.cards.map((card) => {
if (card.id === updatedCard.id) {
return { ...card, ...updatedCard };
} else {
return card;
}
});
return (0, import_immutability_helper.default)(lane, { cards: { $set: cards } });
} else {
return lane;
}
});
return (0, import_immutability_helper.default)(state, { lanes: { $set: lanes } });
},
updateLanes: (state, lanes) => {
return { ...state, ...{ lanes } };
},
moveLane: (state, { oldIndex, newIndex }) => {
const laneToMove = state.lanes[oldIndex];
const tempState = (0, import_immutability_helper.default)(state, { lanes: { $splice: [[oldIndex, 1]] } });
return (0, import_immutability_helper.default)(tempState, { lanes: { $splice: [[newIndex, 0, laneToMove]] } });
},
removeLane: (state, { laneId }) => {
const updatedLanes = state.lanes.filter((lane) => lane.id !== laneId);
return (0, import_immutability_helper.default)(state, { lanes: { $set: updatedLanes } });
}
};
// src/reducers/BoardReducer.ts
var boardReducer = (state = { lanes: [] }, {
payload,
type
}) => {
switch (type) {
case "LOAD_BOARD":
const initialiseLanesPayload = payload;
return LaneHelper.initialiseLanes(state, initialiseLanesPayload);
case "ADD_CARD":
const appendCardToLanePayload = payload;
return LaneHelper.appendCardToLane(state, appendCardToLanePayload);
case "REMOVE_CARD":
const removeCardFromLanePayload = payload;
return LaneHelper.removeCardFromLane(state, removeCardFromLanePayload);
case "MOVE_CARD":
const moveCardAcrossLanesPayload = payload;
return LaneHelper.moveCardAcrossLanes(state, moveCardAcrossLanesPayload);
case "UPDATE_CARDS":
const updateCardsForLanePayload = payload;
return LaneHelper.updateCardsForLane(state, updateCardsForLanePayload);
case "UPDATE_CARD":
const updateCardForLanePayload = payload;
return LaneHelper.updateCardForLane(state, updateCardForLanePayload);
case "UPDATE_LANES":
const updateLanesPayload = payload;
return LaneHelper.updateLanes(state, updateLanesPayload);
case "UPDATE_LANE":
const updateLanePayload = payload;
return LaneHelper.updateLane(state, updateLanePayload);
case "PAGINATE_LANE":
const paginateLanePayload = payload;
return LaneHelper.paginateLane(state, paginateLanePayload);
case "MOVE_LANE":
const moveLanePayload = payload;
return LaneHelper.moveLane(state, moveLanePayload);
case "REMOVE_LANE":
const removeLanePayload = payload;
return LaneHelper.removeLane(state, removeLanePayload);
case "ADD_LANE":
const addLanePayload = payload;
return LaneHelper.addLane(state, addLanePayload);
default:
return state;
}
};
var BoardReducer_default = boardReducer;
// src/controllers/Board.tsx
var Board = class extends import_react20.Component {
constructor(props) {
super(props);
this.getStore = () => {
return (0, import_redux3.createStore)(BoardReducer_default);
};
this.store = this.getStore();
this.id = this.id || (0, import_v13.default)();
}
render() {
const { id, className, components } = this.props;
const allClassNames = (0, import_classnames2.default)("react-trello-board", className || "");
return /* @__PURE__ */ import_react20.default.createElement(import_react_redux3.Provider, {
store: this.store
}, /* @__PURE__ */ import_react20.default.createElement(import_react20.default.Fragment, null, /* @__PURE__ */ import_react20.default.createElement(components.GlobalStyle, null), /* @__PURE__ */ import_react20.default.createElement(BoardContainer_default, {
id: this.id,
...this.props,
className: allClassNames
})));
}
};
// src/index.tsx
var _createTranslate = _interopRequireDefault(require("./helpers/createTranslate"));
var _Board = require("./controllers/Board");
var _excluded = ["components", "lang"];
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var DEFAULT_LANG = "en";
var src_default = ({
components,
lang = DEFAULT_LANG,
...otherProps
}) => {
deprecationWarnings_default(otherProps);
const translate = createTranslate_default(locales_default[lang || "en"].translation);
return /* @__PURE__ */ import_react21.default.createElement(Board, {
var _default = _ref => {
var {
components,
lang = DEFAULT_LANG
} = _ref,
otherProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
(0, _deprecationWarnings.default)(otherProps);
var translate = (0, _createTranslate.default)(_locales.default[lang || "en"].translation);
return /*#__PURE__*/_react.default.createElement(_Board.Board, (0, _extends2.default)({
t: translate,
components: { ...components_exports, ...components },
...otherProps
});
components: _objectSpread(_objectSpread({}, DefaultComponents), components)
}, otherProps));
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
BoardContainer,
Container,
DeleteButton,
Draggable,
EditableLabel,
InlineInput,
Lane,
components,
createTranslate,
locales
});
exports.default = _default;

116

package.json
{
"name": "react-trello-ts",
"version": "1.0.3",
"version": "2.0.13",
"description": "Pluggable typesafe components to add a trello like kanban board to your application",
"main": "dist/index.js",
"types": "dist/index.d.ts",
"files": [

@@ -11,17 +10,2 @@ "dist",

],
"scripts": {
"prepublish": "pnpm build",
"storybook": "start-storybook -p 9002",
"test": "jest",
"test:watch": "jest --watch",
"test:cover": "istanbul cover -x *.test.js _mocha -- -R spec --require tests/config/setup 'tests/**/*.test.ts'",
"test:report": "cat ./coverage/lcov.info | codecov && rm -rf ./coverage",
"build": "tsup src/index.tsx --format cjs --dts --external react --inject react-shim.js",
"docs": "build-storybook -o docs",
"commit": "git cz",
"deploy-storybook": "pnpm build-storybook && gh-pages -d storybook-build",
"build-storybook": "build-storybook -o storybook-build",
"size": "size-limit",
"clean": "rimraf dist storybook-build"
},
"repository": {

@@ -44,32 +28,30 @@ "type": "git",

"dependencies": {
"@babel/runtime": "^7.21.0",
"@types/classnames": "^2.3.1",
"autosize": "^4.0.2",
"classnames": "^2.2.6",
"immutability-helper": "^2.8.1",
"lodash": "^4.17.11",
"prop-types": "^15.7.2",
"classnames": "^2.3.2",
"immer": "^9.0.15",
"react-popopo": "^2.1.9",
"react-redux": "^7",
"redux": "^4.0.0",
"redux-actions": "^2.6.1",
"redux-logger": "^3.0.6",
"trello-smooth-dnd": "1.0.0",
"uuid": "^3.3.2"
"uuid": "^9",
"zustand": "^4.1.1"
},
"devDependencies": {
"@babel/cli": "7.1.2",
"@babel/cli": "^7.21.0",
"@babel/core": "^7.1.2",
"@babel/plugin-proposal-class-properties": "^7.1.0",
"@babel/plugin-transform-async-to-generator": "7.4.4",
"@babel/plugin-transform-runtime": "7.1.0",
"@babel/plugin-transform-template-literals": "^7.4.4",
"@babel/preset-env": "7.1.0",
"@babel/preset-react": " 7.0.0",
"@babel/plugin-proposal-class-properties": "^7.18.6",
"@babel/plugin-transform-async-to-generator": "7.20.7",
"@babel/plugin-transform-runtime": "^7.21.0",
"@babel/plugin-transform-template-literals": "^7.18.9",
"@babel/preset-env": "7.20.2",
"@babel/preset-react": "^7.18.6",
"@babel/preset-typescript": "^7.18.6",
"@storybook/addon-essentials": "^6.5.10",
"@storybook/addon-info": "5.3.21",
"@storybook/addon-options": "5.3.21",
"@storybook/addon-storyshots": "6.5.10",
"@storybook/builder-webpack5": "^6.5.13",
"@storybook/cli": "6.5.10",
"@storybook/core-events": "^5.1.3",
"@storybook/manager-webpack5": "^6.5.10",
"@storybook/react": "6.5.10",
"@storybook/storybook-deployer": "^2.8.12",
"@testing-library/react": "^12",

@@ -83,26 +65,6 @@ "@types/jest": "^27",

"@types/uuid": "^8.3.4",
"autoprefixer": "^9.6.0",
"babel-core": "^7.0.0-0",
"babel-eslint": "^10.0.1",
"babel-jest": "^27",
"babel-loader": "^8.0.6",
"babel-plugin-module-resolver": "^3.2.0",
"babel-plugin-require-context-hook": "^1.0.0",
"babel-preset-react": "^6.24.1",
"codecov.io": "^0.1.6",
"commitizen": "^3.1.1",
"cz-conventional-changelog": "^2.1.0",
"eslint": "^8",
"eslint-config-prettier": "^3.1.0",
"eslint-config-standard": "^12.0.0",
"eslint-config-standard-react": "^7.0.2",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-node": "^7.0.1",
"eslint-plugin-prettier": "^3.1.0",
"eslint-plugin-promise": "^4.1.1",
"eslint-plugin-react": "^7.11.1",
"eslint-plugin-standard": "^4.0.0",
"eventsource-polyfill": "^0.9.6",
"gh-pages": "^4.0.0",
"husky": "^1.1.2",
"i18next": "^17.0.3",

@@ -113,17 +75,16 @@ "identity-obj-proxy": "^3.0.0",

"jest-styled-components": "^7",
"preact": ">=10.5.13 <11.0.0",
"prettier": "1.14.3",
"pretty-quick": "^1.7.0",
"react": "^16",
"react-dom": "^16",
"react-i18next": "^10.11.0",
"react-test-renderer": "^16",
"rimraf": "^3.0.2",
"react-is": ">= 16.8.0",
"regenerator-runtime": "*",
"require-from-string": "^2.0.2",
"semantic-release": "^17.2.3",
"size-limit": "^1.3.7",
"storybook-addon-data": "^1.2.1",
"styled-components": "^5",
"styled-components": "^5.3.9",
"ts-jest": "^27",
"ts-node": "^10.9.1",
"tsup": "^6.2.3",
"typescript": "^4.8.2"
"typescript": "^4.9.3",
"webpack": "*"
},

@@ -134,19 +95,18 @@ "peerDependencies": {

"react-dom": "*",
"react-redux": ">= 5.0.7",
"redux": ">= 4.0.0",
"redux-actions": ">= 2.6.1",
"redux-logger": ">= 3.0.6",
"styled-components": ">= 4.0.3"
},
"config": {
"commitizen": {
"path": "node_modules/cz-conventional-changelog"
}
"scripts": {
"prepublish": "pnpm build",
"storybook": "start-storybook -p 9002",
"test:unit": "jest",
"test:watch": "jest --watch",
"build": "pnpm build:types && pnpm build:js",
"build:types": "tsc --emitDeclarationOnly --declaration --declarationDir dist --allowJs false --outDir dist",
"build:js": "babel src --out-dir dist --extensions \".ts,.tsx\" --ignore \"**/*.test.tsx\" --copy-files --config-file ./.babelrc",
"docs": "build-storybook -o docs",
"deploy-storybook": "pnpm build-storybook && gh-pages -d storybook-build",
"build-storybook": "build-storybook -o storybook-build",
"lint": "pnpm rome check ."
},
"size-limit": [
{
"path": "dist/**/*.js",
"limit": "800 ms"
}
]
}
"typings": "dist/index.d.ts"
}
README.md
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc