Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

8693cb4dw create status button #10

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

8693cb4dw create status button #10

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a86f158
ADD STATUS BATTON
MaciejKubon Jan 13, 2024
a855fbc
merge with main
MaciejKubon Jan 13, 2024
f2130bd
ADD StatusButton
MaciejKubon Jan 13, 2024
38b6368
osobne casy dla komponentow + uzywanie aliasow + uzycie stylu globaln…
MaciejKubon Feb 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .eslintrc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ module.exports = {
'react-hooks/exhaustive-deps': 'warn',
'simple-import-sort/imports': 'warn',
'simple-import-sort/exports': 'warn',
indent: ['warn', 2],
indent: ['warn', 2, { SwitchCase: 1 }],
quotes: ['warn', 'single'],
semi: ['warn', 'always'],
},
Expand Down
9 changes: 8 additions & 1 deletion App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,19 @@
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import { globalStyles } from 'style';

import StatusButton from './src/components/StatusButton';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

używajmy aliasów: @/components

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

używajmy też plików reeksportujących. Zgodnie ze strukturą w readme. Plik reeksportujący to plik index.ts, w readme jest to index.tsx, ale zostanie to poprawione.

Oprócz tego możesz wrzucić ten komponent w folder /components/Button

import { globalStyles } from './style';

const App = () => {
return (
<View style={styles.container}>
<Text>Open up App.tsx to start working on your app!</Text>
<StatusBar style="auto" />
<StatusButton title="Niedostępny" status={0} onPress={() => {}} />
<StatusButton title="Dostępny" status={1} onPress={() => {}} />
<StatusButton title="Nie przeszkadzać" status={2} onPress={() => {}} />
<StatusButton title="Zaraz wracam" status={3} onPress={() => {}} />
<StatusButton title="default" status={4} onPress={() => {}} />
</View>
);
};
Expand Down
3 changes: 3 additions & 0 deletions assets/status0.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions assets/status1.svg
View file
Open in desktop
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

mogę się dowiedzieć po co te ikony tutaj skoro one nie są nigdzie importowane?

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions assets/status2.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions assets/status3.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions assets/statusDefault.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions package.json
View file
Open in desktop
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

daj znać po co jest jaka paczka, bo kojarzę, że coś tam było potrzebne, ale widzę teraz, że sporo tego wyszło

