-
Notifications
You must be signed in to change notification settings - Fork 378
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* force number field to display blank value when no value set * differentiate number and integer * do not unset value if selecting the same type * remove unecessary fragment * make sure scroll bar appears correctly for form * fix problem editing open object values * remove dead styles * fix ability to edit form title * add missing aria labels * send focus to key field after adding new value * translate error messages * do not default value to string * use simplified margin syntax * extract getValueType into utils Co-authored-by: Chris Whitten <christopher.whitten@microsoft.com>
- Loading branch information
1 parent
59c9b31
commit 4f1ae4f
Showing
13 changed files
with
273 additions
and
159 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
110 changes: 110 additions & 0 deletions
110
...er/packages/extensions/adaptive-form/src/components/fields/OpenObjectField/ObjectItem.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,110 @@ | ||
| // Copyright (c) Microsoft Corporation. | ||
| // Licensed under the MIT License. | ||
|
|
||
| /** @jsx jsx */ | ||
| import { jsx } from '@emotion/core'; | ||
| import React, { useState, useCallback, useMemo } from 'react'; | ||
| import { FontSizes, NeutralColors } from '@uifabric/fluent-theme'; | ||
| import { IconButton } from 'office-ui-fabric-react/lib/Button'; | ||
| import { IContextualMenuItem } from 'office-ui-fabric-react/lib/ContextualMenu'; | ||
| import formatMessage from 'format-message'; | ||
|
|
||
| import { EditableField } from '../EditableField'; | ||
|
|
||
| import { container, item } from './styles'; | ||
|
|
||
| interface ObjectItemProps { | ||
| name: string; | ||
| formData: any; | ||
| value: any; | ||
| onNameChange: (name: string) => void; | ||
| onValueChange: (value?: string) => void; | ||
| onDelete: () => void; | ||
| } | ||
|
|
||
| const ObjectItem: React.FC<ObjectItemProps> = ({ | ||
| name: originalName, | ||
| formData, | ||
| value, | ||
| onNameChange, | ||
| onValueChange, | ||
| onDelete, | ||
| }) => { | ||
| const initialName = useMemo(() => originalName, []); | ||
| const initialValue = useMemo(() => value, []); | ||
| const [name, setName] = useState<string>(originalName); | ||
| const [errorMessage, setErrorMessage] = useState<string>(''); | ||
|
|
||
| const contextItems: IContextualMenuItem[] = [ | ||
| { | ||
| iconProps: { iconName: 'Cancel' }, | ||
| key: 'remove', | ||
| onClick: onDelete, | ||
| text: 'Remove', | ||
| }, | ||
| ]; | ||
|
|
||
| const handleBlur = useCallback(() => { | ||
| if (!name || name === '') { | ||
| setErrorMessage(formatMessage('Key cannot be blank')); | ||
| } else if (name !== originalName && Object.keys(formData).includes(name)) { | ||
| setErrorMessage(formatMessage('Keys must be unique')); | ||
| } else { | ||
| onNameChange(name); | ||
| setErrorMessage(''); | ||
| } | ||
| }, [name, formData]); | ||
|
|
||
| return ( | ||
| <div css={container}> | ||
| <div css={item}> | ||
| <EditableField | ||
| transparentBorder | ||
| depth={0} | ||
| error={errorMessage} | ||
| id={`${name}.key`} | ||
| name="key" | ||
| placeholder={initialName || formatMessage('Add a new key')} | ||
| schema={{}} | ||
| styles={{ | ||
| errorMessage: { display: 'block', paddingTop: 0 }, | ||
| root: { margin: '7px 0' }, | ||
| }} | ||
| uiOptions={{}} | ||
| value={name} | ||
| onBlur={handleBlur} | ||
| onChange={newValue => setName(newValue || '')} | ||
| ariaLabel={formatMessage('key')} | ||
| /> | ||
| </div> | ||
| <div css={item}> | ||
| <EditableField | ||
| transparentBorder | ||
| depth={0} | ||
| id={`${name}.value`} | ||
| name="value" | ||
| placeholder={initialValue || formatMessage('Add a new value')} | ||
| schema={{}} | ||
| styles={{ | ||
| root: { margin: '7px 0' }, | ||
| }} | ||
| uiOptions={{}} | ||
| value={value} | ||
| onChange={onValueChange} | ||
| ariaLabel={formatMessage('value')} | ||
| /> | ||
| </div> | ||
| <IconButton | ||
| ariaLabel={formatMessage('Edit Property')} | ||
| menuIconProps={{ iconName: 'MoreVertical' }} | ||
| menuProps={{ items: contextItems }} | ||
| styles={{ | ||
| root: { margin: '7px 0 7px 0' }, | ||
| menuIcon: { color: NeutralColors.black, fontSize: FontSizes.size16 }, | ||
| }} | ||
| /> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export { ObjectItem }; |
Oops, something went wrong.