Repository: obipawan/react-native-dash
Branch: master
Commit: 302aaaff4917
Files: 7
Total size: 7.8 KB

Directory structure:
gitextract_fvsz58ac/

├── .gitignore
├── Dash.js
├── README.md
├── dist/
│   └── index.js
├── index.d.ts
├── package.json
└── util.js

================================================
FILE CONTENTS
================================================

================================================
FILE: .gitignore
================================================
# OSX
#
.DS_Store

# Xcode
#
build/
*.pbxuser
!default.pbxuser
*.mode1v3
!default.mode1v3
*.mode2v3
!default.mode2v3
*.perspectivev3
!default.perspectivev3
xcuserdata
*.xccheckout
*.moved-aside
DerivedData
*.hmap
*.ipa
*.xcuserstate
project.xcworkspace

# Android/IJ
#
.idea
.gradle
local.properties

# node.js
#
node_modules/
npm-debug.log


================================================
FILE: Dash.js
================================================
/*
* Draws fully customizable dashed lines vertically or horizontally
*
* @providesModule Dash
*/

import React from 'react'
import PropTypes from 'prop-types'
import { View, StyleSheet, ViewPropTypes } from 'react-native'
import MeasureMeHOC from 'react-native-measureme'
import { getDashStyle, isStyleRow } from '../util'

const Dash = props => {
	const isRow = isStyleRow(props.style)
	const length = isRow ? props.width : props.height
	const n = Math.ceil(length / (props.dashGap + props.dashLength))
	const calculatedDashStyles = getDashStyle(props)
	let dash = []
	for (let i = 0; i < n; i++) {
		dash.push(
			<View
				key={ i }
				style={ [
					calculatedDashStyles,
					props.dashStyle,
				] }
			/>
		)
	}
	return (
		<View
			onLayout={ props.onLayout }
			style={ [ props.style, isRow ? styles.row : styles.column ] }
		>
			{ dash }
		</View>
	)
}

const styles = StyleSheet.create({
	row: { flexDirection: 'row' },
	column: { flexDirection: 'column' },
})

Dash.propTypes = {
	style: ViewPropTypes.style,
	dashGap: PropTypes.number.isRequired,
	dashLength: PropTypes.number.isRequired,
	dashThickness: PropTypes.number.isRequired,
	dashColor: PropTypes.string,
	dashStyle: ViewPropTypes.style,
}

Dash.defaultProps = {
	dashGap: 2,
	dashLength: 4,
	dashThickness: 2,
	dashColor: 'black',
}

export default MeasureMeHOC(Dash)


