@dhis2-ui/file-input 10.16.1 → 10.16.3-alpha.1

package/src/file-input-field-with-list/file-input-field-with-list.js

@@ -0,0 +1,188 @@
+import { sharedPropTypes } from '@dhis2/ui-constants'
+import PropTypes from 'prop-types'
+import React, { Component } from 'react'
+import { FileInputField } from '../file-input-field/index.js'
+import i18n from '../locales/index.js'
+import { FileListItemWithRemove } from './file-list-item-with-remove.js'
+
+// TODO: i18n
+const translate = (prop, interpolationObject) => {
+    if (typeof prop === 'function') {
+        return prop(interpolationObject)
+    }
+
+    return prop
+}
+class FileInputFieldWithList extends Component {
+    handleChange = ({ files: fileList }, event) => {
+        const { onChange, name } = this.props
+
+        onChange({ files: this.updateFileArray(fileList), name: name }, event)
+    }
+
+    /**
+     * @param {FileList} fileList
+     * @returns {File[]}
+     */
+    updateFileArray(fileList) {
+        const { multiple, files } = this.props
+        // Spread immutable FileList instance onto array
+        const newFiles = [...fileList]
+
+        if (!multiple) {
+            return newFiles
+        }
+
+        return files
+            .filter(
+                (file) =>
+                    !newFiles.some(
+                        (x) =>
+                            x.name === file.name &&
+                            x.lastModified === file.lastModified &&
+                            x.size === file.size &&
+                            x.type === file.type
+                    )
+            )
+            .concat(newFiles)
+    }
+
+    handleRemove = ({ file: fileToRemove }, event) => {
+        const { files, onChange, name } = this.props
+
+        onChange(
+            {
+                files: files.filter((file) => file !== fileToRemove),
+                name,
+            },
+            event
+        )
+    }
+
+    static defaultProps = {
+        accept: '*',
+        dataTest: 'dhis2-uiwidgets-fileinputfield',
+
+        buttonLabel: () => i18n.t('Upload a file'),
+        placeholder: () => i18n.t('No file uploaded yet'),
+        removeText: () => i18n.t('Remove'),
+    }
+
+    render() {
+        const {
+            accept,
+            buttonLabel = FileInputFieldWithList.defaultProps.buttonLabel,
+            className,
+            dataTest = 'dhis2-uiwidgets-fileinputfieldwithlist',
+            disabled,
+            error,
+            files = [],
+            helpText,
+            initialFocus,
+            label,
+            large,
+            multiple,
+            name,
+            onBlur,
+            onFocus,
+            onKeyDown,
+            placeholder = FileInputFieldWithList.defaultProps.placeholder,
+            removeText = FileInputFieldWithList.defaultProps.removeText,
+            required,
+            small,
+            tabIndex,
+            valid,
+            validationText,
+            warning,
+        } = this.props
+
+        return (
+            <FileInputField
+                accept={accept}
+                buttonLabel={translate(buttonLabel)}
+                className={className}
+                dataTest={dataTest}
+                disabled={disabled || (!multiple && files.length >= 1)}
+                error={error}
+                helpText={helpText}
+                initialFocus={initialFocus}
+                label={label}
+                large={large}
+                multiple={multiple}
+                name={name}
+                onBlur={onBlur}
+                onChange={this.handleChange}
+                onFocus={onFocus}
+                onKeyDown={onKeyDown}
+                placeholder={translate(placeholder)}
+                required={required}
+                small={small}
+                tabIndex={tabIndex}
+                valid={valid}
+                validationText={validationText}
+                warning={warning}
+            >
+                {files.length > 0 &&
+                    files.map((file) => (
+                        <FileListItemWithRemove
+                            key={file.name}
+                            label={file.name}
+                            removeText={translate(removeText)}
+                            onRemove={this.handleRemove}
+                            file={file}
+                        />
+                    ))}
+            </FileInputField>
+        )
+    }
+}
+
+FileInputFieldWithList.propTypes = {
+    /** Called with signature `({ name: string, files: [File] }, event)` */
+    onChange: PropTypes.func.isRequired,
+    /** The `accept` attribute of the [native file input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept) */
+    accept: PropTypes.string,
+    /** Text on the button */
+    buttonLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+    className: PropTypes.string,
+    dataTest: PropTypes.string,
+    /** Disables the button */
+    disabled: PropTypes.bool,
+    /** Applies 'error' styling to the button and validation text. Mutually exclusive with `warning` and `valid` props */
+    error: sharedPropTypes.statusPropType,
+    files: PropTypes.arrayOf(PropTypes.instanceOf(File)),
+    /** Useful guiding text for the user */
+    helpText: PropTypes.string,
+    initialFocus: PropTypes.bool,
+    /** A descriptive label above the button */
+    label: PropTypes.string,
+    /** Size of the button. Mutually exclusive with the `small` prop */
+    large: sharedPropTypes.sizePropType,
+    /** The `multiple` attribute of the [native file input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#multiple) */
+    multiple: PropTypes.bool,
+    /** Name associated with input. Passed to event handler callbacks */
+    name: PropTypes.string,
+    /** Placeholder below the button */
+    placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+    /** Text used for the button that removes a file from the list */
+    removeText: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+    /** Adds an asterisk to indicate this field is required */
+    required: PropTypes.bool,
+    /** Size of the button. Mutually exclusive with the `large` prop */
+    small: sharedPropTypes.sizePropType,
+    tabIndex: PropTypes.string,
+    /** Applies 'valid' styling to the button and validation text. Mutually exclusive with `warning` and `error` props */
+    valid: sharedPropTypes.statusPropType,
+    /** Text below the button that provides validation feedback */
+    validationText: PropTypes.string,
+    /** Applies 'warning' styling to the button and validation text. Mutually exclusive with `valid` and `error` props */
+    warning: sharedPropTypes.statusPropType,
+    /** Called with signature `({ name: string, files: [] }, event)` */
+    onBlur: PropTypes.func,
+    /** Called with signature `({ name: string, files: [] }, event)` */
+    onFocus: PropTypes.func,
+    /** Called with signature `({ name: string, files: [] }, event)` */
+    onKeyDown: PropTypes.func,
+}
+
+export { FileInputFieldWithList }

