Skip to content

Added types for fileInput #806

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

Merged
Jialecl merged 4 commits into from
Apr 12, 2022
Merged

Added types for fileInput #806

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
32dbf65
Added types for fileInput
Apr 11, 2022
97fadf2
Fixed error
Apr 12, 2022
2727137
Update file-input-properties.component.html
Apr 12, 2022
ee8db91
Fixed file input
Apr 12, 2022
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
25 changes: 14 additions & 11 deletions ...-site/src/app/components/examples/file-input/file-input-api/file-input-api.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,9 @@
<dxc-heading [level]="3" weight="normal" text="API" [margin]="{bottom:'small'}"></dxc-heading>
<dxc-heading
[level]="3"
weight="normal"
text="API"
[margin]="{ bottom: 'small' }"
></dxc-heading>

<file-input-properties></file-input-properties>

Expand All @@ -15,30 +20,28 @@
text="FileData"
[margin]="{ bottom: 'small' }"
></dxc-heading>
<p>Object structure of the interface. It should be imported from the library.</p>
<p>
Object structure of the interface. It should be imported from the library.
</p>
<dxc-table>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
<tr>
<td>data: File</td>
<td>
Data of the file.
</td>
<td>Selected file.</td>
</tr>
<tr>
<td>error: string</td>
<td>
Error that will be displayed in the file input.
Error of the file. If it is defined, it will be shown and the file item
will be mark as invalid.
</td>
</tr>
<tr>
<td>image: string | ArrayBuffer</td>
<td>
Image data of the file.
</td>
<td>Preview of the file..</td>
</tr>
</dxc-table>

