diff --git a/Dash.js b/Dash.js index 32ff1ec..78a66de 100644 --- a/Dash.js +++ b/Dash.js @@ -12,8 +12,13 @@ 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)) + let n; + if (props.dashCount == null) { + const length = isRow ? props.width : props.height + n = Math.ceil(length / (props.dashGap + props.dashLength)) + } else { + n = props.dashCount + } const calculatedDashStyles = getDashStyle(props) let dash = [] for (let i = 0; i < n; i++) { @@ -44,6 +49,7 @@ const styles = StyleSheet.create({ Dash.propTypes = { style: ViewPropTypes.style, + dashCount: PropTypes.number, dashGap: PropTypes.number.isRequired, dashLength: PropTypes.number.isRequired, dashThickness: PropTypes.number.isRequired, diff --git a/README.md b/README.md index 89cac84..d3a3330 100644 --- a/README.md +++ b/README.md @@ -15,6 +15,7 @@ npm i --save react-native-dash | `dashGap` | Gap between two dashes | number | `2` | `dashLength` | Length of each dash | number | `4` | `dashThickness` | Thickness of each dash | number | `2` +| `dashCount` | The number of dashes to render | number | `undefined` | `dashColor` | Color of each dash | string | `black` | `dashStyle` | Dashes style | [View.PropTypes.Style](https://facebook.github.io/react-native/docs/view.html#style) | {} diff --git a/dist/index.js b/dist/index.js index 4034e31..630cac6 100644 --- a/dist/index.js +++ b/dist/index.js @@ -24,8 +24,13 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de 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 n = void 0; + if (props.dashCount == null) { + var length = isRow ? props.width : props.height; + n = Math.ceil(length / (props.dashGap + props.dashLength)); + } else { + n = props.dashCount; + } var calculatedDashStyles = (0, _util.getDashStyle)(props); var dash = []; for (var i = 0; i < n; i++) { @@ -55,6 +60,7 @@ var styles = _reactNative.StyleSheet.create({ Dash.propTypes = { style: _reactNative.ViewPropTypes.style, + dashCount: _propTypes2.default.number, dashGap: _propTypes2.default.number.isRequired, dashLength: _propTypes2.default.number.isRequired, dashThickness: _propTypes2.default.number.isRequired, diff --git a/index.d.ts b/index.d.ts index a234223..c7dd059 100644 --- a/index.d.ts +++ b/index.d.ts @@ -6,6 +6,7 @@ import React from 'react'; import { ViewStyle, StyleProp } from 'react-native'; export interface DashProps { + dashCount?: number; dashGap: number; dashLength: number; dashThickness: number; diff --git a/package-lock.json b/package-lock.json index ea3ae58..2e85305 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "react-native-dash", - "version": "0.0.9", + "version": "0.0.11", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -2439,8 +2439,7 @@ "js-tokens": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz", - "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls=", - "dev": true + "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls=" }, "js-yaml": { "version": "3.13.1", @@ -2505,7 +2504,6 @@ "version": "1.4.0", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", - "dev": true, "requires": { "js-tokens": "^3.0.0 || ^4.0.0" } @@ -2705,8 +2703,7 @@ "object-assign": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", - "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", - "dev": true + "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=" }, "object-copy": { "version": "0.1.0", @@ -2948,6 +2945,16 @@ "dev": true, "optional": true }, + "prop-types": { + "version": "15.7.2", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz", + "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==", + "requires": { + "loose-envify": "^1.4.0", + "object-assign": "^4.1.1", + "react-is": "^16.8.1" + } + }, "pump": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz", @@ -2986,9 +2993,15 @@ } } }, + "react-is": { + "version": "16.13.0", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.0.tgz", + "integrity": "sha512-GFMtL0vHkiBv9HluwNZTggSn/sCyEt9n02aM0dSAjGGyqyNlAyftYm4phPxdvCigG15JreC5biwxCgTAJZ7yAA==" + }, "react-native-measureme": { - "version": "0.0.1", - "integrity": "sha1-ixxVlc27HP34W/+Y/jbTPpi2Fiw=" + "version": "0.0.2", + "resolved": "https://registry.npmjs.org/react-native-measureme/-/react-native-measureme-0.0.2.tgz", + "integrity": "sha512-m7Td7w1pVdIf7a3ejN7K/67AU+TtkZqTt9/ieKamirLRI3fjLToupmOKDtIOU3Y56oKojzTKz1lBbYSPN28HWA==" }, "read-pkg": { "version": "5.2.0",