Original file line number Diff line number Diff line change
Expand Up @@ -10,19 +10,24 @@
"lint": "eslint --ext .js,.jsx,.ts,.tsx"
},
"dependencies": {
"@expo/webpack-config": "^19.0.0",
"@react-native/metro-config": "^0.73.3",
"expo": "~49.0.15",
"expo-status-bar": "~1.6.0",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-hook-form": "^7.48.2",
"react-native": "0.72.6",
"react-native-svg": "13.9.0",
"react-native-web": "~0.19.6",
"yarn": "^1.22.21",
"yup": "^1.3.2"
},
"devDependencies": {
"@babel/core": "^7.20.0",
"@expo/webpack-config": "^19.0.0",
"@types/react": "~18.2.14",
"babel-plugin-module-resolver": "^5.0.0",
"eslint": "^8.54.0",
"eslint-config-universe": "^12.0.0",
"eslint-plugin-jest": "^27.6.0",
Expand Down
110 changes: 110 additions & 0 deletions src/components/StatusButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
import React from 'react';
import {
GestureResponderEvent,
Pressable,
StyleSheet,
Text,
View,
} from 'react-native';
import Svg, { Circle, Path } from 'react-native-svg';

type Param = {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

type Props

title: string;
status: number;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nie podoba mi się to, że status jest typu number. Numer 0 nic tak naprawdę nie mówi o statusie. Docelowo to powinno być mapowane na jakiś union type

onPress: (event: GestureResponderEvent) => void;
};
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ogólnie fajnie jakby button przyjmował wszystkie propsy jakie normalnie przyjmuje komponent <Pressable />

Zrób to w taki sposób:
type Props = React.ComponentPropsWithRef<typeof Pressable> & { jakieś propsy, których pressable nie przyjmuje, a potrzebujemy je w komponencie }


const StatusButton = (param: Param) => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

param: Param => { title, status, onPress }: Props.

Dekstrukturyzacja obiektu

const selectStatus = (property: number) => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ta funkcja wygląda słabo. Poszczególny case'y można wydzielić do osobnych komponentów

switch (property) {
case 0:
return (
<View>
<Svg width="24" height="24" viewBox="0 0 24 24" fill="none">
<Path
fill-rule="evenodd"
clip-rule="evenodd"
d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM5.64645 5.64645C5.84171 5.45118 6.15829 5.45118 6.35355 5.64645L12 11.2929L17.6464 5.64646C17.8417 5.4512 18.1583 5.4512 18.3535 5.64646C18.5488 5.84172 18.5488 6.1583 18.3535 6.35357L12.7071 12L18.3535 17.6464C18.5488 17.8417 18.5488 18.1583 18.3535 18.3535C18.1583 18.5488 17.8417 18.5488 17.6464 18.3535L12 12.7071L6.35355 18.3536C6.15829 18.5488 5.84171 18.5488 5.64645 18.3536C5.45118 18.1583 5.45118 17.8417 5.64645 17.6464L11.2929 12L5.64645 6.35355C5.45118 6.15829 5.45118 5.84171 5.64645 5.64645Z"
fill="#D9D9D9"
/>
</Svg>
<Text style={styles.text}>{param.title}</Text>
</View>
);
case 1:
return (
<View>
<Svg width="24" height="24" viewBox="0 0 24 24" fill="none">
<Path
fill-rule="evenodd"
clip-rule="evenodd"
d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM19.6005 7.20247C19.8067 7.38614 19.825 7.70219 19.6413 7.9084L10.2774 18.4218C10.2612 18.44 10.244 18.4567 10.2259 18.4719C10.2144 18.4839 10.2022 18.4954 10.1893 18.5064C9.97928 18.6856 9.66369 18.6606 9.48444 18.4506L6.75481 15.2516C6.57557 15.0415 6.60055 14.7259 6.81062 14.5467C7.02068 14.3674 7.33627 14.3924 7.51552 14.6025L9.87603 17.3689L18.8946 7.2433C19.0782 7.03709 19.3943 7.01881 19.6005 7.20247Z"
fill="#37B744"
/>
</Svg>
<Text style={styles.text}>{param.title}</Text>
</View>
);
case 2:
return (
<View>
<Svg width="24" height="24" viewBox="0 0 24 24" fill="none">
<Circle cx="12" cy="12" r="12" fill="#DF2B2B" />
</Svg>

<Text style={styles.text}>{param.title}</Text>
</View>
);
case 3:
return (
<View>
<Svg width="24" height="24" viewBox="0 0 24 24" fill="none">
<Path
fill-rule="evenodd"
clip-rule="evenodd"
d="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM11.5001 12.5588L11.5002 12.5686C11.4966 12.7072 11.5502 12.8465 11.6597 12.9482L16.0678 17.0428C16.2701 17.2307 16.5865 17.219 16.7744 17.0167C16.9624 16.8144 16.9507 16.498 16.7484 16.3101L12.5001 12.3639V3.5C12.5001 3.22386 12.2762 3 12.0001 3C11.7239 3 11.5001 3.22386 11.5001 3.5V12.5588Z"
fill="#FED815"
/>
</Svg>
<Text style={styles.text}>{param.title}</Text>
</View>
);
default:
return (
<View>
<Svg width="24" height="24" viewBox="0 0 24 24" fill="none">
<Circle cx="12" cy="12" r="12" fill="#D9D9D9" />
</Svg>
<Text style={styles.text}>{param.title}</Text>
</View>
);
}
};
return (
<Pressable style={styles.button}>{selectStatus(param.status)}</Pressable>
);
};
export default StatusButton;

const styles = StyleSheet.create({
button: {
justifyContent: 'center',
backgroundColor: '#ffffff',
width: 232,
height: 44,
borderRadius: 10,
paddingLeft: 10,
marginTop: 10,
shadowColor: '#0000001A',
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 1,
shadowRadius: 6,
},
text: {
color: '#000000',
fontSize: 12,
paddingHorizontal: 30,
paddingVertical: 5,
position: 'absolute',
},
});
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

na pewno nie chcemy hard codować kolorów. Jeśli jakiś kolor nie jest zdefiniowany w pliku styles.ts, to zdefiniuj go, tak aby był dostępny globalnie. Pamiętaj o tym, że chcemy mieć jasny i ciemny motyw aplikacji, więc spraw, aby ten button był już gotowy w jednej i drugiej wersji

53 changes: 51 additions & 2 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3889,6 +3889,17 @@ css-select@^4.1.3, css-select@^4.2.1:
domutils "^2.8.0"
nth-check "^2.0.1"

