Skip to content

Commit

Permalink
feat: implement FileSelector component
Browse files Browse the repository at this point in the history 
fix: #1507
  • Loading branch information
@HellWolf93
HellWolf93 committed May 2, 2020
1 parent 91a00c5 commit f60856c
Show file tree
Hide file tree
Showing 13 changed files with 942 additions and 0 deletions.
6 changes: 6 additions & 0 deletions src/components/FileSelector/helpers/containsFiles.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
export default function containsFiles(event) {
if (event.dataTransfer.types) {
return !event.dataTransfer.types.some(type => type !== 'Files');
}
return true;
}
33 changes: 33 additions & 0 deletions src/components/FileSelector/icons/cancel.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import React from 'react';

export default function CancelIcon() {
return (
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
<title>cancel</title>
<g
id="components"
stroke="none"
strokeWidth="1"
fill="none"
fillRule="evenodd"
fillOpacity="0.7"
opacity="0.583426339"
>
<g
id="Components-FileSelector-"
transform="translate(-708.000000, -895.000000)"
fill="#A8A9AF"
>
<g id="Group-46" transform="translate(419.000000, 863.000000)">
<g id="Group-21" transform="translate(5.000000, 28.000000)">
<path
d="M296,4 C302.525457,4 307.834393,9.20713168 307.9962,15.69496 L308,16 C308,22.5254567 302.792868,27.8343928 296.30504,27.9962001 L296,28 C289.372583,28 284,22.6288742 284,16 C284,9.47454326 289.207132,4.16560725 295.69496,4.00379986 L296,4 Z M292.1465,12.1466667 C291.951167,12.3418333 291.951167,12.6585 292.1465,12.8536667 L295.290667,15.9976667 L292.1465,19.1416667 C291.951167,19.3368333 291.951167,19.6535 292.1465,19.8486667 C292.244167,19.9461667 292.372167,19.995 292.5,19.995 C292.627833,19.995 292.755833,19.9461667 292.8535,19.8485 L295.997667,16.7045 L299.141667,19.8485 C299.239333,19.9461667 299.367333,19.995 299.495167,19.995 C299.623,19.995 299.751,19.9461667 299.848667,19.8485 C300.044,19.6533333 300.044,19.3366667 299.848667,19.1415 L296.704667,15.9976667 L299.848667,12.8536667 C300.044,12.6585 300.044,12.3418333 299.848667,12.1466667 C299.653333,11.9513333 299.337,11.9513333 299.141667,12.1466667 L295.997667,15.2906667 L292.8535,12.1466667 C292.658167,11.9513333 292.341833,11.9513333 292.1465,12.1466667 Z"
id="cancel"
/>
</g>
</g>
</g>
</g>
</svg>
);
}
37 changes: 37 additions & 0 deletions src/components/FileSelector/icons/error.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import React from 'react';

