diff --git a/README.md b/README.md index 5ea7841..b5d108f 100644 --- a/README.md +++ b/README.md @@ -45,6 +45,7 @@ export default function App() { gender="female" side="front" scale={1.7} + border="#dfdfdf" /> ); @@ -97,6 +98,7 @@ export default function App() { gender={isMale ? "male" : "female"} side={isBackSideEnabled ? "back" : "front"} scale={1.7} + border="#dfdfdf" /> @@ -144,6 +146,7 @@ const styles = StyleSheet.create({ | side | No | `string` - Can be "back" or "front", Defaults to `front` | | gender | No | `string` - Can be "male" or "female", Defaults to `male` - :warning: Please consider `female` as a beta work in progress | | scale | No | `Float` - Defaults to `1` | +| border | No | `string` - Defaults to `#dfdfdf` (`none` to hide the border) | ## v2.X.X Props diff --git a/components/SvgFemaleWrapper.tsx b/components/SvgFemaleWrapper.tsx index 8e8e42b..7a00f51 100644 --- a/components/SvgFemaleWrapper.tsx +++ b/components/SvgFemaleWrapper.tsx @@ -5,33 +5,37 @@ type SvgWrapperProps = { children: React.ReactNode; scale: number; side: "front" | "back"; + border: string | "none"; }; export const SvgFemaleWrapper: React.FC = ({ children, scale, side, + border, }) => { const viewBox = side === "front" ? "-50 -40 734 1538" : "756 0 774 1448"; return ( - - {side === "front" && ( - - )} - {side === "back" && ( - - )} - + {border !== "none" && ( + + {side === "front" && ( + + )} + {side === "back" && ( + + )} + + )} {children} ); diff --git a/components/SvgMaleWrapper.tsx b/components/SvgMaleWrapper.tsx index 6592810..76aae9f 100644 --- a/components/SvgMaleWrapper.tsx +++ b/components/SvgMaleWrapper.tsx @@ -6,56 +6,37 @@ type SvgWrapperProps = { scale: number; side: "front" | "back"; gender?: "male" | "female"; + border: string | "none"; }; export const SvgMaleWrapper: React.FC = ({ children, scale, side, - gender = "male", + border, }) => { const viewBox = side === "front" ? "0 0 724 1448" : "724 0 724 1448"; return ( - - {gender === "male" && ( - <> - {side === "front" && ( - - )} - {side === "back" && ( - - )} - - )} - {gender === "female" && ( - <> - {side === "front" && ( - - )} - {side === "back" && ( - - )} - - )} - + {border !== "none" && ( + + {side === "front" && ( + + )} + {side === "back" && ( + + )} + + )} {children} ); diff --git a/index.tsx b/index.tsx index 6f16432..81032c7 100644 --- a/index.tsx +++ b/index.tsx @@ -38,7 +38,7 @@ export type Slug = export interface BodyPart { intensity?: number; color: string; - slug: Slug; + slug?: Slug; pathArray?: string[]; } @@ -51,6 +51,7 @@ type Props = { side: "front" | "back"; gender?: "male" | "female"; onBodyPartPress: (b: BodyPart) => void; + border: string | "none"; }; const comparison = (a: BodyPart, b: BodyPart) => a.slug === b.slug; @@ -62,6 +63,7 @@ const Body = ({ side = "front", gender = "male", onBodyPartPress, + border = "#dfdfdf", }: Props) => { const mergedBodyParts = useCallback( (dataSource: ReadonlyArray) => { @@ -95,7 +97,7 @@ const Body = ({ const renderBodySvg = (data: ReadonlyArray) => { const SvgWrapper = gender === "male" ? SvgMaleWrapper : SvgFemaleWrapper; return ( - + {mergedBodyParts(data).map((bodyPart: BodyPart) => { if (bodyPart.pathArray) { return bodyPart.pathArray.map((path: string) => { diff --git a/package.json b/package.json index 878970c..88e7e53 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-native-body-highlighter", - "version": "3.0.0-beta.7", + "version": "3.0.1", "main": "index.tsx", "author": "HichamELBSI", "license": "MIT", @@ -20,7 +20,7 @@ }, "dependencies": { "ramda": "^0.29.1", - "react-native-svg": "^14.1.0" + "react-native-svg": "^15.7.1" }, "peerDependencies": { "react": "*", @@ -34,5 +34,6 @@ "jest": "^24.8.0", "react-native-typescript-transformer": "^1.2.12", "typescript": "^3.5.3" - } + }, + "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e" } \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 2f2752b..4c6124a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2870,13 +2870,14 @@ react-is@^16.8.4: resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16" integrity sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA== -react-native-svg@^14.1.0: - version "14.1.0" - resolved "https://registry.yarnpkg.com/react-native-svg/-/react-native-svg-14.1.0.tgz#7903bddd3c71bf3a8a503918253c839e6edaa724" - integrity sha512-HeseElmEk+AXGwFZl3h56s0LtYD9HyGdrpg8yd9QM26X+d7kjETrRQ9vCjtxuT5dCZEIQ5uggU1dQhzasnsCWA== +react-native-svg@^15.7.1: + version "15.7.1" + resolved "https://registry.yarnpkg.com/react-native-svg/-/react-native-svg-15.7.1.tgz#299bf5ff21fb355a0f4bedd4cb8f9f520725c4fe" + integrity sha512-Xc11L4t6/DtmUwrQqHR7S45Qy3cIWpcfGlmEatVeZ9c1N8eAK79heJmGRgCOVrXESrrLEHfP/AYGf0BGyrvV6A== dependencies: css-select "^5.1.0" css-tree "^1.1.3" + warn-once "0.1.1" react-native-typescript-transformer@^1.2.12: version "1.2.12" @@ -3570,6 +3571,11 @@ walker@^1.0.7, walker@~1.0.5: dependencies: makeerror "1.0.x" +warn-once@0.1.1: + version "0.1.1" + resolved "https://registry.yarnpkg.com/warn-once/-/warn-once-0.1.1.tgz#952088f4fb56896e73fd4e6a3767272a3fccce43" + integrity sha512-VkQZJbO8zVImzYFteBXvBOZEl1qL175WH8VmZcxF2fZAoudNhNDvHi+doCaAEdU2l2vtcIwa2zn0QK5+I1HQ3Q== + webidl-conversions@^4.0.2: version "4.0.2" resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"