Skip to content

Commit 0e05b7e

Browse files
yihuiliaodannify
yihuiliao
and
dannify
authored
Re-export FileTrigger package in RSP (#6295)
* re-export filetrigger to rsp * fix lint * add filetrigger docs to rsp * fix typecheck docs * update copyright year * update to be closer to rsp docs template --------- Co-authored-by: Danni <darobins@adobe.com>
1 parent 1bd538f commit 0e05b7e

File tree

9 files changed

+235
-2
lines changed

9 files changed

+235
-2
lines changed

‎packages/@adobe/react-spectrum/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@
5757
"@react-spectrum/dialog": "^3.8.9",
5858
"@react-spectrum/divider": "^3.5.11",
5959
"@react-spectrum/dnd": "^3.3.8",
60+
"@react-spectrum/filetrigger": "^3.0.0",
6061
"@react-spectrum/form": "^3.7.4",
6162
"@react-spectrum/icon": "^3.7.11",
6263
"@react-spectrum/illustratedmessage": "^3.4.11",

‎packages/@adobe/react-spectrum/src/index.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ export {ContextualHelp} from '@react-spectrum/contextualhelp';
2828
export {AlertDialog, Dialog, DialogTrigger, DialogContainer, useDialogContainer} from '@react-spectrum/dialog';
2929
export {DateField, DatePicker, DateRangePicker, TimeField} from '@react-spectrum/datepicker';
3030
export {Divider} from '@react-spectrum/divider';
31+
export {FileTrigger} from '@react-spectrum/filetrigger';
3132
export {Form} from '@react-spectrum/form';
3233
export {Icon} from '@react-spectrum/icon';
3334
export {IllustratedMessage} from '@react-spectrum/illustratedmessage';
@@ -81,6 +82,7 @@ export type {SpectrumContextualHelpProps} from '@react-spectrum/contextualhelp';
8182
export type {DialogContainerValue, SpectrumAlertDialogProps, SpectrumDialogContainerProps, SpectrumDialogProps, SpectrumDialogTriggerProps} from '@react-spectrum/dialog';
8283
export type {SpectrumDateFieldProps, SpectrumDatePickerProps, SpectrumDateRangePickerProps, SpectrumTimeFieldProps} from '@react-spectrum/datepicker';
8384
export type {SpectrumDividerProps} from '@react-spectrum/divider';
85+
export type {FileTriggerProps} from '@react-spectrum/filetrigger';
8486
export type {SpectrumFormProps} from '@react-spectrum/form';
8587
export type {IconProps, IllustrationProps} from '@react-spectrum/icon';
8688
export type {SpectrumIllustratedMessageProps} from '@react-spectrum/illustratedmessage';

‎packages/@react-spectrum/dropzone/docs/DropZone.mdx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -117,7 +117,7 @@ function Draggable() {
117117
A DropZone accepts an [IllustratedMessage](IllustratedMessage.html) as a child which is comprised of three areas: an illustration, a title, and a body. Each of these sections can be populated by providing the following components to the IllustratedMessage as children: a SVG, a [Heading](Heading.html) (title), and a [Content](Content.html) (body). A [FileTrigger](../react-aria/FileTrigger.html) is commonly paired with a DropZone to allow a user to choose files from their device.
118118

119119
```tsx example
120-
import {FileTrigger} from 'react-aria-components';
120+
import {FileTrigger} from '@adobe/react-spectrum';
121121

122122
function Example() {
123123
let [isFilled, setIsFilled] = React.useState(false);
@@ -343,7 +343,7 @@ A DropZone displays visual feedback to the user when a drag hovers over the drop
343343
In the below example, the drop zone only supports dropping JPEG images. If a JPEG is dragged over the drop zone, it will be highlighted and the operating system will display a copy cursor. If another type is dragged over the drop zone, then there is no visual feedback, indicating that a drop is not accepted.
344344

345345
```tsx example
346-
import {FileTrigger} from 'react-aria-components';
346+
import {FileTrigger} from '@adobe/react-spectrum';
347347

348348
function Example() {
349349
let [filledSrc, setFilledSrc] = React.useState(null);

‎packages/@react-spectrum/filetrigger/README.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# @react-spectrum/filetrigger
2+
3+
This package is part of [react-spectrum](https://github.com/adobe/react-spectrum). See the repo for more details.

‎packages/@react-spectrum/filetrigger/docs/FileTrigger.mdx

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
{/* Copyright 2024 Adobe. All rights reserved.
2+
This file is licensed to you under the Apache License, Version 2.0 (the "License");
3+
you may not use this file except in compliance with the License. You may obtain a copy
4+
of the License at http://www.apache.org/licenses/LICENSE-2.0
5+
Unless required by applicable law or agreed to in writing, software distributed under
6+
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
7+
OF ANY KIND, either express or implied. See the License for the specific language
8+
governing permissions and limitations under the License. */}
9+
10+
import {Layout} from '@react-spectrum/docs';
11+
export default Layout;
12+
13+
import docs from 'docs:@react-spectrum/filetrigger';
14+
import typesDocs from 'docs:@react-types/shared/src/events.d.ts';
15+
import {PropTable, HeaderInfo, TypeLink, PageDescription, StateTable} from '@react-spectrum/docs';
16+
import styles from '@react-spectrum/docs/src/docs.css';
17+
import packageData from '@react-spectrum/filetrigger/package.json';
18+
import ChevronRight from '@spectrum-icons/workflow/ChevronRight';
19+
import {Divider} from '@react-spectrum/divider';
20+
import {ExampleCard} from '@react-spectrum/docs/src/ExampleCard';
21+
import {Keyboard} from '@react-spectrum/text';
22+
import Button from '@react-spectrum/docs/pages/assets/component-illustrations/ActionButton.svg';
23+
import Link from '@react-spectrum/docs/pages/assets/component-illustrations/Link.svg';
24+
25+
---
26+
category: Buttons
27+
---
28+
29+
# FileTrigger
30+
31+
<PageDescription>{docs.exports.FileTrigger.description}</PageDescription>
32+
33+
<HeaderInfo
34+
packageData={packageData}
35+
componentNames={['FileTrigger']} />
36+
37+
## Example
38+
39+
```tsx example
40+
import {FileTrigger, Button} from '@adobe/react-spectrum';
41+
42+
function Example(){
43+
let [file, setFile] = React.useState(null);
44+
45+
return (
46+
<>
47+
<FileTrigger
48+
onSelect={(e) => {
49+
let files = Array.from(e);
50+
let filenames = files.map((file) => file.name);
51+
setFile(filenames);
52+
}}>
53+
<Button variant="accent">Select a file</Button>
54+
</FileTrigger>
55+
{file && file}
56+
</>
57+
)
58+
}
59+
```
60+
61+
## Content
62+
63+
A `FileTrigger` wraps around a pressable child such as a button, and includes a visually hidden input element that allows the user to select files from their device.
64+
65+
```tsx
66+
import {FileTrigger, Button} from '@adobe/react-spectrum';
67+
68+
<FileTrigger>
69+
<Button />
70+
</FileTrigger>
71+
```
72+
73+
If a visual label is not provided on the pressable child, then an `aria-label` or `aria-labelledby` prop must be passed to identify the file trigger to assistive technology.
74+
75+
## Accepted file types
76+
77+
By default, the file trigger will accept any file type. To support only certain file types, pass an array of the [mime type](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types) of files via the `acceptedFileTypes` prop.
78+
79+
```tsx example
80+
<FileTrigger acceptedFileTypes={['image/png']}>
81+
<Button variant="primary">Select files</Button>
82+
</FileTrigger>
83+
```
84+
85+
## Multiple files
86+
87+
A file trigger can accept multiple files by passsing the `allowsMultiple` property.
88+
89+
```tsx example
90+
<FileTrigger allowsMultiple>
91+
<Button variant="primary">Upload your files</Button>
92+
</FileTrigger>
93+
```
94+
95+
## Directory selection
96+
97+
To enable selecting directories instead of files, use the `acceptDirectory` property.
98+
99+
This reflects the [webkitdirectory](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory) HTML attribute and allows users to select directories and their contents. Please note that support for this feature varies from browser to browser.
100+
101+
102+
```tsx example
103+
function Example () {
104+
let [files, setFiles] = React.useState([]);
105+
106+
return (
107+
<>
108+
<FileTrigger
109+
acceptDirectory
110+
onSelect={(e) => {
111+
if (e) {
112+
let fileList = [...e].map(file => file.webkitRelativePath !== "" ? file.webkitRelativePath : file.name);
113+
setFiles(fileList);
114+
}
115+
}} >
116+
<Button variant="accent">Upload</Button>
117+
</FileTrigger>
118+
{files && <ul>
119+
{files.map((file, index) => (
120+
<li key={index}>{file}</li>
121+
))}
122+
</ul>}
123+
</>
124+
);
125+
}
126+
```
127+
128+
## Media capture
129+
130+
To specify the media capture mechanism to capture media on the spot, pass `user` for the user-facing camera or `environment` for the outward-facing camera via the `defaultCamera` prop.
131+
132+
This behavior only works on mobile devices. On desktop devices, it will open the file system like normal. [Read more about capture](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture).
133+
134+
```tsx example
135+
<FileTrigger defaultCamera="environment">
136+
<Button variant="accent">Open Camera</Button>
137+
</FileTrigger>
138+
````
139+
140+
## Props
141+
142+
<PropTable component={docs.exports.FileTrigger} links={docs.links} />

‎packages/@react-spectrum/filetrigger/index.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
/*
2+
* Copyright 2024 Adobe. All rights reserved.
3+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
4+
* you may not use this file except in compliance with the License. You may obtain a copy
5+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
6+
*
7+
* Unless required by applicable law or agreed to in writing, software distributed under
8+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9+
* OF ANY KIND, either express or implied. See the License for the specific language
10+
* governing permissions and limitations under the License.
11+
*/
12+
export * from './src';

‎packages/@react-spectrum/filetrigger/package.json

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
{
2+
"name": "@react-spectrum/filetrigger",
3+
"version": "3.0.0",
4+
"description": "Spectrum UI components in React",
5+
"license": "Apache-2.0",
6+
"main": "dist/main.js",
7+
"module": "dist/module.js",
8+
"exports": {
9+
"types": "./dist/types.d.ts",
10+
"import": "./dist/import.mjs",
11+
"require": "./dist/main.js"
12+
},
13+
"types": "dist/types.d.ts",
14+
"source": "src/index.ts",
15+
"files": [
16+
"dist",
17+
"src"
18+
],
19+
"sideEffects": [
20+
"*.css"
21+
],
22+
"targets": {
23+
"main": {
24+
"includeNodeModules": [
25+
"@adobe/spectrum-css-temp"
26+
]
27+
},
28+
"module": {
29+
"includeNodeModules": [
30+
"@adobe/spectrum-css-temp"
31+
]
32+
}
33+
},
34+
"repository": {
35+
"type": "git",
36+
"url": "https://github.com/adobe/react-spectrum"
37+
},
38+
"dependencies": {
39+
"react-aria-components": "^1.1.1",
40+
"@swc/helpers": "^0.5.0"
41+
},
42+
"peerDependencies": {
43+
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
44+
"@react-spectrum/provider": "^3.0.0"
45+
},
46+
"publishConfig": {
47+
"access": "public"
48+
}
49+
}

‎packages/@react-spectrum/filetrigger/src/index.ts

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
/*
2+
* Copyright 2024 Adobe. All rights reserved.
3+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
4+
* you may not use this file except in compliance with the License. You may obtain a copy
5+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
6+
*
7+
* Unless required by applicable law or agreed to in writing, software distributed under
8+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9+
* OF ANY KIND, either express or implied. See the License for the specific language
10+
* governing permissions and limitations under the License.
11+
*/
12+
13+
/// <reference types="css-module-types" />
14+
15+
export {FileTrigger} from 'react-aria-components';
16+
export type {FileTriggerProps} from 'react-aria-components';

‎packages/dev/docs/pages/react-spectrum/index.mdx

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@ import LabeledValue from '../assets/component-illustrations/LabeledValue.svg';
6868
import Badge from '../assets/component-illustrations/Badge.svg';
6969
import TagGroup from '../assets/component-illustrations/TagGroup.svg';
7070
import DropZone from '../assets/component-illustrations/DropZone.svg';
71+
import FileTrigger from '../assets/component-illustrations/FileTrigger.svg'
7172

7273
---
7374
category: Libraries
@@ -155,6 +156,13 @@ A React implementation of Spectrum, Adobe’s design system.
155156
<ActionGroup />
156157
</ExampleCard>
157158

159+
<ExampleCard
160+
url="FileTrigger.html"
161+
title="FileTrigger"
162+
description="A file trigger allows a user to access the file system with a Button.">
163+
<FileTrigger />
164+
</ExampleCard>
165+
158166
</section>
159167

160168
### Pickers

0 commit comments

Comments
 (0)