diff --git a/Dash.js b/Dash.js index 32ff1ec..19d5514 100644 --- a/Dash.js +++ b/Dash.js @@ -13,10 +13,12 @@ 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 fullDashesCount = Math.floor(length / (props.dashGap + props.dashLength)) + const lastDashSize = length - fullDashesCount * (props.dashGap + props.dashLength); const calculatedDashStyles = getDashStyle(props) + const calculatedLastDashStyle = getDashStyle(props, lastDashSize) let dash = [] - for (let i = 0; i < n; i++) { + for (let i = 0; i < fullDashesCount; i++) { dash.push( { /> ) } + if (lastDashSize > 0) { + dash.push( + + ); + } return ( 0) { + dash.push(_react2.default.createElement(_reactNative.View, { + key: fullDashesCount, + style: [calculatedLastDashStyle, props.dashStyle] + })); + } return _react2.default.createElement( _reactNative.View, { diff --git a/util.js b/util.js index c5fa0b3..f0bc180 100644 --- a/util.js +++ b/util.js @@ -8,21 +8,26 @@ export const isStyleRow = style => { const getDashStyleId = ( { dashGap, dashLength, dashThickness, dashColor }, isRow, + isShortened = false ) => `${dashGap}-${dashLength}-${dashThickness}-${dashColor}-${ isRow ? 'row' : 'column' - }` + }-${isShortened}` const createDashStyleSheet = ( { dashGap, dashLength, dashThickness, dashColor }, isRow, + maxLength, ) => { + const currentDashLength = maxLength === undefined ? dashLength : Math.min(maxLength, dashLength); + const currentGapLength = maxLength === undefined ? dashGap : Math.max(maxLength - dashLength, 0); + const idStyle = StyleSheet.create({ style: { - width: isRow ? dashLength : dashThickness, - height: isRow ? dashThickness : dashLength, - marginRight: isRow ? dashGap : 0, - marginBottom: isRow ? 0 : dashGap, + width: isRow ? currentDashLength : dashThickness, + height: isRow ? dashThickness : currentDashLength, + marginRight: isRow ? currentGapLength : 0, + marginBottom: isRow ? 0 : currentGapLength, backgroundColor: dashColor, }, }) @@ -30,13 +35,13 @@ const createDashStyleSheet = ( } let stylesStore = {} -export const getDashStyle = props => { +export const getDashStyle = (props, maxLength=undefined) => { const isRow = isStyleRow(props.style) - const id = getDashStyleId(props, isRow) + const id = getDashStyleId(props, isRow, maxLength !== undefined) if (!stylesStore[id]) { stylesStore = { ...stylesStore, - [id]: createDashStyleSheet(props, isRow), + [id]: createDashStyleSheet(props, isRow, maxLength), } } return stylesStore[id]