From 265e9254ef79eb8e9a72261bee0fdd5da4e331ee Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Fri, 21 Aug 2020 23:07:52 +0000 Subject: [PATCH 1/3] build(deps): bump lodash from 4.17.11 to 4.17.20 Bumps [lodash](https://github.com/lodash/lodash) from 4.17.11 to 4.17.20. - [Release notes](https://github.com/lodash/lodash/releases) - [Commits](https://github.com/lodash/lodash/compare/4.17.11...4.17.20) Signed-off-by: dependabot[bot] --- yarn.lock | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/yarn.lock b/yarn.lock index 87fc003..6607b57 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4591,9 +4591,9 @@ lodash.unescape@4.0.1: integrity sha1-vyJJiGzlFM2hEvrpIYzcBlIR/Jw= lodash@^4.15.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.5, lodash@^4.3.0, lodash@^4.6.1: - version "4.17.11" - resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d" - integrity sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg== + version "4.17.20" + resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52" + integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA== log-symbols@^1.0.2: version "1.0.2" From 10e11db572ac95cc3437f1efe001b7fce0c6c997 Mon Sep 17 00:00:00 2001 From: Julian Rosse Date: Mon, 29 Mar 2021 02:01:17 -0400 Subject: [PATCH 2/3] feat: add indicatorHeight prop (#75) Allows configuring the height of the indicator (previously hardcoded 2px) --- README.md | 2 ++ src/__tests__/__snapshots__/main.test.js.snap | 12 ++++++++++++ src/components/Indicator.tsx | 7 ++++--- src/components/MaterialTabs.tsx | 9 ++++++--- src/index.d.ts | 7 +++++++ src/lib/constants.ts | 4 ---- src/lib/styles.ts | 9 ++++++--- 7 files changed, 37 insertions(+), 13 deletions(-) delete mode 100644 src/lib/constants.ts diff --git a/README.md b/README.md index 722be67..eeed4bf 100644 --- a/README.md +++ b/README.md @@ -82,7 +82,9 @@ const styles = StyleSheet.create({ | prop | default | type | description | | ------------------------- | ------------------------ | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | | barColor | #13897b | string | Color of the tab bar | +| barHeight | 48 | number | Height of the tab bar | | indicatorColor | #fff | string | Color of the indicator | +| indicatorHeight | 2 | number | Height of the indicator | activeTextColor | #fff | string | Color of the text for the selected tab | | inactiveTextColor | rgba(255, 255, 255, 0.7) | string | Color of the text for inactive tabs | | items | none | array(string | element) | The headers for the individual tabs | diff --git a/src/__tests__/__snapshots__/main.test.js.snap b/src/__tests__/__snapshots__/main.test.js.snap index ed8deef..462c462 100644 --- a/src/__tests__/__snapshots__/main.test.js.snap +++ b/src/__tests__/__snapshots__/main.test.js.snap @@ -23,6 +23,7 @@ exports[`Main should apply custom activeTextStyle to active tab 1`] = ` props.height}; width: ${(props: BarProps) => props.tabWidth}; position: absolute; bottom: 0; @@ -21,6 +20,7 @@ interface IndicatorProps { color: string; tabWidth: number; value: Animated.Value; + height: number; } const Indicator = (props: IndicatorProps) => ( @@ -28,6 +28,7 @@ const Indicator = (props: IndicatorProps) => ( color={props.color} style={{ transform: [{ translateX: props.value }] }} tabWidth={props.tabWidth} + height={props.height} /> ); diff --git a/src/components/MaterialTabs.tsx b/src/components/MaterialTabs.tsx index e5fe4bd..9d35977 100644 --- a/src/components/MaterialTabs.tsx +++ b/src/components/MaterialTabs.tsx @@ -14,7 +14,6 @@ import Indicator from './Indicator'; import { ContentType } from './Tab/Tab'; import { Bar, TabTrack } from '../lib/styles'; -import constants from '../lib/constants'; interface Props extends Pick { allowFontScaling: boolean; @@ -30,6 +29,7 @@ interface Props extends Pick { items: ContentType[]; uppercase: boolean; onChange(index: number): void; + indicatorHeight: number; } const getKeyForTab = (item: ContentType) => @@ -50,6 +50,7 @@ const MaterialTabs: React.FC = ({ uppercase, indicatorColor, barColor, + indicatorHeight, }) => { const [tabWidth, setTabWidth] = useState(0); const [barWidth, setBarWidth] = useState(0); @@ -143,7 +144,7 @@ const MaterialTabs: React.FC = ({ keyboardShouldPersistTaps={keyboardShouldPersistTaps} scrollEnabled={scrollable} > - + {items.map((item, idx) => ( = ({ color={indicatorColor} value={indicatorPosition} tabWidth={!scrollable ? tabWidth : barWidth * 0.4} + height={indicatorHeight} /> @@ -177,13 +179,14 @@ MaterialTabs.defaultProps = { allowFontScaling: true, selectedIndex: 0, barColor: '#13897b', - barHeight: constants.barHeight, + barHeight: 48, activeTextColor: '#fff', indicatorColor: '#fff', inactiveTextColor: 'rgba(255, 255, 255, 0.7)', scrollable: false, uppercase: true, keyboardShouldPersistTaps: 'never', + indicatorHeight: 2, }; export default MaterialTabs; diff --git a/src/index.d.ts b/src/index.d.ts index e8965a7..cc964b9 100644 --- a/src/index.d.ts +++ b/src/index.d.ts @@ -86,6 +86,13 @@ interface TabsProps extends Pick { * @param index */ onChange(index: number): void; + + /** + * Height of the indicator + * + * Default is 2 + */ + indicatorHeight?: number; } export default class MaterialTabs extends React.Component {} diff --git a/src/lib/constants.ts b/src/lib/constants.ts deleted file mode 100644 index 1eb6ab4..0000000 --- a/src/lib/constants.ts +++ /dev/null @@ -1,4 +0,0 @@ -export default { - barHeight: 48, - indicatorHeight: 2, -}; diff --git a/src/lib/styles.ts b/src/lib/styles.ts index a0aee09..71e5953 100644 --- a/src/lib/styles.ts +++ b/src/lib/styles.ts @@ -1,5 +1,4 @@ import styled from 'styled-components/native'; -import constants from './constants'; interface BarProps { barColor: string; @@ -11,10 +10,14 @@ const Bar = styled.View` height: ${(props: BarProps) => props.barHeight}; `; +interface TabTrackProps { + barHeight: number; + indicatorHeight: number; +} + const TabTrack = styled.View` flex-direction: row; - height: ${(props: Pick) => - props.barHeight - constants.indicatorHeight}; + height: ${(props: TabTrackProps) => props.barHeight - props.indicatorHeight}; `; export { Bar, TabTrack }; From a9fcd80b6a513e137624174eff03af063c602d2a Mon Sep 17 00:00:00 2001 From: Kyle Roach Date: Mon, 29 Mar 2021 02:06:05 -0400 Subject: [PATCH 3/3] chore: bump package --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index a477aed..560e963 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-native-material-tabs", - "version": "4.1.2", + "version": "4.2.0", "description": "Material Design implementation of Tabs", "keywords": [ "react",