[
{
"path": ".gitignore",
"content": "npm-debug.log\nnode_modules/\n.DS_Store\nyarn.lock"
},
{
"path": "README.md",
"content": "\n \n \n
\n\n# Introduction \n\nreact-native-draganddrop-board is a simple React Native library, enabling to create a scrollable board component with carousel, sortable columns and draggable cards for your iOS and Android apps.\n\n  \n\n# Installation\n\nInstall library via `npm` or `yarn`\n\n`npm install react-native-draganddrop-board` or `yarn add react-native-draganddrop-board`\n\n# In Use\n\nFirst you need to build and fill with data `BoardRepository`:\n\n```js\nimport { BoardRepository } from 'react-native-draganddrop-board'\n\nconst data = [\n {\n id: 1,\n name: 'TO DO',\n rows: [\n {\n id: '1',\n name: 'Analyze your audience',\n description: 'Learn more about the audience to whom you will be speaking'\n },\n {\n id: '2',\n name: 'Select a topic',\n description: 'Select a topic that is of interest to the audience and to you'\n },\n {\n id: '3',\n name: 'Define the objective',\n description: 'Write the objective of the presentation in a single concise statement'\n }\n ]\n },\n {\n id: 2,\n name: 'IN PROGRESS',\n rows: [\n {\n id: '4',\n name: 'Look at drawings',\n description: 'How did they use line and shape? How did they shade?'\n },\n {\n id: '5',\n name: 'Draw from drawings',\n description: 'Learn from the masters by copying them'\n },\n {\n id: '6',\n name: 'Draw from photographs',\n description: 'For most people, it’s easier to reproduce an image that’s already two-dimensional'\n }\n ]\n },\n {\n id: 3,\n name: 'DONE',\n rows: [\n {\n id: '7',\n name: 'Draw from life',\n description: 'Do you enjoy coffee? Draw your coffee cup'\n },\n {\n id: '8',\n name: 'Take a class',\n description: 'Check your local university extension'\n }\n ]\n }\n]\n\nconst boardRepository = new BoardRepository(data);\n```\n\nThen you can render the `Board`:\n\n```jsx\nimport { Board } from 'react-native-draganddrop-board'\n\n {}}\n onDragEnd={() => {}}\n />\n```\n\n# Board component\n\n| Property | Type | Required | Description |\n| :--- | :--- | :---: | :--- |\n| boardRepository | `BoardRepository` | yes | object that holds data |\n| boardBackground | `string` | no | board background color |\n| open | `function` | yes | function invoked when item is pressed, returns item |\n| onDragEnd | `function` | yes | function invoked when drag is finished, returns srcColumn, destColumn, draggedItem object|\n\nAll props from Board, Card, Column and Empty components should be added to ``\n\n# Data update\nData can be changed within our predefined class 'boardRepository'.\n'boardRepository.updateData(data)'\nThat way we won't have to rerender the Board and class objects.\n\n# Card component\n\nIf you want to use default Card you should build your boardRepository with rows that have elements `id`, `name`and `description`:\nPay attention, the `id` is unique. (Rows, column)\n```\n {\n id: '1',\n name: 'Analyze your audience',\n description: 'Learn more about the audience to whom you will be speaking'\n }\n```\n\n| Property | Type | Required | Description |\n| :--- | :--- | :---: | :--- |\n| cardNameTextColor | `string` | no | color of the first line (name) |\n| cardNameFontSize | `number` | no | font size of of the first line (name) |\n| cardNameFontFamily | `string` | no | font family of the first line (name) |\n| cardDescriptionTextColor | `string` | no | color of the second line (description) |\n| cardDescriptionFontSize | `number` | no | font size of the second line (description) |\n| cardDescriptionFontFamily | `string` | no | font family of the second line (description) |\n| cardIconColor | `string` | no | color of the icon (arrow) |\n\n\nIf you need to have another elements in rows, then you can use `cardContent` prop - it's a function that returns item element and can take another Components to fill Card.\n\n```jsx\nimport { Text, View } from 'react-native'\nimport { Board } from 'react-native-draganddrop-board'\n\n {}}\n onDragEnd={() => {}}\n cardContent={(item) => ({item.name})}\n />\n```\n\n| Property | Type | Required | Description |\n| :--- | :--- | :---: | :--- |\n| cardBackground | `string` | no | card background color |\n| cardBorderRadius | `number` | no | card border radius value |\n| isCardWithShadow | `bool` | no | add shadow to card component |\n\n# Column component\n\n| Property | Type | Required | Description |\n| :--- | :--- | :---: | :--- |\n| badgeBackgroundColor | `string` | no | color of the count badge |\n| badgeBorderRadius | `number` | no | count badge border radius |\n| badgeHeight | `number` | no | height of the count badge |\n| badgeWidth | `string` | no | width of the count badge |\n| badgeTextColor | `string` | no | color of the count badge |\n| badgeTextFontSize | `number` | no | font size of the count badge |\n| badgeTextFontFamily | `string` | no | font family of the count badge |\n| columnBackgroundColor | `string` | no | column background color |\n| columnBorderRadius | `number` | no | column border radius |\n| columnHeight | `number` | no | height of the column |\n| columnNameTextColor | `string` | no | color of the column |\n| columnNameFontSize | `number` | no | font size of the column |\n| columnNameFontFamily | `string` | no | font family of the column |\n| isWithCountBadge | `bool` | no | if false then the count badge is not visible |\n\n# Empty column component\n\n\n\n\nYou can use default empty column component:\n\n| Property | Type | Required | Description |\n| :--- | :--- | :---: | :--- |\n| emptyIconColor | `string` | no | color of the icon |\n| emptyTextColor | `string` | no | color of the text |\n| emptyFontSize | `number` | no | font size of the text |\n| emptyFontFamily | `string` | no | font family of the text |\n\nYou can also create your own empty column component: \n\n| Property | Type | Required | Description |\n| :--- | :--- | :---: | :--- |\n| emptyComponent | `function` | no | function that should return custom empty column component |\n\n# Tech stack\n\nReact Native 0.61.4\n\n# License\n\nCopyright (c) 2020, Natalia Muryn\n\nPermission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.\n"
},
{
"path": "jest/config.json",
"content": "{\n \"preset\": \"react-native\",\n \"rootDir\": \"../\",\n \"transform\": {\n \"^.+\\\\.js$\": \"./node_modules/react-native/jest/preprocessor.js\"\n },\n \"moduleNameMapper\": {\n \"styled-components\": \"/node_modules/styled-components/native/dist/styled-components.native.cjs.js\"\n }\n}"
},
{
"path": "package.json",
"content": "{\n \"name\": \"react-native-draganddrop-board\",\n \"version\": \"1.0.5\",\n \"description\": \"Drag and drop elements inside carousel\",\n \"main\": \"src/components/index.js\",\n \"scripts\": {\n \"test\": \"jest --config=\\\"./jest/config.json\\\"\"\n },\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"git+https://github.com/bear-junior/react-native-draganddrop-board.git\"\n },\n \"keywords\": [\n \"draggable\",\n \"board\",\n \"drag\",\n \"and\",\n \"drop\",\n \"react\",\n \"native\",\n \"drag and drop\",\n \"react-native\"\n ],\n \"author\": \"Natalia Muryn\",\n \"license\": \"ISC\",\n \"peerDependencies\": {\n \"react\": \"16.9.0\",\n \"react-native\": \"0.61.5\"\n },\n \"dependencies\": {\n \"lodash\": \"^4.17.15\",\n \"react-timeout\": \"^1.2.0\",\n \"styled-components\": \"^4.4.1\",\n \"styled-system\": \"^5.1.5\"\n },\n \"devDependencies\": {\n \"@babel/core\": \"^7.7.4\",\n \"@babel/runtime\": \"^7.7.4\",\n \"@react-native-community/eslint-config\": \"^0.0.5\",\n \"babel-jest\": \"^24.9.0\",\n \"eslint\": \"^6.7.0\",\n \"jest\": \"^24.9.0\",\n \"metro-react-native-babel-preset\": \"^0.57.0\",\n \"react\": \"16.9.0\",\n \"react-native\": \"0.61.5\",\n \"react-test-renderer\": \"^16.12.0\"\n },\n \"bugs\": {\n \"url\": \"https://github.com/bear-junior/react-native-draganddrop-board/issues\"\n },\n \"homepage\": \"https://github.com/bear-junior/react-native-draganddrop-board#readme\",\n \"readmeFilename\": \"README.md\"\n}\n"
},
{
"path": "src/components/Board/Board.js",
"content": "import React from 'react'\nimport ReactTimeout from 'react-timeout'\nimport {\n Animated,\n PanResponder,\n StatusBar\n} from 'react-native'\nimport {\n func,\n object,\n string\n} from 'prop-types'\nimport {\n colors,\n deviceWidth,\n ios,\n isX\n} from '../../constants'\nimport Column from '../Column/Column'\nimport Card from '../Card/Card'\nimport Carousel from '../Carousel/Carousel'\nimport { BoardWrapper } from './Board.styled'\n\nconst MAX_RANGE = 100\nconst MAX_DEG = 30\nlet CARD_WIDTH = 0.85 * deviceWidth\nconst STATUSBAR_HEIGHT = ios ? (isX() ? 44 : 20) : StatusBar.currentHeight\n\nclass Board extends React.Component {\n constructor(props) {\n super(props)\n\n if (this.props.columnWidth) {\n CARD_WIDTH = this.props.columnWidth;\n }\n this.state = {\n boardPositionY: 0,\n rotate: new Animated.Value(0),\n pan: new Animated.ValueXY(),\n startingX: 0,\n startingY: 0,\n movingMode: false\n }\n\n this.varticalOffset = 0\n\n this.panResponder = PanResponder.create({\n onMoveShouldSetPanResponder: () => this.state.movingMode,\n onPanResponderMove: this.onPanResponderMove,\n onPanResponderRelease: this.onPanResponderRelease,\n onPanResponderTerminate: this.onPanResponderRelease\n })\n }\n\n componentDidMount() {\n this.val = { x: 0, y: 0 }\n // eslint-disable-next-line no-return-assign\n this.state.pan.addListener((value) => this.val = value)\n\n }\n\n componentWillUnmount() {\n this.unsubscribeFromMovingMode()\n }\n\n onPanResponderMove = (event, gesture) => {\n try {\n const {\n draggedItem,\n movingMode,\n pan,\n startingX\n } = this.state\n const { boardRepository } = this.props\n\n if (movingMode) {\n this.x = event.nativeEvent.pageX\n this.y = event.nativeEvent.pageY\n\n Animated.event([\n null, { dx: pan.x, dy: pan.y }\n ], {\n listener: null,\n useNativeDriver: false,\n })(event, gesture)\n\n if (startingX + gesture.dx < -50 && gesture.vx < 0) {\n this.carousel.snapToPrev()\n }\n if (startingX + gesture.dx + CARD_WIDTH - 50 > deviceWidth && gesture.vx > 0) {\n this.carousel.snapToNext()\n }\n\n const columnId = this.carousel.currentIndex\n const columnAtPosition = boardRepository.move(draggedItem, this.x, this.y, columnId)\n if (columnAtPosition) {\n const { scrolling, offset } = boardRepository.scrollingPosition(columnAtPosition, this.x, this.y, columnId)\n if (this.shouldScroll(scrolling, offset, columnAtPosition)) {\n this.scroll(columnAtPosition, draggedItem, offset)\n }\n }\n }\n } catch (error) {\n console.log(\"columnAtPosition\", error)\n }\n\n }\n\n shouldScroll = (scrolling, offset, column) => {\n const placeToScroll = ((offset < 0\n && column.scrollOffset() > 0)\n || (offset > 0 && column.scrollOffset() < column.contentHeight()))\n\n return scrolling && offset !== 0 && placeToScroll\n }\n\n onScrollingStarted = () => {\n this.scrolling = true\n }\n\n onScrollingEnded = () => {\n this.scrolling = false\n }\n\n scroll = (column, draggedItem, anOffset) => {\n const { requestAnimationFrame, boardRepository } = this.props\n\n if (!this.scrolling) {\n this.onScrollingStarted()\n const scrollOffset = column.scrollOffset() + 80 * anOffset\n boardRepository.setScrollOffset(column.id(), scrollOffset)\n\n column.listView().scrollToOffset({ offset: scrollOffset })\n }\n\n boardRepository.move(draggedItem, this.x, this.y)\n const { scrolling, offset } = boardRepository.scrollingPosition(column, this.x, this.y)\n if (this.shouldScroll(scrolling, offset, column)) {\n requestAnimationFrame(() => {\n this.scroll(column, draggedItem, offset)\n })\n }\n }\n\n endMoving = () => {\n try {\n this.setState({ movingMode: false })\n const { draggedItem, pan, srcColumnId } = this.state\n const { boardRepository, onDragEnd } = this.props\n\n boardRepository.show(draggedItem.columnId(), draggedItem)\n boardRepository.notify(draggedItem.columnId(), 'reload')\n\n const destColumnId = draggedItem.columnId()\n pan.setValue({ x: 0, y: 0 })\n this.setState({ startingX: 0, startingY: 0 })\n\n return onDragEnd && onDragEnd(boardRepository.columns()[srcColumnId - 1], boardRepository.columns()[destColumnId - 1], draggedItem)\n\n } catch (error) {\n const { draggedItem, srcColumnId } = this.state\n const { onDragEnd } = this.props\n const destColumnId = draggedItem.columnId()\n this.setState({ movingMode: false, startingX: 0, startingY: 0 })\n console.log(\"endMoving\", error)\n return onDragEnd && onDragEnd(boardRepository.columns()[srcColumnId - 1], boardRepository.columns()[destColumnId - 1], draggedItem)\n\n }\n }\n\n onPanResponderRelease = () => {\n const { movingMode } = this.state\n this.x = null\n this.y = null\n\n if (movingMode) {\n this.rotate(0)\n setTimeout(this.endMoving, 100)\n } else if (this.scrolling) {\n this.unsubscribeFromMovingMode()\n }\n }\n\n rotate = (toValue) => {\n const { rotate } = this.state\n Animated.spring(\n rotate,\n {\n toValue,\n friction: 5,\n useNativeDriver: true\n }\n ).start()\n }\n\n cancelMovingSubscription = () => {\n const { clearTimeout } = this.props\n\n clearTimeout(this.movingSubscription)\n }\n\n unsubscribeFromMovingMode = () => {\n this.cancelMovingSubscription()\n }\n\n onPressIn = (columnId, item, dy) => {\n const { boardPositionY } = this.state\n const {\n boardRepository,\n setTimeout\n } = this.props\n\n if (item.isLocked()) {\n return\n }\n\n if (!item || (item.isLocked() && this.scrolling)) {\n this.unsubscribeFromMovingMode()\n return\n }\n this.movingSubscription = setTimeout(() => {\n if (!item || !item.layout()) {\n return\n }\n const lastColumn = boardRepository.columns().length - 1\n const columnIndex = this.carousel.currentIndex\n\n let x\n\n if (columnIndex === 0) {\n x = 16\n } else if (columnIndex > 0 && columnIndex < lastColumn) {\n x = ((deviceWidth - (0.78 * deviceWidth) + 16) / 2)\n } else if (columnIndex === lastColumn) {\n x = deviceWidth - (0.78 * deviceWidth)\n }\n const { y } = item.layout()\n\n if (columnId - 1 === columnIndex) {\n boardRepository.hide(columnId, item)\n this.setState({\n movingMode: true,\n draggedItem: item,\n srcColumnId: item.columnId(),\n startingX: x,\n startingY: dy - boardPositionY - STATUSBAR_HEIGHT - (ios ? 0 : (dy - y))\n })\n this.rotate(MAX_DEG)\n }\n }, 200)\n }\n\n onPress = (columnId, item) => {\n const { open } = this.props\n const { movingMode } = this.state\n\n if (item.isLocked()) {\n return\n }\n\n return () => {\n this.unsubscribeFromMovingMode()\n\n if (item.isLocked()) {\n return\n }\n\n if (!movingMode) {\n const columnIndex = this.carousel.currentIndex\n\n if (columnId - 1 === columnIndex) {\n open(item.row())\n }\n } else {\n this.endMoving()\n }\n }\n }\n\n onScrollEnd = () => {\n const { boardRepository } = this.props\n boardRepository.updateColumnsLayoutAfterVisibilityChanged()\n }\n\n movingStyle = (zIndex) => {\n const { pan, rotate, startingX, startingY } = this.state\n const interpolatedRotateAnimation = rotate.interpolate({\n inputRange: [-MAX_RANGE, 0, MAX_RANGE],\n outputRange: [`-${MAX_DEG}deg`, '0deg', `${MAX_DEG}deg`]\n })\n\n return {\n position: 'absolute',\n zIndex,\n top: startingY,\n left: startingX,\n width: CARD_WIDTH - 16,\n transform: [\n { translateX: pan.x },\n { translateY: pan.y },\n { rotate: interpolatedRotateAnimation }\n ]\n }\n }\n\n movingTask = () => {\n const { draggedItem, movingMode } = this.state\n const zIndex = movingMode ? 1 : -1\n const data = {\n item: draggedItem,\n hidden: !movingMode,\n style: this.movingStyle(zIndex)\n }\n\n return this.renderWrapperRow(data)\n }\n\n renderWrapperRow = (data) => (\n \n )\n\n setScrollViewRef = (element) => {\n this.scrollViewRef = element\n }\n\n setBoardPositionY = (y) => {\n this.setState({ boardPositionY: y })\n }\n\n render() {\n const { movingMode } = this.state\n const {\n boardBackground,\n boardRepository,\n data\n } = this.props\n\n return (\n \n this.setBoardPositionY(evt.nativeEvent.layout.y)}\n backgroundColor={boardBackground}\n >\n { this.carousel = c }}\n data={boardRepository.columns()}\n onScrollEndDrag={this.onScrollEnd}\n onScroll={this.cancelMovingSubscription}\n scrollEnabled={!movingMode}\n renderItem={item => (\n \n )}\n sliderWidth={deviceWidth}\n itemWidth={CARD_WIDTH}\n oneColumn={boardRepository.columns().length === 1}\n />\n\n {this.movingTask()}\n \n \n )\n }\n}\n\nBoard.defaultProps = {\n boardBackground: colors.deepComaru\n}\n\nBoard.propTypes = {\n boardBackground: string.isRequired,\n clearTimeout: func.isRequired,\n onDragEnd: func.isRequired,\n open: func.isRequired,\n requestAnimationFrame: func.isRequired,\n boardRepository: object.isRequired,\n setTimeout: func.isRequired\n}\n\nexport default ReactTimeout(Board)\n"
},
{
"path": "src/components/Board/Board.styled.js",
"content": "import styled from 'styled-components/native'\n\nconst BoardWrapper = styled.View`\n`\n\nexport { BoardWrapper }\n"
},
{
"path": "src/components/Card/Card.js",
"content": "import React from 'react'\nimport { Animated } from 'react-native'\nimport {\n bool,\n func,\n number,\n object,\n shape,\n string\n} from 'prop-types'\nimport {\n colors,\n fonts,\n deviceWidth\n} from '../../constants'\nimport { Next } from '../Icons'\nimport {\n CardContainer,\n CardWrapper,\n ColumnWrapper,\n IconRowWrapper,\n Paragraph,\n RowWrapper\n} from './Card.styled'\n\nconst Card = ({\n cardBackground,\n cardBorderRadius,\n cardContent,\n cardDescriptionTextColor,\n cardDescriptionFontSize,\n cardDescriptionFontFamily,\n cardIconColor,\n cardNameTextColor,\n cardNameFontSize,\n cardNameFontFamily,\n hidden,\n item,\n isCardWithShadow,\n onPress,\n onPressIn,\n style\n}) => {\n const styles = [style]\n if (hidden) {\n styles.push({ opacity: 0 })\n }\n\n return (\n onPressIn ? onPressIn(evt.nativeEvent.pageY) : {}}\n onPress={onPress}\n collapsable={false}\n >\n \n {cardContent !== undefined ? cardContent(item ? item.row() : {}) :\n\n \n \n \n \n \n {item ? item.row().name : ''}\n \n \n {item ? item.row().description : ''}\n \n \n \n \n \n \n }\n\n \n \n )\n}\n\nCard.defaultProps = {\n cardBackground: colors.white,\n cardBorderRadius: 10,\n cardDescriptionTextColor: colors.bay,\n cardDescriptionFontSize: 14,\n cardDescriptionFontFamily: '',\n cardIconColor: colors.blurple,\n cardNameTextColor: colors.blurple,\n cardNameFontSize: 18,\n cardNameFontFamily: '',\n isCardWithShadow: true\n}\n\nCard.propTypes = {\n cardBackground: string.isRequired,\n cardBorderRadius: number.isRequired,\n cardContent: func,\n cardDescriptionTextColor: string.isRequired,\n cardDescriptionFontSize: number.isRequired,\n cardDescriptionFontFamily: string.isRequired,\n cardIconColor: string.isRequired,\n cardNameTextColor: string.isRequired,\n cardNameFontSize: number.isRequired,\n cardNameFontFamily: string.isRequired,\n hidden: bool,\n item: object,\n isCardWithShadow: bool.isRequired,\n onPress: func,\n onPressIn: func,\n style: shape({ string })\n}\n\nexport default Card\n"
},
{
"path": "src/components/Card/Card.styled.js",
"content": "import styled from 'styled-components/native'\nimport {\n borderRadius,\n color,\n fontFamily,\n fontSize\n} from 'styled-system'\nimport { colors } from '../../constants'\n\nconst CardContainer = styled.View`\n ${borderRadius}\n marginHorizontal: 8;\n paddingHorizontal: 0;\n paddingVertical: 0;\n width: 94.5%;\n shadow-radius: 15px;\n shadow-color: ${colors.black};\n shadow-offset: 0px 3px;\n marginTop: 4;\n marginBottom: 4;\n`\n\nconst CardWrapper = styled.TouchableWithoutFeedback`\n`\n\nconst ColumnWrapper = styled.View`\n`\n\nconst IconRowWrapper = styled.View`\n flexDirection: row;\n alignItems: center;\n`\n\nconst Paragraph = styled.Text`\n ${fontFamily};\n ${fontSize};\n ${color};\n`\n\nconst RowWrapper = styled.View`\n flexDirection: row;\n alignItems: center;\n justifyContent: space-between;\n`\n\nexport {\n CardContainer,\n CardWrapper,\n ColumnWrapper,\n IconRowWrapper,\n Paragraph,\n RowWrapper\n}\n"
},
{
"path": "src/components/Carousel/Carousel.js",
"content": "import React, { Component } from 'react'\nimport { ScrollView } from 'react-native'\nimport {\n array,\n bool,\n func,\n number\n} from 'prop-types'\nimport { deviceWidth, ios } from '../../constants'\nimport { ItemWrapper } from './Carousel.styled'\n\nconst INITIAL_ACTIVE_ITEM = 0\n\nclass Carousel extends Component {\n constructor(props) {\n super(props)\n\n this.activeItem = INITIAL_ACTIVE_ITEM\n this.previousActiveItem = INITIAL_ACTIVE_ITEM\n this.previousFirstItem = INITIAL_ACTIVE_ITEM\n this.previousItemsLength = INITIAL_ACTIVE_ITEM\n this.mounted = false\n this.positions = []\n this.currentContentOffset = 0\n this.scrollOffsetRef = null\n }\n\n componentDidMount() {\n this.mounted = true\n this.activeItem = 0\n\n this.initPositions(this.props)\n }\n\n UNSAFE_componentWillUpdate = (nextProps) => {\n this.initPositions(nextProps)\n }\n\n componentWillUnmount() {\n this.mounted = false\n }\n\n getCustomDataLength = (props = this.props) => {\n const { data } = props\n const dataLength = data && data.length\n\n if (!dataLength) {\n return 0\n }\n\n return dataLength\n }\n\n getCustomIndex = (index, props = this.props) => {\n const itemsLength = this.getCustomDataLength(props)\n\n if (!itemsLength || (!index && index !== 0)) {\n return 0\n }\n\n return index\n }\n\n get currentIndex() {\n return this.activeItem\n }\n\n getDataIndex = (index) => {\n const { data } = this.props\n const dataLength = data && data.length\n\n if (!dataLength) {\n return index\n }\n\n if (index >= dataLength + 1) {\n return dataLength < 1\n ? (index - 1) % dataLength\n : index - dataLength - 1\n } if (index < 1) {\n return index + dataLength - 1\n }\n\n return index - 1\n }\n\n getFirstItem = (index, props = this.props) => {\n const itemsLength = this.getCustomDataLength(props)\n\n if (!itemsLength || index > itemsLength - 1 || index < 0) {\n return 0\n }\n\n return index\n }\n\n getWrappedRef = () => this.carouselRef\n\n getKeyExtractor = (item, index) => `scrollview-item-${index}`\n\n getScrollOffset = event => (event && event.nativeEvent && event.nativeEvent.contentOffset\n && event.nativeEvent.contentOffset.x) || 0\n\n getCenter = (offset) => {\n const {\n itemWidth,\n sliderWidth\n } = this.props\n\n return offset + sliderWidth / 2 - (sliderWidth - itemWidth) / 2\n }\n\n getActiveItem = (offset) => {\n const center = this.getCenter(offset)\n const centerOffset = 20\n\n for (let i = 0; i < this.positions.length; i += 1) {\n const { start, end } = this.positions[i]\n if (center + centerOffset >= start && center - centerOffset <= end) {\n return i\n }\n }\n\n const lastIndex = this.positions.length - 1\n if (this.positions[lastIndex] && center - centerOffset > this.positions[lastIndex].end) {\n return lastIndex\n }\n\n return 0\n }\n\n initPositions = (props = this.props) => {\n const {\n data,\n itemWidth\n } = props\n\n if (!data || !data.length) {\n return\n }\n\n this.positions = []\n\n const firstItemMargin = 0\n data.forEach((itemData, index) => {\n this.positions[index] = {\n start: firstItemMargin + index * itemWidth + (index * 8),\n end: index * itemWidth + itemWidth + (index * 8)\n }\n })\n }\n\n scrollTo = (offset) => {\n const wrappedRef = this.getWrappedRef()\n\n wrappedRef.scrollTo({ x: offset, y: 0, animated: true })\n }\n\n onScroll = (event) => {\n const { onScroll } = this.props\n const scrollOffset = this.getScrollOffset(event)\n const nextActiveItem = this.getActiveItem(scrollOffset)\n\n const itemReached = nextActiveItem === this.itemToSnapTo\n const scrollConditions = scrollOffset >= this.scrollOffsetRef\n && scrollOffset <= this.scrollOffsetRef\n\n this.currentContentOffset = scrollOffset\n\n if (this.activeItem !== nextActiveItem && itemReached) {\n if (scrollConditions) {\n this.activeItem = nextActiveItem\n }\n }\n\n return onScroll && onScroll()\n }\n\n onScrollBeginDrag = (event) => {\n this.scrollStartOffset = this.getScrollOffset(event)\n this.scrollStartActive = this.getActiveItem(this.scrollStartOffset)\n }\n\n onScrollEndDrag = (event) => {\n const { onScrollEndDrag } = this.props\n\n if (this.carouselRef) {\n return this.onScrollEnd && this.onScrollEnd(event)\n }\n\n return onScrollEndDrag()\n }\n\n onScrollEnd = () => {\n this.scrollEndOffset = this.currentContentOffset\n this.scrollEndActive = this.getActiveItem(this.scrollEndOffset)\n\n this.snapScroll(this.scrollEndOffset - this.scrollStartOffset)\n }\n\n onLayout = () => {\n if (this.onLayoutInitDone) {\n this.initPositions()\n this.snapToItem(this.activeItem)\n } else {\n this.onLayoutInitDone = true\n }\n }\n\n snapScroll = (delta) => {\n if (!this.scrollEndActive && this.scrollEndActive !== 0 && ios) {\n this.scrollEndActive = this.scrollStartActive\n }\n\n if (this.scrollStartActive !== this.scrollEndActive) {\n this.snapToItem(this.scrollEndActive)\n } else if (delta > 0) {\n this.snapToItem(this.scrollStartActive + 1)\n } else if (delta < 0) {\n this.snapToItem(this.scrollStartActive - 1)\n } else {\n this.snapToItem(this.scrollEndActive)\n }\n }\n\n snapToItem = (index) => {\n const { itemWidth } = this.props\n this.activeItem = index\n\n if (index !== this.previousActiveItem) {\n this.previousActiveItem = index\n }\n\n this.itemToSnapTo = index\n this.scrollOffsetRef = this.positions[index]\n && this.positions[index].start - ((deviceWidth - itemWidth) / 2) + 8\n\n if (!this.scrollOffsetRef && this.scrollOffsetRef !== 0) {\n return\n }\n\n this.currentContentOffset = this.scrollOffsetRef < 0 ? 0 : this.scrollOffsetRef\n\n this.scrollTo(this.scrollOffsetRef)\n }\n\n snapToNext = () => {\n const { onScrollEndDrag } = this.props\n const itemsLength = this.getCustomDataLength()\n\n const newIndex = this.activeItem + 1\n if (newIndex > itemsLength - 1) {\n return\n }\n\n setTimeout(() => this.snapToItem(newIndex), 500)\n onScrollEndDrag()\n }\n\n snapToPrev = () => {\n const { onScrollEndDrag } = this.props\n const newIndex = this.activeItem - 1\n if (newIndex < 0) {\n return\n }\n setTimeout(() => this.snapToItem(newIndex), 500)\n onScrollEndDrag()\n }\n\n renderItem = ({ item, index }) => {\n const { renderItem } = this.props\n\n const specificProps = {\n key: this.getKeyExtractor(item, index)\n }\n\n return (\n \n { renderItem({ item, index })}\n \n )\n }\n\n getComponentStaticProps = () => {\n const {\n data,\n oneColumn,\n sliderWidth\n } = this.props\n\n const containerStyle = [\n { width: sliderWidth, flexDirection: 'row' }\n ]\n const contentContainerStyle = {\n paddingLeft: oneColumn ? 16 : 8,\n paddingTop: 8,\n paddingBottom: 8\n }\n\n return {\n // eslint-disable-next-line no-return-assign\n ref: c => this.carouselRef = c,\n data,\n style: containerStyle,\n contentContainerStyle,\n horizontal: true,\n scrollEventThrottle: 1,\n onScroll: this.onScroll,\n onScrollBeginDrag: this.onScrollBeginDrag,\n onScrollEndDrag: this.onScrollEndDrag,\n onLayout: this.onLayout\n }\n }\n\n render() {\n const props = {\n decelerationRate: 'fast',\n showsHorizontalScrollIndicator: false,\n overScrollMode: 'never',\n automaticallyAdjustContentInsets: true,\n directionalLockEnabled: true,\n pinchGestureEnabled: false,\n scrollsToTop: false,\n renderToHardwareTextureAndroid: true,\n ...this.props,\n ...this.getComponentStaticProps()\n }\n const {\n data,\n oneColumn,\n scrollEnabled\n } = this.props\n\n return (\n \n {data.map((item, index) => this.renderItem({ item, index }))}\n \n )\n }\n}\n\nCarousel.propTypes = {\n data: array,\n itemWidth: number.isRequired,\n oneColumn: bool,\n onScroll: func,\n onScrollEndDrag: func,\n renderItem: func.isRequired,\n sliderWidth: number.isRequired\n}\n\nCarousel.defaultProps = {\n oneColumn: false,\n onScroll: () => { },\n onScrollEndDrag: () => { }\n}\n\nexport default Carousel\n"
},
{
"path": "src/components/Carousel/Carousel.styled.js",
"content": "import styled from 'styled-components/native'\n\nconst ItemWrapper = styled.View`\n`\n\nexport { ItemWrapper }\n"
},
{
"path": "src/components/Column/Column.js",
"content": "import React from 'react'\nimport { FlatList } from 'react-native'\nimport {\n bool,\n func,\n object,\n number,\n string\n} from 'prop-types'\nimport {\n colors,\n fonts,\n deviceWidth,\n ios\n} from '../../constants'\nimport EmptyColumn from '../EmptyColumn/EmptyColumn'\nimport {\n ColumnWrapper,\n ParagraphWrapper,\n Paragraph,\n RowContainer,\n RowWrapper,\n SumWrapper\n} from './Column.styled'\n\nconst COLUMN_WIDTH = 0.85 * deviceWidth\nconst PADDING = 32\nconst ONE_COLUMN_WIDTH = deviceWidth - PADDING\n\nclass Column extends React.Component {\n constructor(props) {\n super(props)\n }\n\n componentDidMount() {\n const { column, boardRepository } = this.props\n\n boardRepository.addListener(column.id(), 'reload', () => this.forceUpdate())\n }\n\n onPressIn = (item, y) => {\n const { column, onPressIn } = this.props\n onPressIn(column.id(), item, y)\n }\n\n onPress = (item) => {\n const { column, onPress } = this.props\n\n return onPress(column.id(), item)\n }\n\n setItemRef = (item, ref) => {\n const { column, boardRepository } = this.props\n boardRepository.setItemRef(column.id(), item, ref)\n boardRepository.updateColumnsLayoutAfterVisibilityChanged();\n }\n\n updateItemWithLayout = item => () => {\n const { column, boardRepository } = this.props\n boardRepository.updateItemWithLayout(column.id(), item)\n }\n\n setColumnRef = (ref) => {\n const { column, boardRepository } = this.props\n boardRepository.setColumnRef(column.id(), ref)\n }\n\n updateColumnWithLayout = () => {\n const { column, boardRepository } = this.props\n\n boardRepository.updateColumnWithLayout(column.id())\n }\n\n renderWrapperRow = (item) => {\n const { renderWrapperRow } = this.props\n const props = {\n onPressIn: (y) => this.onPressIn(item, y),\n onPress: this.onPress(item),\n hidden: item.isHidden(),\n item\n }\n return (\n this.setItemRef(item, ref)}\n collapsable={false}\n onLayout={this.updateItemWithLayout(item)}\n key={item.id.toString()}\n >\n {renderWrapperRow(props)}\n \n )\n }\n\n handleScroll = (event) => {\n const {\n column,\n onScrollingStarted,\n boardRepository,\n unsubscribeFromMovingMode\n } = this.props\n\n unsubscribeFromMovingMode()\n onScrollingStarted()\n\n const col = boardRepository.column(column.id())\n\n const liveOffset = event.nativeEvent.contentOffset.y\n\n this.scrollingDown = liveOffset > col.scrollOffset()\n }\n\n endScrolling = (event) => {\n const {\n column,\n onScrollingEnded,\n boardRepository\n } = this.props\n\n const currentOffset = event.nativeEvent.contentOffset.y\n const col = boardRepository.column(column.id())\n const scrollingDownEnded = this.scrollingDown && currentOffset >= col.scrollOffset()\n const scrollingUpEnded = !this.scrollingDown && currentOffset <= col.scrollOffset()\n\n if (scrollingDownEnded || scrollingUpEnded) {\n boardRepository.setScrollOffset(col.id(), currentOffset)\n boardRepository.updateColumnsLayoutAfterVisibilityChanged()\n onScrollingEnded()\n }\n }\n\n onScrollEndDrag = (event) => {\n this.endScrolling(event)\n }\n\n onMomentumScrollEnd = (event) => {\n const { onScrollingEnded } = this.props\n\n this.endScrolling(event)\n onScrollingEnded()\n }\n\n onContentSizeChange = (_, contentHeight) => {\n const { column, boardRepository } = this.props\n\n boardRepository.setContentHeight(column.id(), contentHeight)\n }\n\n handleChangeVisibleItems = (visibleItems) => {\n const { column, boardRepository } = this.props\n\n boardRepository.updateItemsVisibility(column.id(), visibleItems)\n }\n\n setListView = (ref) => {\n const { column, boardRepository } = this.props\n\n boardRepository.setListView(column.id(), ref)\n }\n\n render() {\n const {\n badgeBackgroundColor,\n badgeBorderRadius,\n badgeHeight,\n badgeWidth,\n badgeTextColor,\n badgeTextFontFamily,\n badgeTextFontSize,\n column,\n columnBackgroundColor,\n columnBorderRadius,\n columnHeight,\n columnNameFontFamily,\n columnNameFontSize,\n columnNameTextColor,\n emptyComponent,\n isWithCountBadge,\n oneColumn,\n movingMode,\n boardRepository,\n columnWidth\n } = this.props\n\n const colElements = boardRepository.items(column.id()).length - 1\n\n const ColumnComponent = (\n \n \n \n {column.data().name}\n \n {isWithCountBadge && \n \n \n {colElements.toString()}\n \n \n \n }\n \n {boardRepository\n .items(column.id()).length - 1 === 0 ?\n (emptyComponent\n ? emptyComponent()\n : \n )\n : this.renderWrapperRow(item.item)}\n keyExtractor={item => item.row().id.toString()}\n scrollEnabled={!movingMode}\n onContentSizeChange={this.onContentSizeChange}\n showsVerticalScrollIndicator={false}\n enableEmptySections\n />\n }\n \n )\n\n return ColumnComponent\n }\n}\n\nColumn.defaultProps = {\n badgeBackgroundColor: colors.blurple,\n badgeBorderRadius: 15,\n badgeHeight: 30,\n badgeWidth: 30,\n badgeTextColor: colors.white,\n badgeTextFontFamily: '',\n badgeTextFontSize: 14,\n columnBackgroundColor: colors.fallingStar,\n columnBorderRadius: 6,\n columnHeight: 650,\n columnNameTextColor: colors.blurple,\n columnNameFontFamily: '',\n columnNameFontSize: 18,\n isWithCountBadge: true,\n oneColumn: false\n}\n\nColumn.propTypes = {\n badgeBackgroundColor: string.isRequired,\n badgeBorderRadius: number.isRequired,\n badgeHeight: number.isRequired,\n badgeWidth: number.isRequired,\n badgeTextColor: string.isRequired,\n badgeTextFontFamily: string.isRequired,\n badgeTextFontSize: number.isRequired,\n column: object,\n columnBackgroundColor: string.isRequired,\n columnBorderRadius: number.isRequired,\n columnHeight: number.isRequired,\n columnNameFontFamily: string.isRequired,\n columnNameFontSize: number.isRequired,\n columnNameTextColor: string.isRequired,\n emptyComponent: func,\n isWithCountBadge: bool.isRequired,\n movingMode: bool.isRequired,\n oneColumn: bool,\n onPress: func.isRequired,\n onPressIn: func.isRequired,\n onScrollingEnded: func.isRequired,\n onScrollingStarted: func.isRequired,\n renderWrapperRow: func.isRequired,\n boardRepository: object,\n unsubscribeFromMovingMode: func.isRequired\n}\n\nexport default Column\n"
},
{
"path": "src/components/Column/Column.styled.js",
"content": "import styled from 'styled-components/native'\nimport {\n borderRadius,\n color,\n fontFamily,\n fontSize,\n marginRight,\n lineHeight\n} from 'styled-system'\n\nconst ColumnWrapper = styled.View`\n paddingHorizontal: 8;\n ${borderRadius};\n maxWidth: 400;\n ${marginRight};\n ${props => `height: ${props.columnHeight}`}\n`\n\nconst ParagraphWrapper = styled.View`\n alignItems: center;\n justifyContent: center;\n`\n\nconst RowContainer = styled.View`\n flexDirection: row;\n alignItems: center;\n paddingVertical: 18;\n paddingHorizontal: 10;\n justifyContent:center;\n\n`\n\nconst Paragraph = styled.Text`\n ${fontFamily};\n ${fontSize};\n ${color};\n ${lineHeight};\n`\n\nconst RowWrapper = styled.View`\n opacity: 1;\n`\n\nconst SumWrapper = styled.View`\n marginLeft: 8;\n alignItems: center;\n justifyContent: center;\n`\n\nexport {\n ColumnWrapper,\n ParagraphWrapper,\n Paragraph,\n RowContainer,\n RowWrapper,\n SumWrapper\n}\n"
},
{
"path": "src/components/EmptyColumn/EmptyColumn.js",
"content": "import React from 'react'\nimport {\n number,\n string\n} from 'prop-types'\nimport {\n colors,\n fonts\n} from '../../constants'\nimport { Empty } from '../Icons'\nimport {\n EmptyWrapper,\n Paragraph\n} from './EmptyColumn.styled'\n\nconst EmptyColumn = ({\n emptyIconColor,\n emptyText,\n emptyTextColor,\n emptyTextFontFamily,\n emptyTextFontSize,\n marginTop\n}) => (\n \n \n \n {emptyText}\n \n \n)\n\nEmptyColumn.defaultProps = {\n emptyIconColor: colors.blurple,\n emptyText: 'No items',\n emptyTextColor: colors.bay,\n emptyTextFontFamily: '',\n emptyTextFontSize: 16\n}\n\nEmptyColumn.propTypes = {\n emptyIconColor: string.isRequired,\n emptyText: string.isRequired,\n emptyTextColor: string.isRequired,\n emptyTextFontFamily: string.isRequired,\n emptyTextFontSize: number.isRequired,\n marginTop: number.isRequired\n}\n\nexport default EmptyColumn\n"
},
{
"path": "src/components/EmptyColumn/EmptyColumn.styled.js",
"content": "import styled from 'styled-components/native'\nimport {\n color,\n fontFamily,\n fontSize\n} from 'styled-system'\n\nconst EmptyWrapper = styled.View`\n justifyContent: center;\n alignItems: center;\n`\n\nconst Paragraph = styled.Text`\n ${fontFamily};\n ${fontSize};\n ${color};\n`\n\nexport {\n EmptyWrapper,\n Paragraph\n}\n"
},
{
"path": "src/components/EmptyColumn/EmptyColumn.test.js",
"content": "import React from 'react'\nimport renderer from 'react-test-renderer'\nimport EmptyColumn from './EmptyColumn'\n\ndescribe('EmptyColumn component', () => {\n describe('Renders correctly', () => {\n test('it renders Default EmptyColumn', () => {\n const tree = renderer.create(\n \n ).toJSON()\n expect(tree).toMatchSnapshot()\n })\n })\n})\n"
},
{
"path": "src/components/EmptyColumn/__snapshots__/EmptyColumn.test.js.snap",
"content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`EmptyColumn component Renders correctly it renders Default EmptyColumn 1`] = `\n\n \n \n No items\n \n\n`;\n"
},
{
"path": "src/components/Icons/Empty.js",
"content": "import React from 'react'\nimport { Image } from 'react-native'\n\nexport const Empty = (color) => (\n \n)\n"
},
{
"path": "src/components/Icons/Empty.test.js",
"content": "import React from 'react'\nimport renderer from 'react-test-renderer'\nimport { Empty } from './index'\n\ndescribe('Icon component', () => {\n describe('Renders correctly', () => {\n test('it renders Default Empty Icon', () => {\n const tree = renderer.create(\n \n ).toJSON()\n expect(tree).toMatchSnapshot()\n })\n })\n})\n"
},
{
"path": "src/components/Icons/Next.js",
"content": "import React from 'react'\nimport { Image } from 'react-native'\n\nexport const Next = (color) => (\n \n)\n"
},
{
"path": "src/components/Icons/Next.test.js",
"content": "import React from 'react'\nimport renderer from 'react-test-renderer'\nimport { Next } from './index'\n\ndescribe('Icon component', () => {\n describe('Renders correctly', () => {\n test('it renders Default Next Icon', () => {\n const tree = renderer.create(\n \n ).toJSON()\n expect(tree).toMatchSnapshot()\n })\n })\n})\n"
},
{
"path": "src/components/Icons/__snapshots__/Empty.test.js.snap",
"content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Icon component Renders correctly it renders Default Empty Icon 1`] = `\n\n`;\n"
},
{
"path": "src/components/Icons/__snapshots__/Next.test.js.snap",
"content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Icon component Renders correctly it renders Default Next Icon 1`] = `\n\n`;\n"
},
{
"path": "src/components/Icons/index.js",
"content": "import { Empty } from './Empty'\nimport { Next } from './Next'\n\nexport {\n Empty,\n Next\n}\n"
},
{
"path": "src/components/index.js",
"content": "import Board from './Board/Board'\nimport BoardRepository from './lib/BoardRepository'\n\nexport {\n Board,\n BoardRepository\n}\n"
},
{
"path": "src/components/lib/BoardRepository.js",
"content": "import { range } from 'lodash'\nimport Registry from './Registry'\nimport PositionCalculator from './PositionCalculator'\nimport Mover from './Mover'\n\nclass BoardRepository {\n constructor(data) {\n this.registry = new Registry(data)\n this.positionCalculator = new PositionCalculator()\n this.mover = new Mover(this.positionCalculator)\n this.listeners = {}\n }\n updateData(data) {\n this.registry.updateData(data);\n this.updateColumnsLayoutAfterVisibilityChanged();\n }\n columns = () => this.registry.columns();\n\n column = columnId => this.registry.column(columnId);\n\n items = columnId => this.registry.items(columnId);\n\n visibleItems = columnId => this.registry.visibleItems(columnId);\n\n addListener = (columnId, event, callback) => {\n const forColumn = this.listeners[columnId]\n this.listeners[columnId] = Object.assign(forColumn || {}, {\n [event]: callback\n })\n };\n\n notify = (columnId, event) => this.listeners[columnId][event]();\n\n setScrollOffset = (columnId, scrollOffset) => {\n const column = this.registry.column(columnId)\n column.setScrollOffset(scrollOffset)\n };\n\n setContentHeight = (columnId, contentHeight) => {\n const column = this.registry.column(columnId)\n column.setContentHeight(contentHeight)\n };\n\n setItemRef = (columnId, item, ref) => {\n item.setRef(ref)\n };\n\n setListView = (columnId, listView) => {\n const column = this.registry.column(columnId)\n\n return column && column.setListView(listView)\n };\n\n updateItemWithLayout = (columnId, item, previousItem) => {\n item.measureAndSaveLayout(previousItem)\n };\n\n updateLayoutAfterVisibilityChanged = columnId => {\n const items = this.items(columnId)\n const rangeArr = range(items.length)\n\n rangeArr.forEach(i => {\n this.updateItemWithLayout(columnId, items[i], items[i - 1])\n })\n };\n\n updateItemsVisibility = (columnId, visibleItemsInSections) => {\n const visibleItems = visibleItemsInSections.s1\n const items = this.items(columnId)\n\n this.updateLayoutAfterVisibilityChanged(columnId)\n\n return items.forEach(\n item => visibleItems && item.setVisible(visibleItems[item.index()]),\n )\n };\n\n setColumnRef = (columnId, ref) => {\n const column = this.registry.column(columnId)\n\n return column && column.setRef(ref)\n };\n\n updateColumnWithLayout = columnId => {\n const column = this.registry.column(columnId)\n\n return column && column.measureAndSaveLayout()\n };\n\n scrollingPosition = (columnAtPosition, x, y, columnId) => {\n this.positionCalculator.scrollingPosition(columnAtPosition, x, y, columnId);\n }\n\n\n updateColumnsLayoutAfterVisibilityChanged = () => {\n const columns = this.columns()\n\n return columns.forEach(column => {\n const columnId = column.id()\n this.updateColumnWithLayout(columnId)\n this.updateLayoutAfterVisibilityChanged(columnId)\n })\n };\n\n hide = (columnId, item) => {\n item.setHidden(true)\n };\n\n show = (columnId, item) => {\n item.setHidden(false)\n };\n\n showAll = () => {\n const columns = this.columns()\n columns.forEach(column => {\n const items = this.items(column.id())\n\n return items.forEach(item => this.show(column.id(), item))\n })\n };\n\n move = (draggedItem, x, y, columnId) => {\n this.mover.move(this, this.registry, draggedItem, x, y, columnId);\n }\n}\n\nexport default BoardRepository\n"
},
{
"path": "src/components/lib/ColumnItem.js",
"content": "import {\n filter,\n omit,\n sortBy,\n values\n} from 'lodash'\nimport Item from './Item'\n\nclass ColumnItem {\n constructor(attributes) {\n this.attributes = attributes\n }\n\n attributes = () => this.attributes\n\n item = itemId => this.attributes.items[itemId]\n\n data = () => this.attributes.data\n\n items = () => {\n const items = values(this.attributes.items)\n const fake = new Item({\n id: -2,\n index: 100000,\n columnId: this.id(),\n row: { id: -2, name: '' },\n hidden: true,\n locked: false,\n visible: false\n })\n\n return sortBy(items, item => item.index()).concat([fake])\n }\n\n visibleItems = columnId => filter(this.items(columnId), item => item.isVisible())\n\n scrollOffset = () => this.attributes.scrollOffset\n\n contentHeight = () => this.attributes.contentHeight\n\n id = () => this.attributes.id\n\n ref = () => this.attributes.ref\n\n index = () => this.attributes.index\n\n layout = () => this.attributes.layout\n\n listView = () => this.attributes.listView\n\n setListView = listView => (\n this.attributes.listView = listView\n )\n\n setScrollOffset = scrollOffset => (\n this.attributes.scrollOffset = scrollOffset\n )\n\n setContentHeight = contentHeight => (\n this.attributes.contentHeight = contentHeight\n )\n\n setRef = ref => (\n this.attributes.ref = ref\n )\n\n setLayout = layout => (\n this.attributes.layout = layout\n )\n\n measureAndSaveLayout = () => {\n const ref = this.ref()\n\n const measure = ref && ref.measure((ox, oy, width, height, px, py) => {\n const layout = { x: px, y: py, width, height }\n this.setLayout(layout)\n\n })\n\n return measure\n }\n\n setItem = (item) => {\n this.attributes.items[item.id()] = item\n item.setColumnId(this.id())\n }\n\n removeItem = item => (\n this.attributes.items = omit(this.attributes.items, item.id())\n )\n\n updateLastItemVisibility = () => {\n const visibleItems = this.visibleItems()\n const items = this.items()\n\n if (visibleItems.length + 1 < items.length) {\n visibleItems[visibleItems.length - 1].setVisible(false)\n }\n }\n}\n\nexport default ColumnItem\n"
},
{
"path": "src/components/lib/Item.js",
"content": "class Item {\n constructor(attributes) {\n this.attributes = attributes\n }\n\n attributes = () => this.attributes\n\n ref = () => this.attributes.ref\n\n id = () => this.attributes.id\n\n row = () => this.attributes.row\n\n index = () => this.attributes.index\n\n layout = () => this.attributes.layout\n\n columnId = () => this.attributes.columnId\n\n isVisible = () => this.attributes.visible\n\n isHidden = () => this.attributes.hidden\n\n isLocked = () => this.attributes.locked\n\n setHidden = hidden => (\n this.attributes.hidden = hidden\n )\n\n setRef = ref => (\n this.attributes.ref = ref\n )\n\n setLayout = layout => (\n this.attributes.layout = layout\n )\n\n setVisible = visible => (\n this.attributes.visible = visible\n )\n\n setColumnId = columnId => (\n this.attributes.columnId = columnId\n )\n\n setIndex = index => (\n this.attributes.index = index\n )\n\n measureAndSaveLayout = (previousItem) => {\n const ref = this.attributes.ref\n const measure = ref && ref.measure((fx, fy, width, height, px, py) => {\n const layout = { x: px, y: py, width, height }\n this.setLayout(layout)\n if (!this.isVisible() && layout.x && layout.y && layout.width && layout.height) {\n this.setVisible(true)\n } else if (this.isVisible() && !layout.x && !layout.y && !layout.width && !layout.height) {\n this.setVisible(false)\n }\n if (this.isLocked()) {\n this.setVisible(false)\n }\n if (previousItem && previousItem.layout().y > layout.y) {\n this.setVisible(false)\n }\n })\n\n return measure\n }\n}\n\nexport default Item\n"
},
{
"path": "src/components/lib/Mover.js",
"content": "/* eslint-disable no-unused-vars */\nimport { findIndex, range } from 'lodash'\n\nclass Mover {\n constructor(positionCalculator) {\n this.positionCalculator = positionCalculator\n }\n\n move = (boardRepository, registry, draggedItem, x, y, columnId) => {\n try {\n const fromColumnId = draggedItem.columnId()\n const columns = boardRepository.columns()\n const columnAtPosition = this.positionCalculator.columnAtPosition(columns, columnId)\n\n if (!columnAtPosition) {\n return\n }\n\n const toColumnId = columnId + 1\n if (toColumnId !== fromColumnId) {\n this.moveToOtherColumn(boardRepository, registry, fromColumnId, toColumnId, draggedItem)\n }\n\n const items = boardRepository.visibleItems(toColumnId)\n const itemAtPosition = this.positionCalculator\n .itemAtPosition(items, toColumnId, y, draggedItem)\n if (!itemAtPosition) {\n return columnAtPosition\n }\n\n const draggedId = draggedItem.id()\n const itemAtPositionId = itemAtPosition.id()\n\n if (draggedItem.id() === itemAtPosition.id()) {\n return columnAtPosition\n }\n\n this.switchItemsBetween(boardRepository, draggedItem, itemAtPosition, toColumnId)\n\n return columnAtPosition\n \n } catch (error) {\n console.log(\"move \",error)\n }\n }\n\n moveToOtherColumn = (boardRepository, registry, fromColumnId, toColumnId, item) => {\n registry.move(fromColumnId, toColumnId, item)\n\n boardRepository.notify(fromColumnId, 'reload')\n\n item.setVisible(true)\n item.setIndex(-1)\n\n const items = boardRepository.items(toColumnId)\n items.forEach(i => i.setIndex(i.index() + 1))\n\n const visibleItems = boardRepository.visibleItems(toColumnId)\n const rangeVisibleItems = range(0, visibleItems.length - 1)\n\n rangeVisibleItems\n .forEach(i => visibleItems[i].setLayout({ ...visibleItems[i + 1].layout() }))\n\n const lastItem = visibleItems[visibleItems.length - 1]\n const lastLayout = lastItem.layout()\n const newLastY = lastLayout.y + lastLayout.height\n lastItem.setLayout(Object.assign(lastLayout, { y: newLastY }))\n\n const column = registry.column(toColumnId)\n column.updateLastItemVisibility()\n }\n\n switchItemsBetween = (boardRepository, draggedItem, itemAtPosition, toColumnId) => {\n draggedItem.setVisible(true)\n\n let items = boardRepository.visibleItems(toColumnId)\n const draggedItemI = (items).findIndex(item => item.id() === draggedItem.id())\n const itemAtPositionI = (items).findIndex(item => item.id() === itemAtPosition.id())\n let itemsRange\n if (draggedItem.index() < itemAtPosition.index()) {\n itemsRange = range(draggedItemI, itemAtPositionI)\n } else {\n itemsRange = range(itemAtPositionI, draggedItemI)\n }\n\n itemsRange.forEach((i) => {\n const firstItem = items[i]\n const secondItem = items[i + 1]\n this.switchItems(toColumnId, firstItem, secondItem)\n items = boardRepository.visibleItems(toColumnId)\n })\n\n boardRepository.notify(toColumnId, 'reload')\n }\n\n switchItems = (columnId, firstItem, secondItem) => {\n if (!firstItem || !secondItem) {\n return\n }\n\n const firstId = firstItem.id()\n const secondId = secondItem.id()\n const firstIndex = firstItem.index()\n const secondIndex = secondItem.index()\n const firstY = firstItem.layout().y\n const secondHeight = secondItem.layout().height\n const firstRef = firstItem.ref()\n const secondRef = secondItem.ref()\n\n firstItem.setIndex(secondIndex)\n secondItem.setIndex(firstIndex)\n\n firstItem.setLayout(Object.assign(firstItem.layout(), { y: firstY + secondHeight }))\n secondItem.setLayout(Object.assign(secondItem.layout(), { y: firstY }))\n\n firstItem.setRef(secondRef)\n secondItem.setRef(firstRef)\n }\n}\n\nexport default Mover\n"
},
{
"path": "src/components/lib/PositionCalculator.js",
"content": "class PositionCalculator {\n TRESHOLD = 100\n\n columnAtPosition = (columns, columnId) => {\n const column = columns.find((col, index) => (\n index === columnId\n ))\n\n return column\n }\n\n scrollingPosition = (column, x, y) => {\n\n const layout = column.layout()\n if (layout !== undefined) {\n const upperEnd = layout.y\n const upper = y > upperEnd - this.TRESHOLD && y < upperEnd + this.TRESHOLD\n\n const lowerEnd = layout.y + layout.height\n const lower = y > lowerEnd - this.TRESHOLD && y < lowerEnd + this.TRESHOLD\n\n const offset = lower ? 1 : (upper ? -1 : 0)\n\n return {\n offset,\n scrolling: (lower || upper)\n }\n }else {\n console.log(\"scrollingPosition\", layout)\n }\n }\n\n selectItem = (y, draggedItem, item) => {\n const layout = item.layout()\n const heightDiff = Math.abs(draggedItem.layout().height - layout.height)\n\n let up; let\n down\n if (heightDiff > layout.height) {\n up = y > layout.y\n down = y < layout.y + layout.height\n } else if (y < draggedItem.layout().y) {\n down = y < layout.y + layout.height - heightDiff\n up = y > layout.y\n } else {\n down = y < layout.y + layout.height\n up = y > layout.y + heightDiff\n }\n\n return layout && up && down\n }\n\n itemAtPosition = (items, columnId, y, draggedItem) => {\n let item = items.find(i => this.selectItem(y, draggedItem, i))\n\n const firstItem = items[0]\n if (!item && firstItem && firstItem.layout() && y <= firstItem.layout().y) {\n item = firstItem\n }\n\n const lastItem = items[items.length - 1]\n if (!item && lastItem && lastItem.layout() && y >= lastItem.layout().y) {\n item = lastItem\n }\n\n return item\n }\n}\n\nexport default PositionCalculator\n"
},
{
"path": "src/components/lib/Registry.js",
"content": "import {\n range, sortBy, values\n} from 'lodash'\nimport ColumnItem from './ColumnItem'\nimport Item from './Item'\n\nclass Registry {\n constructor(data) {\n this.map = {}\n if (data) {\n this.updateData(data)\n }\n }\n\n existingColumnAttributes = columnId => {\n const column = this.column(columnId)\n\n return column && column.attributes()\n };\n\n buildColumn = (columnIndex, columnData) => {\n const columnId = columnData.id\n const existingAttributes = this.existingColumnAttributes(columnId) || {\n id: columnId,\n index: columnIndex,\n scrollOffset: 0,\n items: {}\n }\n const { rows } = columnData\n const itemsMap = this.buildItemsMap(\n columnId,\n rows,\n existingAttributes.items,\n )\n\n const colItem = new ColumnItem(\n Object.assign(existingAttributes, {\n items: itemsMap,\n data: columnData\n }),\n )\n colItem.measureAndSaveLayout()\n return colItem;\n };\n\n existingItemAttributes = (existingItems, itemId) => {\n const item = existingItems[itemId]\n\n return item && item.attributes()\n };\n\n buildItemsMap = (columnId, rows, existingItems) => {\n const items = range(rows.length).map(index => {\n const row = rows[index]\n const { id } = row\n const existingItemAttributes =\n this.existingItemAttributes(existingItems, id) || {};\n const itemDef = new Item(\n Object.assign(existingItemAttributes, {\n id,\n index,\n columnId,\n row,\n }));\n\n return itemDef;\n })\n\n const itemsMap = {}\n items.forEach((item, index) => {\n item.measureAndSaveLayout({});\n itemsMap[item.id()] = item\n })\n\n return itemsMap\n };\n\n updateData = data => {\n this.map = {};\n const columns = range(data.length).map(columnIndex => {\n const columnData = data[columnIndex]\n\n return this.buildColumn(columnIndex, columnData)\n })\n\n columns.forEach(column => {\n this.map[column.id()] = column\n })\n };\n\n move = (fromColumnId, toColumnId, item) => {\n const fromColumn = this.column(fromColumnId)\n const toColumn = this.column(toColumnId)\n\n toColumn.setItem(item)\n fromColumn.removeItem(item)\n };\n\n columns = () => {\n const columns = values(this.map)\n return sortBy(columns, column => column.index())\n };\n\n column = columnId => this.map[columnId];\n\n items = columnId => {\n const column = this.column(columnId)\n\n return (column && column.items()) || []\n };\n\n visibleItems = columnId => {\n const column = this.column(columnId)\n\n return (column && column.visibleItems()) || []\n };\n\n item = (columnId, itemId) => {\n const column = this.column(columnId)\n\n return column && column.item(itemId)\n };\n}\n\nexport default Registry\n"
},
{
"path": "src/constants/colors.js",
"content": "const colors = {\n bay: '#747d8c',\n black: '#000000',\n blurple: '#4834d4',\n deepComaru: '#30336b',\n exodusFruit: '#686de0',\n fallingStar: '#FAFAFA',\n officer: '#2C3A47',\n wildWatermelon: '#ff6b81',\n white: '#FFFFFF'\n}\n\nexport { colors }\n"
},
{
"path": "src/constants/deviceHelpers.js",
"content": "import {\n Dimensions,\n Platform\n} from 'react-native'\n\nconst deviceHeight = Dimensions.get('window').height\n\nconst deviceWidth = Dimensions.get('window').width\n\nconst ios = Platform.OS === 'ios'\n\nconst isX = () => Platform.OS === 'ios' && !Platform.isPad && !Platform.isTVOS\n && Dimensions.get('window').height > 800\n\nexport {\n deviceHeight,\n deviceWidth,\n ios,\n isX\n}\n"
},
{
"path": "src/constants/index.js",
"content": "export * from './colors'\nexport * from './deviceHelpers'\n"
}
]