Skip to content

Commit

Permalink
Rename Field View prop from isReadOnly to isDisabled (keystonejs#3023)
Browse files Browse the repository at this point in the history
  • Loading branch information
@gautamsi
gautamsi committed May 24, 2020
1 parent 777f470 commit b1f5a14
Show file tree
Hide file tree
Showing 28 changed files with 82 additions and 59 deletions.
1 change: 1 addition & 0 deletions .changeset/blue-ways-work.md
View file
Expand Up @@ -9,6 +9,7 @@

* Added `isReadOnly` option on field's `adminConfig`. Fields with this option set will be excluded from the `create` form, and set as disabled in the `update` form in the Admin UI.
* Updated the item detail page to include fields with access `{ update: false }` in a disabled state, rather than excluded the form.
* Updated all Field Views to accept `isDisabled` prop. When set to `true` this will disable the field input.

Example:

Expand Down
2 changes: 1 addition & 1 deletion packages/app-admin-ui/client/pages/Item/index.js
View file
Expand Up @@ -268,7 +268,7 @@ const ItemDetails = ({ list, item: initialData, itemErrors, onUpdate }) => {
field={field}
list={list}
item={item}
isReadOnly={isReadOnly}
isDisabled={isReadOnly}
errors={[
...(itemErrors[field.path] ? [itemErrors[field.path]] : []),
...(validationErrors[field.path] || []),
Expand Down
4 changes: 2 additions & 2 deletions packages/field-content/src/views/Field.js
View file
Expand Up @@ -24,7 +24,7 @@ class ErrorBoundary extends Component {
}
}

let ContentField = ({ field, value, onChange, autoFocus, errors, isReadOnly }) => {
let ContentField = ({ field, value, onChange, autoFocus, errors, isDisabled }) => {
const htmlID = `ks-content-editor-${field.path}`;

return (
Expand Down Expand Up @@ -62,7 +62,7 @@ let ContentField = ({ field, value, onChange, autoFocus, errors, isReadOnly }) =
padding: '16px 32px',
minHeight: 200,
}}
isReadOnly={isReadOnly}
isDisabled={isDisabled}
/>
)}
</ErrorBoundary>
Expand Down
4 changes: 2 additions & 2 deletions packages/field-content/src/views/editor/index.js
View file
Expand Up @@ -32,7 +32,7 @@ function getSchema(blocks) {
return schema;
}

function Stories({ value: editorState, onChange, blocks, className, id, isReadOnly }) {
function Stories({ value: editorState, onChange, blocks, className, id, isDisabled }) {
let schema = useMemo(() => {
return getSchema(blocks);
}, [blocks]);
Expand Down Expand Up @@ -75,7 +75,7 @@ function Stories({ value: editorState, onChange, blocks, className, id, isReadOn
onChange={({ value }) => {
onChange(value);
}}
readOnly={isReadOnly}
readOnly={isDisabled}
/>
<AddBlock editor={editor} editorState={editorState} blocks={blocks} />
<Toolbar {...{ editorState, editor, blocks }} />
Expand Down
6 changes: 3 additions & 3 deletions packages/fields-markdown/src/views/Field.js
View file
Expand Up @@ -62,7 +62,7 @@ const IconToolbarButton = ({ isActive, label, icon, tooltipPlacement = 'top', ..
);
};

export default function MarkdownField({ field, errors, value, onChange, isReadOnly }) {
export default function MarkdownField({ field, errors, value, onChange, isDisabled }) {
const htmlID = `ks-input-${field.path}`;
const accessError = errors.find(
error => error instanceof Error && error.name === 'AccessDeniedError'
Expand All @@ -87,7 +87,7 @@ export default function MarkdownField({ field, errors, value, onChange, isReadOn
icon={<Icon />}
onClick={action}
label={label}
disabled={isReadOnly}
disabled={isDisabled}
/>
);
})}
Expand Down Expand Up @@ -130,7 +130,7 @@ export default function MarkdownField({ field, errors, value, onChange, isReadOn
tabSize: '2',
lineWrapping: true,
addModeClass: true,
readOnly: isReadOnly,
readOnly: isDisabled,
}}
editorDidMount={editor => {
setTools(getTools(editor));
Expand Down
4 changes: 2 additions & 2 deletions packages/fields-wysiwyg-tinymce/src/views/Field.js
View file
Expand Up @@ -37,7 +37,7 @@ const GlobalStyles = () => (
/>
);

const WysiwygField = ({ onChange, autoFocus, field, errors, value: serverValue, isReadOnly }) => {
const WysiwygField = ({ onChange, autoFocus, field, errors, value: serverValue, isDisabled }) => {
const handleChange = value => {
if (typeof value === 'string') {
onChange(value);
Expand All @@ -63,7 +63,7 @@ const WysiwygField = ({ onChange, autoFocus, field, errors, value: serverValue,
init={{ ...defaultOptions, auto_focus: autoFocus, ...overrideOptions }}
onEditorChange={handleChange}
value={value}
isDisabled={isReadOnly}
disabled={isDisabled}
/>
</div>
</FieldContainer>
Expand Down
4 changes: 2 additions & 2 deletions packages/fields/src/types/CalendarDay/views/Field.js
View file
Expand Up @@ -6,7 +6,7 @@ import { FieldContainer, FieldLabel, FieldDescription, FieldInput } from '@arch-
import { TextDayPicker } from '@arch-ui/day-picker';
import { Alert } from '@arch-ui/alert';

const CalendarDayField = ({ autoFocus, field, value, errors, onChange, isReadOnly }) => {
const CalendarDayField = ({ autoFocus, field, value, errors, onChange, isDisabled }) => {
const htmlID = `ks-daypicker-${field.path}`;

return (
Expand All @@ -20,7 +20,7 @@ const CalendarDayField = ({ autoFocus, field, value, errors, onChange, isReadOnl
date={value}
format={field.config.format}
onChange={onChange}
disabled={isReadOnly}
disabled={isDisabled}
/>
</FieldInput>

Expand Down
4 changes: 2 additions & 2 deletions packages/fields/src/types/Checkbox/views/Field.js
View file
Expand Up @@ -6,7 +6,7 @@ import { FieldContainer, FieldLabel, FieldDescription, FieldInput } from '@arch-

import { CheckboxPrimitive } from '@arch-ui/controls';

const CheckboxField = ({ onChange, autoFocus, field, value, errors, isReadOnly }) => {
const CheckboxField = ({ onChange, autoFocus, field, value, errors, isDisabled }) => {
const handleChange = event => {
onChange(event.target.checked);
};
Expand All @@ -23,7 +23,7 @@ const CheckboxField = ({ onChange, autoFocus, field, value, errors, isReadOnly }
checked={checked}
onChange={handleChange}
id={htmlID}
isDisabled={isReadOnly}
isDisabled={isDisabled}
/>
<FieldLabel
htmlFor={htmlID}
Expand Down
12 changes: 6 additions & 6 deletions packages/fields/src/types/CloudinaryImage/views/Field.js
View file
Expand Up @@ -187,22 +187,22 @@ export default class CloudinaryImageField extends Component {
// ==============================

renderUploadButton = () => {
const { uploadButtonLabel, isReadOnly } = this.props;
const { uploadButtonLabel, isDisabled } = this.props;
const { changeStatus, isLoading } = this.state;

return (
<LoadingButton
onClick={this.openFileBrowser}
isLoading={isLoading}
variant="ghost"
isDisabled={isReadOnly}
isDisabled={isDisabled}
>
{uploadButtonLabel({ status: changeStatus })}
</LoadingButton>
);
};
renderCancelButton = () => {
const { cancelButtonLabel, isReadOnly } = this.props;
const { cancelButtonLabel, isDisabled } = this.props;
const { changeStatus } = this.state;

// possible states; no case for 'empty' as cancel is not rendered
Expand All @@ -219,14 +219,14 @@ export default class CloudinaryImageField extends Component {
}

return (
<Button onClick={onClick} variant="subtle" appearance={appearance} isDisabled={isReadOnly}>
<Button onClick={onClick} variant="subtle" appearance={appearance} isDisabled={isDisabled}>
{cancelButtonLabel({ status: changeStatus })}
</Button>
);
};

render() {
const { autoFocus, field, statusMessage, errors, isReadOnly } = this.props;
const { autoFocus, field, statusMessage, errors, isDisabled } = this.props;
const { changeStatus, errorMessage } = this.state;

const { file } = this.getFile();
Expand Down Expand Up @@ -274,7 +274,7 @@ export default class CloudinaryImageField extends Component {
name={field.path}
onChange={this.onChange}
type="file"
disabled={isReadOnly}
disabled={isDisabled}
/>
</FieldInput>
</FieldContainer>
Expand Down
4 changes: 2 additions & 2 deletions packages/fields/src/types/Color/views/Field.js
View file
Expand Up @@ -6,7 +6,7 @@ import Popout from '@arch-ui/popout';
import { Button } from '@arch-ui/button';
import SketchPicker from 'react-color/lib/Sketch';

const ColorField = ({ field, value: serverValue, errors, onChange, isReadOnly }) => {
const ColorField = ({ field, value: serverValue, errors, onChange, isDisabled }) => {
const value = serverValue || '';
const htmlID = `ks-input-${field.path}`;

Expand All @@ -24,7 +24,7 @@ const ColorField = ({ field, value: serverValue, errors, onChange, isReadOnly })
}, [value]);

const target = props => (
<Button {...props} variant="ghost" isDisabled={isReadOnly}>
<Button {...props} variant="ghost" isDisabled={isDisabled}>
{value ? (
<Fragment>
<div
Expand Down
4 changes: 2 additions & 2 deletions packages/fields/src/types/DateTime/views/Field.js
View file
Expand Up @@ -5,7 +5,7 @@ import { jsx } from '@emotion/core';
import { FieldContainer, FieldLabel, FieldDescription, FieldInput } from '@arch-ui/fields';
import { TextDayTimePicker } from '@arch-ui/day-picker';

const DateTimeField = ({ autoFocus, field, onChange, value, errors, isReadOnly }) => {
const DateTimeField = ({ autoFocus, field, onChange, value, errors, isDisabled }) => {
const htmlID = `ks-input-${field.path}`;

return (
Expand All @@ -18,7 +18,7 @@ const DateTimeField = ({ autoFocus, field, onChange, value, errors, isReadOnly }
date={value}
onChange={onChange}
autoFocus={autoFocus}
disabled={isReadOnly}
disabled={isDisabled}
/>
</FieldInput>
</FieldContainer>
Expand Down
4 changes: 2 additions & 2 deletions packages/fields/src/types/Decimal/views/Field.js
View file
Expand Up @@ -9,7 +9,7 @@ import {
} from '@arch-ui/fields';
import { Input } from '@arch-ui/input';

const DecimalField = ({ onChange, autoFocus, field, value, errors, isReadOnly }) => {
const DecimalField = ({ onChange, autoFocus, field, value, errors, isDisabled }) => {
const handleChange = event => {
const value = event.target.value;
onChange(value.replace(/[^0-9.,]+/g, ''));
Expand Down Expand Up @@ -48,7 +48,7 @@ const DecimalField = ({ onChange, autoFocus, field, value, errors, isReadOnly })
value={valueToString(value)}
onChange={handleChange}
id={htmlID}
disabled={isReadOnly}
disabled={isDisabled}
/>
</FieldInput>
</FieldContainer>
Expand Down
12 changes: 6 additions & 6 deletions packages/fields/src/types/File/views/Field.js
View file
Expand Up @@ -179,22 +179,22 @@ export default class FileField extends Component {
// ==============================

renderUploadButton = () => {
const { uploadButtonLabel, isReadOnly } = this.props;
const { uploadButtonLabel, isDisabled } = this.props;
const { changeStatus, isLoading } = this.state;

return (
<LoadingButton
onClick={this.openFileBrowser}
isLoading={isLoading}
variant="ghost"
isDisabled={isReadOnly}
isDisabled={isDisabled}
>
{uploadButtonLabel({ status: changeStatus })}
</LoadingButton>
);
};
renderCancelButton = () => {
const { cancelButtonLabel, isReadOnly } = this.props;
const { cancelButtonLabel, isDisabled } = this.props;
const { changeStatus } = this.state;

// possible states; no case for 'empty' as cancel is not rendered
Expand All @@ -211,14 +211,14 @@ export default class FileField extends Component {
}

return (
<Button onClick={onClick} variant="subtle" appearance={appearance} isDisabled={isReadOnly}>
<Button onClick={onClick} variant="subtle" appearance={appearance} isDisabled={isDisabled}>
{cancelButtonLabel({ status: changeStatus })}
</Button>
);
};

render() {
const { autoFocus, field, statusMessage, errors, isReadOnly } = this.props;
const { autoFocus, field, statusMessage, errors, isDisabled } = this.props;
const { changeStatus, errorMessage } = this.state;

const { file } = this.getFile();
Expand Down Expand Up @@ -265,7 +265,7 @@ export default class FileField extends Component {
name={field.path}
onChange={this.onChange}
type="file"
disabled={isReadOnly}
disabled={isDisabled}
/>
</FieldInput>
</FieldContainer>
Expand Down
4 changes: 2 additions & 2 deletions packages/fields/src/types/Float/views/Field.js
View file
Expand Up @@ -3,7 +3,7 @@ import React from 'react';
import { FieldContainer, FieldLabel, FieldDescription, FieldInput } from '@arch-ui/fields';
import { Input } from '@arch-ui/input';

const FloatField = ({ onChange, autoFocus, field, value, errors, isReadOnly }) => {
const FloatField = ({ onChange, autoFocus, field, value, errors, isDisabled }) => {
const handleChange = event => {
const value = event.target.value;
// Similar implementation as per old Keystone version
Expand Down Expand Up @@ -39,7 +39,7 @@ const FloatField = ({ onChange, autoFocus, field, value, errors, isReadOnly }) =
value={valueToString(value)}
onChange={handleChange}
id={htmlID}
disabled={isReadOnly}
disabled={isDisabled}
/>
</FieldInput>
</FieldContainer>
Expand Down
4 changes: 2 additions & 2 deletions packages/fields/src/types/Integer/views/Field.js
View file
Expand Up @@ -3,7 +3,7 @@ import React from 'react';
import { FieldContainer, FieldLabel, FieldDescription, FieldInput } from '@arch-ui/fields';
import { Input } from '@arch-ui/input';

const IntegerField = ({ onChange, autoFocus, field, value, errors, isReadOnly }) => {
const IntegerField = ({ onChange, autoFocus, field, value, errors, isDisabled }) => {
const handleChange = event => {
const value = event.target.value;
onChange(value.replace(/\D/g, ''));
Expand Down Expand Up @@ -36,7 +36,7 @@ const IntegerField = ({ onChange, autoFocus, field, value, errors, isReadOnly })
value={valueToString(value)}
onChange={handleChange}
id={htmlID}
disabled={isReadOnly}
disabled={isDisabled}
/>
</FieldInput>
</FieldContainer>
Expand Down
4 changes: 2 additions & 2 deletions packages/fields/src/types/Location/views/Field.js
View file
Expand Up @@ -13,7 +13,7 @@ const LocationField = ({
onChange,
google,
renderContext,
isReadOnly,
isDisabled,
}) => {
const { googlePlaceID, formattedAddress, lat, lng } = serverValue || {};
const htmlID = `ks-input-${field.path}`;
Expand Down Expand Up @@ -97,7 +97,7 @@ const LocationField = ({
inputId={htmlID}
instanceId={htmlID}
css={{ width: '100%' }}
isDisabled={isReadOnly}
isDisabled={isDisabled}
{...selectProps}
/>
{marker && (
Expand Down
4 changes: 2 additions & 2 deletions packages/fields/src/types/OEmbed/views/Field.js
View file
Expand Up @@ -47,7 +47,7 @@ const OEmbedField = ({
value = null,
savedValue = null,
errors,
isReadOnly,
isDisabled,
}) => {
const handleChange = event => {
onChange({
Expand Down Expand Up @@ -76,7 +76,7 @@ const OEmbedField = ({
placeholder={canRead ? undefined : error.message}
onChange={handleChange}
id={htmlID}
disabled={isReadOnly}
disabled={isDisabled}
/>
</FieldInput>
{value && value.originalUrl && hasChanged && (
Expand Down

0 comments on commit b1f5a14

Please sign in to comment.