================================================
FILE: README.md
================================================
# react-native-dash
[![NPM version](https://badge.fury.io/js/react-native-dash.svg)](http://badge.fury.io/js/react-native-dash)

A super simple `<Dash />` component for react-native to draw customisable dashed lines

## Installation
```sh
npm i --save react-native-dash
```

## Props
| name | desc | type | default
| --- | --- | --- | --- |
| `style` | Dash container style  | [View.PropTypes.Style](https://facebook.github.io/react-native/docs/view.html#style) | `{flexDirection = 'row'}`
| `dashGap` | Gap between two dashes | number | `2`
| `dashLength` | Length of each dash | number | `4`
| `dashThickness` | Thickness of each dash | number | `2`
| `dashColor` | Color of each dash | string | `black`
| `dashStyle` | Dashes style | [View.PropTypes.Style](https://facebook.github.io/react-native/docs/view.html#style) | {}

 - **ProTip 1**: Use `flexDirection` in style to get horizontal or vertical dashes. By default, it's `row`
 - **ProTip 2**: Use `{borderRadius: 100, overflow: 'hidden'}` in dashStyle to get rounded dotes instead of straight line dashes. 

## Usage
```javascript
import Dash from 'react-native-dash';

//draws a horizontal dashed line with defaults. Also works with flex
render() {
    return <Dash style={{width:100, height:1}}/>
}

//draws a vertical dashed line with defaults.
render() {
    return <Dash style={{width:1, height:100, flexDirection:'column'}}/>
}
```

### Dependenies
 [react-native-measureme](https://github.com/obipawan/react-native-measureme)
### Development

PRs highly appreciated

License
----
MIT License


================================================
FILE: dist/index.js
================================================
'use strict';

Object.defineProperty(exports, "__esModule", {
	value: true
});

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _reactNative = require('react-native');

var _reactNativeMeasureme = require('react-native-measureme');

var _reactNativeMeasureme2 = _interopRequireDefault(_reactNativeMeasureme);

var _util = require('../util');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var Dash = function Dash(props) {
	var isRow = (0, _util.isStyleRow)(props.style);
	var length = isRow ? props.width : props.height;
	var n = Math.ceil(length / (props.dashGap + props.dashLength));
	var calculatedDashStyles = (0, _util.getDashStyle)(props);
	var dash = [];
	for (var i = 0; i < n; i++) {
		dash.push(_react2.default.createElement(_reactNative.View, {
			key: i,
			style: [calculatedDashStyles, props.dashStyle]
		}));
	}
	return _react2.default.createElement(
		_reactNative.View,
		{
			onLayout: props.onLayout,
			style: [props.style, isRow ? styles.row : styles.column]
		},
		dash
	);
}; /*
   * Draws fully customizable dashed lines vertically or horizontally
   *
   * @providesModule Dash
   */

var styles = _reactNative.StyleSheet.create({
	row: { flexDirection: 'row' },
	column: { flexDirection: 'column' }
});

Dash.propTypes = {
	style: _reactNative.ViewPropTypes.style,
	dashGap: _propTypes2.default.number.isRequired,
	dashLength: _propTypes2.default.number.isRequired,
	dashThickness: _propTypes2.default.number.isRequired,
	dashColor: _propTypes2.default.string,
	dashStyle: _reactNative.ViewPropTypes.style
};

Dash.defaultProps = {
	dashGap: 2,
	dashLength: 4,
	dashThickness: 2,
	dashColor: 'black'
};

exports.default = (0, _reactNativeMeasureme2.default)(Dash);


================================================
FILE: index.d.ts
================================================
// Type definitions for react-native-dash v0.0.9
// Project: react-native-dash
// Definitions by: alex-blair <https://github.com/alex-blair>

import React from 'react';
import { ViewStyle, StyleProp } from 'react-native';

export interface DashProps {
  dashGap: number;
  dashLength: number;
  dashThickness: number;
  style?: StyleProp<ViewStyle>;
  dashColor?: string;
  dashStyle?: StyleProp<ViewStyle>;
}

export default class Dash extends React.Component<DashProps> {}


================================================
FILE: package.json
================================================
{
  "name": "react-native-dash",
  "version": "0.0.11",
  "description": "A <Dash /> component for react-native to draw dashed or dotted lines",
  "main": "dist/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "babel --presets=es2015,react --plugins=transform-object-rest-spread Dash.js --out-file dist/index.js",
    "prepare": "npm run build",
    "prepush": "npm run build",
    "precommit": "npm run build"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/obipawan/react-native-dash.git"
  },
  "keywords": [
    "line",
    "lines",
    "react-native",
    "react",
    "dashes",
    "dashed",
    "dash",
    "dotted",
    "dashed-lines",
    "dotted-lines"
  ],
  "author": "Pawan Kumar",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/obipawan/react-native-dash/issues"
  },
  "homepage": "https://github.com/obipawan/react-native-dash#readme",
  "dependencies": {
    "react-native-measureme": "0.0.2",
    "prop-types": "^15.5.10"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "husky": "^3.0.4"
  },
  "types": "index.d.ts"
}


================================================
FILE: util.js
================================================
import { StyleSheet } from 'react-native'

export const isStyleRow = style => {
  const flatStyle = StyleSheet.flatten(style || {})
  return flatStyle.flexDirection !== 'column'
}

const getDashStyleId = (
  { dashGap, dashLength, dashThickness, dashColor },
  isRow,
) =>
  `${dashGap}-${dashLength}-${dashThickness}-${dashColor}-${
    isRow ? 'row' : 'column'
  }`

const createDashStyleSheet = (
  { dashGap, dashLength, dashThickness, dashColor },
  isRow,
) => {
  const idStyle = StyleSheet.create({
    style: {
      width: isRow ? dashLength : dashThickness,
      height: isRow ? dashThickness : dashLength,
      marginRight: isRow ? dashGap : 0,
      marginBottom: isRow ? 0 : dashGap,
      backgroundColor: dashColor,
    },
  })
  return idStyle.style
}

let stylesStore = {}
export const getDashStyle = props => {
  const isRow = isStyleRow(props.style)
  const id = getDashStyleId(props, isRow)
  if (!stylesStore[id]) {
    stylesStore = {
      ...stylesStore,
      [id]: createDashStyleSheet(props, isRow),
    }
  }
  return stylesStore[id]
}