package/src/file-input-field-with-list/file-input-field-with-list.prod.stories.js

@@ -0,0 +1,67 @@
+import { sharedPropTypes } from '@dhis2/ui-constants'
+import React from 'react'
+import { FileInputFieldWithList } from './file-input-field-with-list.js'
+
+const description = `
+A FileInputField with logic for creating a dynamic list of removable files from an array of \`File\` objects.
+
+\`\`\`js
+import { FileInputFieldWithList } from '@dhis2/ui'
+\`\`\`
+`
+
+const files = new Array(10)
+    .fill('dummy-file-name')
+    .map((name, i) => new File([], `${name}-${i + 1}.txt`))
+
+const onChange = ({ files }) => {
+    console.log('files: ', files)
+}
+
+export default {
+    title: 'File Input Field With List',
+    component: FileInputFieldWithList,
+    parameters: { docs: { description: { component: description } } },
+    args: {
+        // Handle default props bug (see Transfer stories)
+        dataTest: 'dhis2-uiwidgets-fileinputfieldwithlist',
+        files: [],
+        buttonLabel: 'Upload a file',
+        placeholder: 'No file uploaded yet',
+        removeText: 'Remove',
+        multiple: true,
+        onChange: onChange,
+        name: 'uploadName',
+    },
+    argTypes: {
+        small: { ...sharedPropTypes.sizeArgType },
+        large: { ...sharedPropTypes.sizeArgType },
+        valid: { ...sharedPropTypes.statusArgType },
+        warning: { ...sharedPropTypes.statusArgType },
+        error: { ...sharedPropTypes.statusArgType },
+    },
+}
+
+const Template = (args) => <FileInputFieldWithList {...args} />
+
+export const Default = Template.bind({})
+Default.args = {
+    buttonLabel: 'Upload file (custom label)',
+    files: files,
+    removeText: 'Custom remove text',
+}
+
+export const DefaultButtonLabelAndRemoveText = Template.bind({})
+DefaultButtonLabelAndRemoveText.args = { files: files }
+DefaultButtonLabelAndRemoveText.storyName =
+    'Default: buttonLabel and removeText'
+
+export const DefaultPlaceholder = Template.bind({})
+DefaultPlaceholder.storyName = 'Default: placeholder'
+
+export const RTL = (args) => (
+    <div dir="rtl">
+        <Template {...args} />
+    </div>
+)
+RTL.args = { files: files }

