From 25bb3a70937e772a7d7f4e30d83af16f6245b8ee Mon Sep 17 00:00:00 2001 From: sevvaleygul0 Date: Sat, 6 Aug 2022 23:32:38 +0300 Subject: [PATCH] refactor: props --- .commitlintrc.json | 2 +- .husky/commit-msg | 1 - .husky/pre-commit | 4 +- example/.watchmanconfig | 2 +- example/App.tsx | 29 +++--- example/app.json | 2 +- .../AppIcon.appiconset/Contents.json | 62 ++++++------- .../ios/example/Images.xcassets/Contents.json | 6 +- example/lib/LanguagePicker.tsx | 25 +++--- example/lib/language-item/LanguageItem.tsx | 34 ++++--- .../lib/{assets => local-assets}/america.png | Bin .../lib/{assets => local-assets}/check.png | Bin .../lib/{assets => local-assets}/germany.png | Bin .../lib/{assets => local-assets}/italy.png | Bin .../lib/{assets => local-assets}/japan.png | Bin .../lib/{assets => local-assets}/sweden.png | Bin .../lib/{assets => local-assets}/turkey.png | Bin lib/FunctionalComponent/Size.ts | 7 -- lib/FunctionalComponent/Text.tsx | 40 --------- lib/StateFulComponent/Hello.tsx | 83 ------------------ lib/index.ts | 4 - package-lock.json | 8 +- package.json | 8 +- react-native-language-picker | 1 - 24 files changed, 89 insertions(+), 229 deletions(-) rename example/lib/{assets => local-assets}/america.png (100%) rename example/lib/{assets => local-assets}/check.png (100%) rename example/lib/{assets => local-assets}/germany.png (100%) rename example/lib/{assets => local-assets}/italy.png (100%) rename example/lib/{assets => local-assets}/japan.png (100%) rename example/lib/{assets => local-assets}/sweden.png (100%) rename example/lib/{assets => local-assets}/turkey.png (100%) delete mode 100644 lib/FunctionalComponent/Size.ts delete mode 100644 lib/FunctionalComponent/Text.tsx delete mode 100644 lib/StateFulComponent/Hello.tsx delete mode 100644 lib/index.ts delete mode 160000 react-native-language-picker diff --git a/.commitlintrc.json b/.commitlintrc.json index 38ece82..fb4f972 100644 --- a/.commitlintrc.json +++ b/.commitlintrc.json @@ -1,6 +1,6 @@ { "extends": ["@commitlint/config-conventional"], - "rules": { + "rules": { "header-max-length": [0, "always", 150], "subject-case": [0, "always", "sentence-case"], "type-enum": [ diff --git a/.husky/commit-msg b/.husky/commit-msg index 422d5c0..7cd8dd9 100755 --- a/.husky/commit-msg +++ b/.husky/commit-msg @@ -2,4 +2,3 @@ . "$(dirname "$0")/_/husky.sh" npx --no-install commitlint --edit -npx --no-install commitlint --edit diff --git a/.husky/pre-commit b/.husky/pre-commit index 42261a6..f5745f5 100755 --- a/.husky/pre-commit +++ b/.husky/pre-commit @@ -1,5 +1,5 @@ -#!/bin/sh -. "$(dirname "$0")/_/husky.sh" +#!/usr/bin/env sh +. "$(dirname -- "$0")/_/husky.sh" npm run prettier npm run lint diff --git a/example/.watchmanconfig b/example/.watchmanconfig index 9e26dfe..0967ef4 100644 --- a/example/.watchmanconfig +++ b/example/.watchmanconfig @@ -1 +1 @@ -{} \ No newline at end of file +{} diff --git a/example/App.tsx b/example/App.tsx index b423b71..7f0cf4f 100644 --- a/example/App.tsx +++ b/example/App.tsx @@ -1,32 +1,33 @@ import React from 'react'; -import {Text, View} from 'react-native'; -import LanguageItem from './lib/language-item/LanguageItem'; +import {View} from 'react-native'; import LanguagePicker, {ILanguagePicker} from './lib/LanguagePicker'; -const data = [ +const data: ILanguagePicker[] = [ { title: 'English', - imageSource: require('./lib/assets/america.png'), - }, - { - title: 'Turkish', - imageSource: require('./lib/assets/turkey.png'), + imageSource: require('./lib/local-assets/america.png'), + language: 'en', }, { title: 'Italian', - imageSource: require('./lib/assets/italy.png'), + imageSource: require('./lib/local-assets/italy.png'), }, { title: 'German', - imageSource: require('./lib/assets/germany.png'), + imageSource: require('./lib/local-assets/germany.png'), + }, + { + title: 'Turkish', + imageSource: require('./lib/local-assets/turkey.png'), + language: 'tr', }, { title: 'Swedish', - imageSource: require('./lib/assets/sweden.png'), + imageSource: require('./lib/local-assets/sweden.png'), }, { title: 'Japanese', - imageSource: require('./lib/assets/japan.png'), + imageSource: require('./lib/local-assets/japan.png'), }, ]; @@ -39,8 +40,10 @@ const App = () => { alignItems: 'center', paddingTop: 200, backgroundColor: '#F3F3F3', - }}> + }} + > { console.log(selectedItem); diff --git a/example/app.json b/example/app.json index 486d55b..3fed676 100644 --- a/example/app.json +++ b/example/app.json @@ -1,4 +1,4 @@ { "name": "example", "displayName": "example" -} \ No newline at end of file +} diff --git a/example/ios/example/Images.xcassets/AppIcon.appiconset/Contents.json b/example/ios/example/Images.xcassets/AppIcon.appiconset/Contents.json index 8121323..ddd7fca 100644 --- a/example/ios/example/Images.xcassets/AppIcon.appiconset/Contents.json +++ b/example/ios/example/Images.xcassets/AppIcon.appiconset/Contents.json @@ -1,53 +1,53 @@ { - "images" : [ + "images": [ { - "idiom" : "iphone", - "scale" : "2x", - "size" : "20x20" + "idiom": "iphone", + "scale": "2x", + "size": "20x20" }, { - "idiom" : "iphone", - "scale" : "3x", - "size" : "20x20" + "idiom": "iphone", + "scale": "3x", + "size": "20x20" }, { - "idiom" : "iphone", - "scale" : "2x", - "size" : "29x29" + "idiom": "iphone", + "scale": "2x", + "size": "29x29" }, { - "idiom" : "iphone", - "scale" : "3x", - "size" : "29x29" + "idiom": "iphone", + "scale": "3x", + "size": "29x29" }, { - "idiom" : "iphone", - "scale" : "2x", - "size" : "40x40" + "idiom": "iphone", + "scale": "2x", + "size": "40x40" }, { - "idiom" : "iphone", - "scale" : "3x", - "size" : "40x40" + "idiom": "iphone", + "scale": "3x", + "size": "40x40" }, { - "idiom" : "iphone", - "scale" : "2x", - "size" : "60x60" + "idiom": "iphone", + "scale": "2x", + "size": "60x60" }, { - "idiom" : "iphone", - "scale" : "3x", - "size" : "60x60" + "idiom": "iphone", + "scale": "3x", + "size": "60x60" }, { - "idiom" : "ios-marketing", - "scale" : "1x", - "size" : "1024x1024" + "idiom": "ios-marketing", + "scale": "1x", + "size": "1024x1024" } ], - "info" : { - "author" : "xcode", - "version" : 1 + "info": { + "author": "xcode", + "version": 1 } } diff --git a/example/ios/example/Images.xcassets/Contents.json b/example/ios/example/Images.xcassets/Contents.json index 2d92bd5..97a8662 100644 --- a/example/ios/example/Images.xcassets/Contents.json +++ b/example/ios/example/Images.xcassets/Contents.json @@ -1,6 +1,6 @@ { - "info" : { - "version" : 1, - "author" : "xcode" + "info": { + "version": 1, + "author": "xcode" } } diff --git a/example/lib/LanguagePicker.tsx b/example/lib/LanguagePicker.tsx index 704ee20..0db6986 100644 --- a/example/lib/LanguagePicker.tsx +++ b/example/lib/LanguagePicker.tsx @@ -1,17 +1,10 @@ -import RNBounceable from '@freakycoder/react-native-bounceable'; import React, {useState} from 'react'; -import { - Dimensions, - FlatList, - SafeAreaView, - View, - ViewStyle, -} from 'react-native'; -import LanguageItem from './language-item/LanguageItem'; +import {Dimensions, FlatList, ViewStyle} from 'react-native'; /** * ? Local Imports */ -import styles, {_container} from './LanguagePicker.style'; +import {_container} from './LanguagePicker.style'; +import LanguageItem from './language-item/LanguageItem'; const windowWidth = Dimensions.get('window').width; const windowHeight = Dimensions.get('window').height; @@ -19,25 +12,26 @@ const windowHeight = Dimensions.get('window').height; export interface ILanguagePicker { title: string; imageSource: any; - initialIndex?: number; + language?: string; } interface ILanguagePickerProps { data: ILanguagePicker[]; - container?: ViewStyle; + flatListStyle?: ViewStyle; containerWidth?: number; containerHeight?: number; initialIndex?: number; - onSelect: (selectedItem: ILanguagePicker) => void; + onSelect?: (selectedItem: ILanguagePicker) => void; } const LanguagePicker: React.FC = ({ data, - container, + flatListStyle, initialIndex = -1, containerWidth = windowWidth * 0.9, containerHeight = windowHeight * 0.7, onSelect, + ...rest }) => { const [selectedItem, setSelectedItem] = useState( data[initialIndex], @@ -53,13 +47,14 @@ const LanguagePicker: React.FC = ({ onSelect={handleOnSelectItem} isActive={selectedItem === item} item={item} + {...rest} /> ); return ( renderItem(item)} keyExtractor={item => item.title} /> diff --git a/example/lib/language-item/LanguageItem.tsx b/example/lib/language-item/LanguageItem.tsx index 493f526..344f504 100644 --- a/example/lib/language-item/LanguageItem.tsx +++ b/example/lib/language-item/LanguageItem.tsx @@ -1,13 +1,6 @@ import RNBounceable from '@freakycoder/react-native-bounceable'; -import React, {useState} from 'react'; -import { - Dimensions, - Image, - StyleProp, - Text, - View, - ViewStyle, -} from 'react-native'; +import React from 'react'; +import {Dimensions, Image, Text, ViewStyle} from 'react-native'; import {ILanguagePicker} from '../LanguagePicker'; /** * ? Local Imports @@ -15,16 +8,13 @@ import {ILanguagePicker} from '../LanguagePicker'; import styles, {_itemContainer, _titleStyle} from './LanguageItem.style'; const windowWidth = Dimensions.get('window').width; -const windowHeight = Dimensions.get('window').height; - -type CustomStyleProp = StyleProp | Array>; - interface ILanguageItem { item: ILanguagePicker; width?: number; height?: number; isActive: boolean; backgroundColor?: string; + activeBorderColor?: string; textColor?: string; itemContainer?: ViewStyle; imageComponent?: React.ReactNode | React.ReactNode[]; @@ -42,25 +32,31 @@ const LanguageItem: React.FC = ({ textColor = '#2F3452', imageComponent, checkComponent, + activeBorderColor = '#504ED9', onSelect, + ...rest }) => { - const borderColor = isActive ? '#504ED9' : '#FFFFFF'; - + const borderColor = isActive ? activeBorderColor : backgroundColor; return ( onSelect && onSelect(item)}> + onPress={() => onSelect && onSelect(item)} + > {imageComponent || ( - + )} - {item.title} + + {item.title} + {isActive && (checkComponent || ( ))} diff --git a/example/lib/assets/america.png b/example/lib/local-assets/america.png similarity index 100% rename from example/lib/assets/america.png rename to example/lib/local-assets/america.png diff --git a/example/lib/assets/check.png b/example/lib/local-assets/check.png similarity index 100% rename from example/lib/assets/check.png rename to example/lib/local-assets/check.png diff --git a/example/lib/assets/germany.png b/example/lib/local-assets/germany.png similarity index 100% rename from example/lib/assets/germany.png rename to example/lib/local-assets/germany.png diff --git a/example/lib/assets/italy.png b/example/lib/local-assets/italy.png similarity index 100% rename from example/lib/assets/italy.png rename to example/lib/local-assets/italy.png diff --git a/example/lib/assets/japan.png b/example/lib/local-assets/japan.png similarity index 100% rename from example/lib/assets/japan.png rename to example/lib/local-assets/japan.png diff --git a/example/lib/assets/sweden.png b/example/lib/local-assets/sweden.png similarity index 100% rename from example/lib/assets/sweden.png rename to example/lib/local-assets/sweden.png diff --git a/example/lib/assets/turkey.png b/example/lib/local-assets/turkey.png similarity index 100% rename from example/lib/assets/turkey.png rename to example/lib/local-assets/turkey.png diff --git a/lib/FunctionalComponent/Size.ts b/lib/FunctionalComponent/Size.ts deleted file mode 100644 index fa3090a..0000000 --- a/lib/FunctionalComponent/Size.ts +++ /dev/null @@ -1,7 +0,0 @@ -export default { - S: 11, - M: 14, - L: 16, - XL: 22, - XXL: 28, -}; diff --git a/lib/FunctionalComponent/Text.tsx b/lib/FunctionalComponent/Text.tsx deleted file mode 100644 index 91422a7..0000000 --- a/lib/FunctionalComponent/Text.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import React from "react"; -import { Text as RNText, TextStyle } from "react-native"; -import Size from "./Size"; - -export interface TextProps { - size?: "S" | "M" | "L" | "XL" | "XXL"; // size name - style?: TextStyle; - bold?: boolean; - color?: string; - children: React.ReactNode; -} - -const getSize: { [key: string]: number } = Size; - -const checkSize = (size: string): number => { - return getSize[size] || 0; -}; - -const Text = ({ - size = "M", - children, - style, - bold, - color, - ...rest -}: TextProps) => ( - - {children} - -); - -export default Text; diff --git a/lib/StateFulComponent/Hello.tsx b/lib/StateFulComponent/Hello.tsx deleted file mode 100644 index 815b12e..0000000 --- a/lib/StateFulComponent/Hello.tsx +++ /dev/null @@ -1,83 +0,0 @@ -import React from "react"; -import { Button, StyleSheet, Text, View } from "react-native"; - -export interface Props { - name: string; - intelligenceLevel?: number; -} - -interface State { - intelligenceLevel: number; -} - -export class Hello extends React.Component { - constructor(props: Props) { - super(props); - this.state = { - intelligenceLevel: props.intelligenceLevel || 1, - }; - } - - onIncrement = () => - this.setState({ intelligenceLevel: this.state.intelligenceLevel + 1 }); - - onDecrement = () => - this.setState({ intelligenceLevel: this.state.intelligenceLevel - 1 }); - - getExclamationMarks = (numChars: number) => Array(numChars + 1).join("!"); - - render() { - return ( - - - Hello{" "} - {this.props.name + - this.getExclamationMarks(this.state.intelligenceLevel)} - - - - -