export default function ErrorIcon() {
return (
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
<g id="components" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
<g
id="Components-FileSelector-"
transform="translate(-427.000000, -1145.000000)"
fillRule="nonzero"
>
<g id="Group-48" transform="translate(419.000000, 1113.000000)">
<g id="error" transform="translate(8.000000, 32.000000)">
<circle
id="Oval"
fill="#FE4849"
cx="11.9766316"
cy="11.9766316"
r="11.9766316"
/>
<path
d="M23.9532105,11.9766316 C23.9532105,18.5637895 18.5637368,23.9532632 11.9765789,23.9532632 C8.15905263,23.9532632 4.79063158,22.2316316 2.61984211,19.4620526 C4.64089474,21.1088421 7.26078947,22.0819474 10.1052105,22.0819474 C16.6923684,22.0819474 22.0818421,16.6924737 22.0818421,10.1053158 C22.0818421,7.26089474 21.1087368,4.641 19.4619474,2.61994737 C22.2315789,4.79063158 23.9532105,8.15905263 23.9532105,11.9766316 Z"
id="Shape"
fill="#EA4243"
/>
<path
d="M11.1896408,12.9417222 L10.8851718,8.38606813 C10.8280895,7.49822182 10.8,6.86083308 10.8,6.47426317 C10.8,5.94805843 10.9379187,5.53746339 11.2133046,5.24274899 C11.4890518,4.94704108 11.8526804,4.8 12.3025647,4.8 C12.8480076,4.8 13.212991,4.98858831 13.3965214,5.36576493 C13.5800518,5.74330283 13.6722686,6.28739094 13.6722686,6.99676479 C13.6722686,7.41548864 13.6499595,7.8409865 13.606064,8.271181 L13.1968237,12.9603282 C13.1525669,13.5185965 13.0575502,13.9464427 12.9112317,14.2448602 C12.7652744,14.5425552 12.5239392,14.6913123 12.1883098,14.6913123 C11.8456355,14.6913123 11.6080034,14.5477034 11.4752329,14.2587695 C11.3417398,13.9707388 11.2464521,13.531422 11.1896408,12.9417222 Z M12.2453921,19.2 C11.8584609,19.2 11.5204832,19.075268 11.2325428,18.8249007 C10.9439702,18.5748045 10.8,18.2243626 10.8,17.7742073 C10.8,17.3808634 10.9379187,17.0462276 11.2133046,16.7701191 C11.4890518,16.4943719 11.8270295,16.3564532 12.2265152,16.3564532 C12.6262719,16.3564532 12.9663269,16.4940107 13.2488481,16.7701191 C13.531008,17.0458663 13.6722686,17.3807731 13.6722686,17.7742073 C13.6722686,18.2179499 13.5296532,18.5664047 13.2436999,18.8202041 C12.9584691,19.0731906 12.6259106,19.2 12.2453921,19.2 Z"
id="Shape"
fill="#FFFFFF"
/>
</g>
</g>
</g>
</g>
</svg>
);
}
71 changes: 71 additions & 0 deletions src/components/FileSelector/icons/file.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
import React from 'react';