package/src/file-input-field-with-list/file-list-item-with-remove.js

@@ -0,0 +1,34 @@
+import PropTypes from 'prop-types'
+import React, { Component } from 'react'
+import { FileListItem } from '../file-list/index.js'
+
+class FileListItemWithRemove extends Component {
+    handleRemove = (event) => {
+        const { onRemove, file } = this.props
+
+        onRemove({ file }, event)
+    }
+
+    render() {
+        const { label, removeText, className } = this.props
+
+        return (
+            <FileListItem
+                label={label}
+                removeText={removeText}
+                onRemove={this.handleRemove}
+                className={className}
+            />
+        )
+    }
+}
+
+FileListItemWithRemove.propTypes = {
+    label: PropTypes.string.isRequired,
+    removeText: PropTypes.string.isRequired,
+    onRemove: PropTypes.func.isRequired,
+    className: PropTypes.string,
+    file: PropTypes.instanceOf(File),
+}
+
+export { FileListItemWithRemove }

package/src/file-input-field-with-list/index.js

@@ -0,0 +1 @@
+export { FileInputFieldWithList } from './file-input-field-with-list.js'

package/src/file-list/features/accepts_cancel_text/index.js

@@ -0,0 +1,14 @@
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given(
+    'a loading FileListItem with onCancel handler and cancelText is rendered',
+    () => {
+        cy.visitStory('FileListItem', 'Loading with on cancel and cancel text')
+    }
+)
+
+Then('the cancelText will be visible', () => {
+    cy.get('[data-test="dhis2-uicore-filelistitem-cancel"]')
+        .contains('Cancel')
+        .should('be.visible')
+})

package/src/file-list/features/accepts_cancel_text.feature

@@ -0,0 +1,5 @@
+Feature: The FileListItem accepts cancel text
+
+    Scenario: A FileListItem with cancel text
+        Given a loading FileListItem with onCancel handler and cancelText is rendered
+        Then the cancelText will be visible

package/src/file-list/features/accepts_label/index.js

@@ -0,0 +1,11 @@
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a FileListItem with label is rendered', () => {
+    cy.visitStory('FileListItem', 'With label')
+})
+
+Then('the label will be visible', () => {
+    cy.get('[data-test="dhis2-uicore-filelistitem"]')
+        .contains('Label')
+        .should('be.visible')
+})

package/src/file-list/features/accepts_label.feature

@@ -0,0 +1,5 @@
+Feature: The FileListItem accepts label
+
+    Scenario: A FileListItem with label text
+        Given a FileListItem with label is rendered
+        Then the label will be visible

package/src/file-list/features/accepts_remove_text/index.js

@@ -0,0 +1,11 @@
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a FileListItem with removeText is rendered', () => {
+    cy.visitStory('FileListItem', 'With remove text')
+})
+
+Then('the removeText will be visible', () => {
+    cy.get('[data-test="dhis2-uicore-filelistitem-remove"]')
+        .contains('Remove')
+        .should('be.visible')
+})

package/src/file-list/features/accepts_remove_text.feature

@@ -0,0 +1,5 @@
+Feature: The FileListItem accepts remove text
+
+    Scenario: A FileListItem with remove text
+        Given a FileListItem with removeText is rendered
+        Then the removeText will be visible

package/src/file-list/features/can_be_removed/index.js

@@ -0,0 +1,15 @@
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a FileListItem with Onremove handler is rendered', () => {
+    cy.visitStory('FileListItem', 'With on remove')
+})
+
+When('the user clicks on the remove text', () => {
+    cy.get('[data-test="dhis2-uicore-filelistitem-remove"]').click()
+})
+
+Then('the onRemove handler is called', () => {
+    cy.window().should((win) => {
+        expect(win.onRemove).to.be.calledWith({})
+    })
+})

package/src/file-list/features/can_be_removed.feature