<file-input-import></file-input-import>
<file-input-import></file-input-import>
66 changes: 37 additions & 29 deletions ...components/examples/file-input/file-input-properties/file-input-properties.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,89 +20,100 @@
<td>
<code>'file'</code>
</td>
<td>
Available modes of the component.
</td>
<td>Available modes of the component.</td>
</tr>
<tr>
<td>value: Array&lt;FileData&gt;</td>
<td></td>
<td>Value of the input file. It has an array of FileData.</td>
<td>
An array of files representing the selected files. Each file is a
FileData.
</td>
</tr>
<tr>
<td>label: string</td>
<td>
<code></code>
</td>
<td>Text to be placed above the component.</td>
</tr>
<tr>
<td>buttonLabel: string</td>
<td>
Text to be placed above the component.
<code></code>
</td>
<td>Text to be placed inside the button.</td>
</tr>
<tr>
<td>helperText: string</td>
<td></td>
<td>Helper text to be placed above the component.</td>
</tr>
<tr>
<td>buttonLabel: string</td>
<td>
<code></code>
</td>
<td>
Text to be placed inside the button.
</td>
</tr>
<tr>
<td>accept: string</td>
<td></td>
<td>
The file types that the component accepts.
The file types that the component accepts. Its value must be one of all
the possible values of the HTML file input's accept attribute. Please
check the documentation
<dxc-link
href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept"
text="here"
></dxc-link
>.
</td>
</tr>
<tr>
<td>minSize: number</td>
<td></td>
<td>
The minimum file size (in bytes) allowed. If the size of the file does not comply the minSize, the file will have an error.
The minimum file size (in bytes) allowed. If the size of the file does not
comply the minSize, the file will have an error.
</td>
</tr>
<tr>
<td>maxSize: number</td>
<td></td>
<td>
The maximum file size (in bytes) allowed. If the size of the file does not comply the maxSize, the file will have an error.
The maximum file size (in bytes) allowed. If the size of the file does not
comply the maxSize, the file will have an error.
</td>
</tr>
<tr>
<td>multiple: boolean</td>
<td><code>true</code></td>
<td>
If true, the component allows multiple file items and will show all of them. If false, the selected file will be replaced by the new selected one.
If true, the component allows multiple file items and will show all of
them. If false, only one file will be shown, and if there is already one
file selected and a new one is chosen, it will be replaced by the new
selected one.
</td>
</tr>
<tr>
<td>showPreview: boolean</td>
<td><code>false</code></td>
<td>
If true, the preview of each file item will be shown. If it's not possible to show a preview, an icon refering to the file type will be shown.
If true, the preview of each file item will be shown. If it's not possible
to show a preview, an icon refering to the file type will be shown.
</td>
</tr>
<tr>
<td>disabled: boolean</td>
<td><code>false</code></td>
<td>
If true, the component will be disabled.
</td>
<td>If true, the component will be disabled.</td>
</tr>
<tr>
<td>callbackFile: EventEmitter</td>
<td></td>
<td>
This function will be called when the user selects or drops a file. The file or list of files will be sent as a parameter.
This event will be emit when the user selects or drops a file. The list of
files will be sent as a parameter. In this function, the files can be
updated or returned as they come. These files must be passed to the value
in order to be shown.
</td>
</tr>
<tr>
<td>margin: any (string | object)</td>
<td>margin: string | object</td>
<td></td>
<td>
Size of the margin to be applied to the component ('xxsmall' | 'xsmall' |
Expand All @@ -114,9 +125,6 @@
<tr>
<td>tabIndexValue: number</td>
<td><code>0</code></td>
<td>
Value of the tabindex for all interactuable elements, except those inside
the custom area.
</td>
<td>Value of the tabindex.</td>
</tr>
</dxc-table>
</dxc-table>
8 changes: 5 additions & 3 deletions projects/dxc-ngx-cdk-site/src/app/pages/file-input/file-input.module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,10 @@ import {
DxcTagModule,
DxcChipModule,
DxcHeadingModule,
DxcLinkModule,
} from "@dxc-technology/halstack-angular";
import { TabbedSectionModule } from "../../components/tabbed-section/tabbed-section.module";
import { FileInputPropertiesComponent } from "../../components/examples/file-input/file-input-properties/file-input-properties.component";
import { TabbedSectionModule } from "src/app/components/tabbed-section/tabbed-section.module";
import { FileInputPropertiesComponent } from "src/app/components/examples/file-input/file-input-properties/file-input-properties.component";
import { FileInputExampleComponent } from "../../components/examples/file-input/file-input-example/file-input-example.component";
import { FileInputComponent } from "./file-input.component";
import { FileInputImportComponent } from "../../components/examples/file-input/file-input-import/file-input-import.component";
Expand All @@ -19,7 +20,7 @@ import { ComponentsSidenavModule } from "../components-sidenav/components-sidena
import { FileInputApiComponent } from "../../components/examples/file-input/file-input-api/file-input-api.component";
import { ColorPreviewModule } from "../../components/color-preview/color-preview.module";
import { CodesandboxViewerModule } from "../../components/codesandbox-viewer/codesandbox-viewer.module";
import { StatusTagModule } from "../../components/status-tag/status-tag.module";
import { StatusTagModule } from "src/app/components/status-tag/status-tag.module";

@NgModule({
declarations: [
Expand All @@ -43,6 +44,7 @@ import { StatusTagModule } from "../../components/status-tag/status-tag.module";
DxcChipModule,
CodesandboxViewerModule,
DxcHeadingModule,
DxcLinkModule,
StatusTagModule,
],
exports: [
Expand Down
5 changes: 3 additions & 2 deletions projects/dxc-ngx-cdk/src/lib/dxc-file-input/dxc-file-input.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,9 @@
[tabIndexValue]="tabIndexValue"
(onClick)="fileInput.click()"
></dxc-button>
<span *ngIf="mode !== 'file'" class="dropLabel">or drop files</span>
<span *ngIf="mode === 'filedrop' || mode === 'dropzone'" class="dropLabel"
>or drop files</span
>
</div>
<div class="fileContainer">
<dxc-file
Expand All @@ -48,4 +50,3 @@
</div>

<dxc-file-error *ngIf="hasShowError" [error]="value[0]?.error"></dxc-file-error>

Loading