css-select@^5.1.0:
version "5.1.0"
resolved "https://registry.yarnpkg.com/css-select/-/css-select-5.1.0.tgz#b8ebd6554c3637ccc76688804ad3f6a6fdaea8a6"
integrity sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==
dependencies:
boolbase "^1.0.0"
css-what "^6.1.0"
domhandler "^5.0.2"
domutils "^3.0.1"
nth-check "^2.0.1"

css-tree@^1.1.2, css-tree@^1.1.3:
version "1.1.3"
resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.1.3.tgz#eb4870fb6fd7707327ec95c2ff2ab09b5e8db91d"
Expand All @@ -3897,7 +3908,7 @@ css-tree@^1.1.2, css-tree@^1.1.3:
mdn-data "2.0.14"
source-map "^0.6.1"

css-what@^6.0.1:
css-what@^6.0.1, css-what@^6.1.0:
version "6.1.0"
resolved "https://registry.yarnpkg.com/css-what/-/css-what-6.1.0.tgz#fb5effcf76f1ddea2c81bdfaa4de44e79bac70f4"
integrity sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==
Expand Down Expand Up @@ -4179,7 +4190,16 @@ dom-serializer@^1.0.1:
domhandler "^4.2.0"
entities "^2.0.0"

domelementtype@^2.0.1, domelementtype@^2.2.0:
dom-serializer@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-2.0.0.tgz#e41b802e1eedf9f6cae183ce5e622d789d7d8e53"
integrity sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==
dependencies:
domelementtype "^2.3.0"
domhandler "^5.0.2"
entities "^4.2.0"

domelementtype@^2.0.1, domelementtype@^2.2.0, domelementtype@^2.3.0:
version "2.3.0"
resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.3.0.tgz#5c45e8e869952626331d7aab326d01daf65d589d"
integrity sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==
Expand All @@ -4191,6 +4211,13 @@ domhandler@^4.0.0, domhandler@^4.2.0, domhandler@^4.3.1:
dependencies:
domelementtype "^2.2.0"

domhandler@^5.0.2, domhandler@^5.0.3:
version "5.0.3"
resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-5.0.3.tgz#cc385f7f751f1d1fc650c21374804254538c7d31"
integrity sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==
dependencies:
domelementtype "^2.3.0"

domutils@^2.5.2, domutils@^2.8.0:
version "2.8.0"
resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.8.0.tgz#4437def5db6e2d1f5d6ee859bd95ca7d02048135"
Expand All @@ -4200,6 +4227,15 @@ domutils@^2.5.2, domutils@^2.8.0:
domelementtype "^2.2.0"
domhandler "^4.2.0"

domutils@^3.0.1:
version "3.1.0"
resolved "https://registry.yarnpkg.com/domutils/-/domutils-3.1.0.tgz#c47f551278d3dc4b0b1ab8cbb42d751a6f0d824e"
integrity sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==
dependencies:
dom-serializer "^2.0.0"
domelementtype "^2.3.0"
domhandler "^5.0.3"

dot-case@^3.0.4:
version "3.0.4"
resolved "https://registry.yarnpkg.com/dot-case/-/dot-case-3.0.4.tgz#9b2b670d00a431667a8a75ba29cd1b98809ce751"
Expand Down Expand Up @@ -4273,6 +4309,11 @@ entities@^2.0.0:
resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55"
integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==

entities@^4.2.0:
version "4.5.0"
resolved "https://registry.yarnpkg.com/entities/-/entities-4.5.0.tgz#5d268ea5e7113ec74c4d033b79ea5a35a488fb48"
integrity sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==

env-editor@^0.4.1:
version "0.4.2"
resolved "https://registry.yarnpkg.com/env-editor/-/env-editor-0.4.2.tgz#4e76568d0bd8f5c2b6d314a9412c8fe9aa3ae861"
Expand Down Expand Up @@ -8421,6 +8462,14 @@ react-is@^17.0.1:
resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==

[email protected]:
version "13.9.0"
resolved "https://registry.yarnpkg.com/react-native-svg/-/react-native-svg-13.9.0.tgz#8df8a690dd00362601f074dec5d3a86dd0f99c7f"
integrity sha512-Ey18POH0dA0ob/QiwCBVrxIiwflhYuw0P0hBlOHeY4J5cdbs8ngdKHeWC/Kt9+ryP6fNoEQ1PUgPYw2Bs/rp5Q==
dependencies:
css-select "^5.1.0"
css-tree "^1.1.3"

react-native-web@~0.19.6:
version "0.19.10"
resolved "https://registry.yarnpkg.com/react-native-web/-/react-native-web-0.19.10.tgz#5f7205f8909c0889bc89c9fde7c6e287defa7c63"
Expand Down