@@ -0,0 +1,6 @@
+Feature: The FileListItem has an onRemove api
+
+    Scenario: The user removes a file
+        Given a FileListItem with Onremove handler is rendered
+        When the user clicks on the remove text
+        Then the onRemove handler is called

package/src/file-list/features/file-list-item-accepts_children/index.js

@@ -0,0 +1,10 @@
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a FileList with children is rendered', () => {
+    cy.visitStory('FileList', 'With children')
+    cy.get('[data-test="dhis2-uicore-filelist"]').should('be.visible')
+})
+
+Then('the children are visible', () => {
+    cy.contains('I am a child').should('be.visible')
+})

package/src/file-list/features/file-list-item-accepts_children.feature

@@ -0,0 +1,5 @@
+Feature: The FileList renders children
+
+    Scenario: A FileList with children
+        Given a FileList with children is rendered
+        Then the children are visible

package/src/file-list/features/file-list-placeholder-accepts_children/index.js

@@ -0,0 +1,12 @@
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a FileListPlaceholder with children is rendered', () => {
+    cy.visitStory('FileListPlaceholder', 'With children')
+    cy.get('[data-test="dhis2-uicore-filelistplaceholder"]').should(
+        'be.visible'
+    )
+})
+
+Then('the children are visible', () => {
+    cy.contains('I am a child').should('be.visible')
+})

package/src/file-list/features/file-list-placeholder-accepts_children.feature

@@ -0,0 +1,5 @@
+Feature: The FileListPlaceholder renders children
+
+    Scenario: A FileListPlaceholder with children
+        Given a FileListPlaceholder with children is rendered
+        Then the children are visible

package/src/file-list/features/loading_can_be_cancelled/index.js

@@ -0,0 +1,15 @@
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a loading FileListItem with onCancel handler is rendered', () => {
+    cy.visitStory('FileListItem', 'Loading with on cancel')
+})
+
+When('the user clicks on the cancel text', () => {
+    cy.get('[data-test="dhis2-uicore-filelistitem-cancel"]').click()
+})
+
+Then('the onCancel handler is called', () => {
+    cy.window().should((win) => {
+        expect(win.onCancel).to.be.calledWith({})
+    })
+})

package/src/file-list/features/loading_can_be_cancelled.feature

@@ -0,0 +1,6 @@
+Feature: The FileListItem has an onCancel api
+
+    Scenario: The user cancels a file
+        Given a loading FileListItem with onCancel handler is rendered
+        When the user clicks on the cancel text
+        Then the onCancel handler is called

package/src/file-list/file-list-item.e2e.stories.js

@@ -0,0 +1,39 @@
+import React from 'react'
+import { FileListItem } from './file-list-item.js'
+
+window.onRemove = window.Cypress && window.Cypress.cy.stub()
+window.onCancel = window.Cypress && window.Cypress.cy.stub()
+
+export default { title: 'FileListItem' }
+export const WithOnRemove = () => (
+    <FileListItem
+        label="File list item"
+        onRemove={window.onRemove}
+        removeText="Remove"
+    />
+)
+export const LoadingWithOnCancel = () => (
+    <FileListItem
+        loading
+        label="File list item"
+        removeText="Remove"
+        onCancel={window.onCancel}
+        cancelText="Cancel"
+    />
+)
+export const LoadingWithOnCancelAndCancelText = () => (
+    <FileListItem
+        loading
+        label="File list item"
+        removeText="Remove"
+        onCancel={() => {}}
+        onRemove={() => {}}
+        cancelText="Cancel"
+    />
+)
+export const WithLabel = () => (
+    <FileListItem label="Label" removeText="Remove" onRemove={() => {}} />
+)
+export const WithRemoveText = () => (
+    <FileListItem label="Label" removeText="Remove" onRemove={() => {}} />
+)

package/src/file-list/file-list-item.js