export default function FileIcon() {
return (
<svg width="14px" height="17px" viewBox="0 0 14 17" version="1.1">
<g id="components" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
<g id="Components-FileSelector-" transform="translate(-435.000000, -899.000000)">
<g id="Group-46" transform="translate(419.000000, 863.000000)">
<g id="file" transform="translate(16.000000, 36.000000)">
<path
d="M0.433622047,8.41555118 L0.433622047,15.8444094 C0.433622047,15.9634252 0.530708661,16.0616142 0.649685039,16.0616142 L4.09775591,16.0616142 L9.20232283,16.0616142 L9.93582677,16.0616142 L12.9414961,16.0616142 C13.0604724,16.0616142 13.1575197,15.9634252 13.1575197,15.8444094 L13.1575197,12.3541339 L13.1575197,2.71279528 L13.1575197,2.61228346 L10.9627559,2.61228346 C10.751378,2.61228346 10.3124016,2.64232283 10.3124016,2.16287402 L10.3077559,0.0196850394 L0.649645669,0.0196850394 C0.530669291,0.0196850394 0.433622047,0.116732283 0.433622047,0.235748031 L0.433622047,2.09007874 L0.433622047,2.87456693 L0.433622047,8.41555118 L0.433622047,8.41555118 Z"
id="Path"
fill="#FFFFFF"
/>
<path
d="M13.1574803,12.3541339 L13.1574803,2.71279528 L13.1574803,2.61228346 L13.1574803,2.57877953 C13.1574803,2.51637795 13.1309055,2.50598425 13.0350394,2.41240157 L10.6658661,0.152559055 C10.5538189,0.0462598425 10.5353543,0.0196850394 10.4694882,0.0196850394 L10.3077559,0.0196850394 L0.649645669,0.0196850394 C0.530669291,0.0196850394 0.433622047,0.116732283 0.433622047,0.235748031 L0.433622047,15.8444094 C0.433622047,15.9634252 0.530669291,16.0616142 0.649645669,16.0616142 L12.9414567,16.0616142 C13.0604331,16.0616142 13.1574803,15.9634252 13.1574803,15.8444094 L13.1574803,12.3541339 Z"
id="Path"
fill="#FFFFFF"
/>
<path
d="M13.1574803,12.3541339 L13.1574803,2.71279528 L13.1574803,2.61228346 C13.1574803,2.49559055 13.1193701,2.49444882 13.0350394,2.41240157 L10.6658661,0.152559055 C10.5538189,0.0462598425 10.5353543,0.0196850394 10.4694882,0.0196850394 L10.3077559,0.0196850394 L7.90389764,0.0196850394 C10.8414173,3.95248031 11.0088976,11.0416535 8.82917323,15.4666142 C8.72866142,15.6722835 8.62354331,15.8698425 8.5138189,16.0616142 L9.20228346,16.0616142 L9.9357874,16.0616142 L12.9414567,16.0616142 C13.0604331,16.0616142 13.1574803,15.9634252 13.1574803,15.8444094 L13.1574803,12.3541339 Z"
id="Path"
fill="#F8F8F8"
/>
<path
d="M10.3123622,2.16283465 C10.3123622,2.64228346 10.7512992,2.61224409 10.9627165,2.61224409 L13.1574803,2.61224409 L13.1574803,2.57874016 C13.1574803,2.51633858 13.1309055,2.50594488 13.0350394,2.4123622 L10.6658661,0.152519685 C10.5538189,0.0462204724 10.5353543,0.0196456693 10.4694882,0.0196456693 L10.3077559,0.0196456693 L10.3123622,2.16283465 Z"
id="Path"
fill="#FFFFFF"
/>
<path
d="M13.0350394,2.41240157 L10.6658661,0.152559055 C10.5538189,0.0462598425 10.5353543,0.0196850394 10.4694882,0.0196850394 L10.3077559,0.0196850394 L10.3123622,2.16283465 C10.3123622,2.64228346 10.7512992,2.61224409 10.9627165,2.61224409 L13.1574803,2.61224409 L13.1574803,2.57874016 C13.1574803,2.51637795 13.1309055,2.50598425 13.0350394,2.41240157 Z"
id="Path"
fill="#B5C4CF"
/>
<path
d="M11.2052756,4.74433071 L2.50826772,4.74433071 C2.34027559,4.74433071 2.20409449,4.60811024 2.20409449,4.44003937 C2.20409449,4.2719685 2.34027559,4.13574803 2.50826772,4.13574803 L11.2052756,4.13574803 C11.3732677,4.13574803 11.5094488,4.2719685 11.5094488,4.44003937 C11.5094488,4.60811024 11.3733071,4.74433071 11.2052756,4.74433071 Z"
id="Path"
fill="#9AAFB7"
fillRule="nonzero"
/>
<path
d="M11.2052756,6.90594488 L2.50826772,6.90594488 C2.34027559,6.90594488 2.20409449,6.76972441 2.20409449,6.60165354 C2.20409449,6.43358268 2.34027559,6.2973622 2.50826772,6.2973622 L11.2052756,6.2973622 C11.3732677,6.2973622 11.5094488,6.43358268 11.5094488,6.60165354 C11.5094488,6.76972441 11.3733071,6.90594488 11.2052756,6.90594488 Z"
id="Path"
fill="#9AAFB7"
fillRule="nonzero"
/>
<path
d="M11.2052756,9.06759843 L2.50826772,9.06759843 C2.34027559,9.06759843 2.20409449,8.93137795 2.20409449,8.76330709 C2.20409449,8.59523622 2.34027559,8.45901575 2.50826772,8.45901575 L11.2052756,8.45901575 C11.3732677,8.45901575 11.5094488,8.59523622 11.5094488,8.76330709 C11.5094488,8.93137795 11.3733071,9.06759843 11.2052756,9.06759843 Z"
id="Path"
fill="#9AAFB7"
fillRule="nonzero"
/>
<path
d="M11.2052756,11.229252 L2.50826772,11.229252 C2.34027559,11.229252 2.20409449,11.0930315 2.20409449,10.9249606 C2.20409449,10.7568898 2.34027559,10.6206693 2.50826772,10.6206693 L11.2052756,10.6206693 C11.3732677,10.6206693 11.5094488,10.7568898 11.5094488,10.9249606 C11.5094488,11.0930315 11.3733071,11.229252 11.2052756,11.229252 Z"
id="Path"
fill="#9AAFB7"
fillRule="nonzero"
/>
<path
d="M11.2052756,13.3909055 L2.50826772,13.3909055 C2.34027559,13.3909055 2.20409449,13.254685 2.20409449,13.0866142 C2.20409449,12.9185433 2.34027559,12.7823228 2.50826772,12.7823228 L11.2052756,12.7823228 C11.3732677,12.7823228 11.5094488,12.9185433 11.5094488,13.0866142 C11.5094488,13.254685 11.3733071,13.3909055 11.2052756,13.3909055 Z"
id="Path"
fill="#9AAFB7"
fillRule="nonzero"
/>
</g>
</g>
</g>
</g>
</svg>
);
}
Loading

0 comments on commit f60856c

Please sign in to comment.