@@ -0,0 +1,131 @@
+import { theme, colors, spacers } from '@dhis2/ui-constants'
+import { IconAttachment16 } from '@dhis2/ui-icons'
+import { CircularLoader } from '@dhis2-ui/loader'
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+const FileListItem = ({
+    className,
+    label,
+    onRemove,
+    removeText,
+    loading,
+    onCancel,
+    cancelText,
+    dataTest = 'dhis2-uicore-filelistitem',
+}) => {
+    const handleKeyDown = (event) => {
+        if (!onRemove) {
+            return
+        }
+        if (
+            event.key === 'Enter' ||
+            event.key === 'Backspace' ||
+            event.key === 'Delete'
+        ) {
+            onRemove({}, event)
+        }
+    }
+
+    return (
+        <p className={cx('selected-file', className)} data-test={dataTest}>
+            <span className="icon">
+                {loading ? (
+                    <CircularLoader extrasmall />
+                ) : (
+                    <IconAttachment16 color={colors.grey700} />
+                )}
+            </span>
+
+            <span className="text">
+                <span className="label">{label}</span>
+
+                {loading && onCancel && cancelText && (
+                    <span
+                        className="action"
+                        onClick={(event) => onCancel({}, event)}
+                        data-test={`${dataTest}-cancel`}
+                    >
+                        {cancelText}
+                    </span>
+                )}
+
+                {!loading && (
+                    <span
+                        className="action"
+                        onClick={(event) => onRemove({}, event)}
+                        data-test={`${dataTest}-remove`}
+                        tabIndex={0}
+                        onKeyDown={handleKeyDown}
+                    >
+                        {removeText}
+                    </span>
+                )}
+            </span>
+
+            <style jsx>{`
+                p {
+                    display: flex;
+                    margin: 0;
+                    padding-top: ${spacers.dp4};
+                }
+                span {
+                    display: inline-block;
+                }
+                .icon {
+                    margin-inline-end: 4px;
+                    flex-grow: 0;
+                    flex-shrink: 0;
+                    display: flex;
+                    padding-top: 1px;
+                }
+                .text {
+                    flex-grow: 1;
+                    flex-shrink: 1;
+                }
+                .label {
+                    font-size: 14px;
+                    color: ${colors.grey900};
+                    word-break: break-all;
+                }
+                .label::after {
+                    content: ' ';
+                    display: inline-block;
+                    width: 12px;
+                }
+                .action {
+                    font-size: 12px;
+                    line-height: 12px;
+                    margin-top: 0;
+                    text-decoration: underline;
+                    cursor: pointer;
+                    color: ${colors.grey700};
+                }
+                .action:hover {
+                    color: ${colors.red700};
+                }
+                .action:active {
+                    color: ${colors.red800};
+                }
+                .action:focus {
+                    outline: 3px solid ${theme.focus};
+                    outline-offset: 2px;
+                }
+            `}</style>
+        </p>
+    )
+}
+
+FileListItem.propTypes = {
+    onRemove: PropTypes.func.isRequired,
+    cancelText: PropTypes.string,
+    className: PropTypes.string,
+    dataTest: PropTypes.string,
+    label: PropTypes.string,
+    loading: PropTypes.bool,
+    removeText: PropTypes.string,
+    onCancel: PropTypes.func,
+}
+
+export { FileListItem }

package/src/file-list/file-list-placeholder.e2e.stories.js

@@ -0,0 +1,7 @@
+import React from 'react'
+import { FileListPlaceholder } from './file-list-placeholder.js'
+
+export default { title: 'FileListPlaceholder' }
+export const WithChildren = () => (
+    <FileListPlaceholder>I am a child</FileListPlaceholder>
+)

package/src/file-list/file-list-placeholder.js

@@ -0,0 +1,27 @@
+import { colors, spacers } from '@dhis2/ui-constants'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+const FileListPlaceholder = ({
+    children,
+    dataTest = 'dhis2-uicore-filelistplaceholder',
+}) => (
+    <p data-test={dataTest}>
+        {children}
+        <style jsx>{`
+            p {
+                margin: 0;
+                padding-top: ${spacers.dp4};
+                font-size: 14px;
+                color: ${colors.grey700};
+            }
+        `}</style>
+    </p>
+)
+
+FileListPlaceholder.propTypes = {
+    children: PropTypes.string,
+    dataTest: PropTypes.string,
+}
+
+export { FileListPlaceholder }

package/src/file-list/file-list.e2e.stories.js

@@ -0,0 +1,5 @@
+import React from 'react'
+import { FileList } from './file-list.js'
+
+export default { title: 'FileList' }
+export const WithChildren = () => <FileList>I am a child</FileList>