Skip to content
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

Jump to bottom

semantic-ui: Use getDisplayLabel to properly show labels for widgets #2225

Merged
merged 6 commits into from
Aug 12, 2021
Merged

semantic-ui: Use getDisplayLabel to properly show labels for widgets #2225

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
3faee3e
feat: add button,email,date widgets
jacques-trixta Feb 8, 2021
cfedfa0
Merge branch 'master' into feature/use_get_display_label_util
epicfaace Jun 25, 2021
e170306
fix: revert fluent-ui lock changes
jacques-trixta Jun 25, 2021
55fb91c
Merge branch 'master' into feature/use_get_display_label_util
jacqueswho Aug 12, 2021
73ac83c
Update packages/semantic-ui/src/TextWidget/TextWidget.js
epicfaace Aug 12, 2021
499d17a
Merge branch 'master' into feature/use_get_display_label_util
epicfaace Aug 12, 2021
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
3 changes: 1 addition & 2 deletions docs/api-reference/themes/semantic-ui/uiSchema.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,11 +106,10 @@ wrapLabel: wrap all labels in a div, for custom styling via CSS
```jsx
<Form
formContext={{
"semantic"={
"semantic" : {
"wrapLabel": true,
"wrapContent": true
}
uiSchema={uiSchema}
// other props...
}}
/>
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -368,7 +368,6 @@ export function getUiOptions(uiSchema) {
.filter(key => key.indexOf("ui:") === 0)
.reduce((options, key) => {
const value = uiSchema[key];

if (key === "ui:widget" && isObject(value)) {
console.warn(
"Setting options via ui:widget object is deprecated, use ui:options instead"
Expand Down Expand Up @@ -396,6 +395,7 @@ export function getDisplayLabel(schema, uiSchema, rootSchema) {
isMultiSelect(schema, rootSchema) ||
isFilesArray(schema, uiSchema, rootSchema);
}

if (schemaType === "object") {
displayLabel = false;
}
Expand Down
12 changes: 10 additions & 2 deletions packages/semantic-ui/src/CheckboxWidget/CheckboxWidget.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
/* eslint-disable react/prop-types */
import { utils } from "@rjsf/core";
import React from "react";
import { Form } from "semantic-ui-react";
import { getSemanticProps } from "../util";

const { getDisplayLabel } = utils;
function CheckboxWidget(props) {
const {
id,
Expand All @@ -17,8 +18,15 @@ function CheckboxWidget(props) {
options,
onFocus,
formContext,
schema,
uiSchema,
} = props;
const semanticProps = getSemanticProps({ formContext, options });
const displayLabel = getDisplayLabel(
schema,
uiSchema
/* TODO: , rootSchema */
);
const _onChange = (event, data) => onChange && onChange(data.checked);
const _onBlur = () => onBlur && onBlur(id, value);
const _onFocus = () => onFocus && onFocus(id, value);
Expand All @@ -34,7 +42,7 @@ function CheckboxWidget(props) {
onBlur={_onBlur}
onFocus={_onFocus}
required={required}
label={label}
label={displayLabel ? label || schema.title : false}
/>
);
}
Expand Down
27 changes: 14 additions & 13 deletions packages/semantic-ui/src/CheckboxesWidget/CheckboxesWidget.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,19 +16,20 @@ function deselectValue(value, selected) {
return selected.filter(v => v !== value);
}

function CheckboxesWidget({
id,
disabled,
options,
value,
autofocus,
readonly,
onChange,
onBlur,
onFocus,
formContext,
schema,
}) {
function CheckboxesWidget(props) {
const {
jacqueswho marked this conversation as resolved.
Show resolved Hide resolved
id,
disabled,
options,
value,
autofocus,
readonly,
onChange,
onBlur,
onFocus,
formContext,
schema,
} = props;
const { enumOptions, enumDisabled, inline } = options;
const { title } = schema;
const semanticProps = getSemanticProps({ formContext, options });
Expand Down
45 changes: 26 additions & 19 deletions packages/semantic-ui/src/PasswordWidget/PasswordWidget.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,35 +3,42 @@ import React from "react";
import PropTypes from "prop-types";
import { Form } from "semantic-ui-react";
import { getSemanticProps } from "../util";

function PasswordWidget({
id,
required,
readonly,
disabled,
label,
name,
value,
onChange,
onBlur,
onFocus,
autofocus,
options,
schema,
formContext,
}) {
import { utils } from "@rjsf/core";
const { getDisplayLabel } = utils;
function PasswordWidget(props) {
const {
jacqueswho marked this conversation as resolved.
Show resolved Hide resolved
id,
required,
readonly,
disabled,
label,
name,
value,
onChange,
onBlur,
onFocus,
autofocus,
options,
schema,
uiSchema,
formContext,
} = props;
const semanticProps = getSemanticProps({ formContext, options });
// eslint-disable-next-line no-shadow
const _onChange = ({ target: { value } }) =>
onChange && onChange(value === "" ? options.emptyValue : value);
const _onBlur = () => onBlur && onBlur(id, value);
const _onFocus = () => onFocus && onFocus(id, value);

const displayLabel = getDisplayLabel(
schema,
uiSchema
/* TODO: , rootSchema */
);
return (
<Form.Input
id={id}
key={id}
label={label || schema.title}
label={displayLabel ? label || schema.title : false}
autoFocus={autofocus}
required={required}
disabled={disabled || readonly}
Expand Down
30 changes: 15 additions & 15 deletions packages/semantic-ui/src/RangeWidget/RangeWidget.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,21 +6,21 @@ import { utils } from '@rjsf/core';
import { getSemanticProps } from "../util";

const { rangeSpec } = utils;
function RangeWidget({
value,
readonly,
disabled,
onBlur,
onFocus,
options,
schema,
onChange,
required,
label,
name,
id,
formContext,
}) {
function RangeWidget(props) {
jacqueswho marked this conversation as resolved.
Show resolved Hide resolved
const {
value,
readonly,
disabled,
onBlur,
onFocus,
options,
schema,
onChange,
required,
name,
id,
formContext,
} = props;
const semanticProps = getSemanticProps({ formContext, options });

// eslint-disable-next-line no-shadow
Expand Down
37 changes: 21 additions & 16 deletions packages/semantic-ui/src/SelectWidget/SelectWidget.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { utils } from '@rjsf/core';
import PropTypes from "prop-types";
import { getSemanticProps } from "../util";


const { asNumber, guessType } = utils;

const nums = new Set(["number", "integer"]);
Expand Down Expand Up @@ -59,22 +60,24 @@ const processValue = (schema, value) => {
return value;
};

function SelectWidget({
schema,
id,
options,
name,
required,
disabled,
readonly,
value,
multiple,
placeholder,
autofocus,
onChange,
onBlur,
onFocus,
}) {
function SelectWidget(props) {
const {
jacqueswho marked this conversation as resolved.
Show resolved Hide resolved
schema,
id,
label,
options,
name,
required,
disabled,
readonly,
value,
multiple,
placeholder,
autofocus,
onChange,
onBlur,
onFocus,
} = props;
const semanticProps = getSemanticProps({ options });
const { enumDisabled, enumOptions } = options;
const emptyValue = multiple ? [] : "";
Expand All @@ -94,10 +97,12 @@ function SelectWidget({
// eslint-disable-next-line no-shadow
target: { value },
}) => onFocus && onFocus(id, processValue(schema, value));

return (
<Form.Dropdown
key={id}
name={name}
label={label || schema.title}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shouldn't we use getDisplayLabel here as well?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think so, as I have seen all other themes not do this? must be a reason why, unless you see otherwise I can do the same

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's probably a mistake, I think all widgets should be using getDisplayLabel even in other themes. For now, though, let's just leave it as is for consistency.

multiple={typeof multiple === "undefined" ? false : multiple}
value={typeof value === "undefined" ? emptyValue : value}
disabled={disabled}
Expand Down
47 changes: 27 additions & 20 deletions packages/semantic-ui/src/TextWidget/TextWidget.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,39 +3,46 @@ import React from "react";
import PropTypes from "prop-types";
import { Form } from "semantic-ui-react";
import { getSemanticProps } from "../util";

function TextWidget({
id,
placeholder,
required,
readonly,
disabled,
name,
label,
schema,
value,
onChange,
onBlur,
onFocus,
autofocus,
options,
formContext,
}) {
import { utils } from "@rjsf/core";
const { getDisplayLabel } = utils;
function TextWidget(props) {
const {
id,
placeholder,
required,
readonly,
disabled,
name,
label,
schema,
uiSchema,
value,
onChange,
onBlur,
onFocus,
autofocus,
options,
formContext,
} = props;
const semanticProps = getSemanticProps({ formContext, options });
// eslint-disable-next-line no-shadow
const _onChange = ({ target: { value } }) =>
onChange(value === "" ? options.emptyValue : value);
const _onBlur = () => onBlur && onBlur(id, value);
const _onFocus = () => onFocus && onFocus(id, value);
const inputType = schema.type === 'string' ? 'text' : `${schema.type}`;

const displayLabel = getDisplayLabel(
schema,
uiSchema
/* TODO: , rootSchema */
);
return (
<Form.Input
key={id}
id={id}
placeholder={placeholder}
type={inputType}
label={schema.title || label}
label={displayLabel ? label || schema.title : false}
required={required}
autoFocus={autofocus}
disabled={disabled || readonly}
Expand Down
47 changes: 27 additions & 20 deletions packages/semantic-ui/src/TextareaWidget/TextareaWidget.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,36 +3,43 @@ import React from "react";
import PropTypes from "prop-types";
import { Form } from "semantic-ui-react";
import { getSemanticProps } from "../util";

function TextareaWidget({
id,
placeholder,
value,
required,
disabled,
autofocus,
label,
name,
readonly,
onBlur,
onFocus,
onChange,
options,
schema,
formContext,
}) {
import { utils } from "@rjsf/core";
const { getDisplayLabel } = utils;
function TextareaWidget(props) {
const {
jacqueswho marked this conversation as resolved.
Show resolved Hide resolved
id,
placeholder,
value,
required,
disabled,
autofocus,
label,
name,
readonly,
onBlur,
onFocus,
onChange,
options,
schema,
uiSchema,
formContext,
} = props;
const semanticProps = getSemanticProps({ formContext, options });
// eslint-disable-next-line no-shadow
const _onChange = ({ target: { value } }) =>
onChange && onChange(value === "" ? options.emptyValue : value);
const _onBlur = () => onBlur && onBlur(id, value);
const _onFocus = () => onFocus && onFocus(id, value);

const displayLabel = getDisplayLabel(
schema,
uiSchema
/* TODO: , rootSchema */
);
return (
<Form.TextArea
id={id}
key={id}
label={schema.title || label}
label={displayLabel ? label || schema.title : false}
placeholder={placeholder}
autoFocus={autofocus}
required={required}
Expand Down
Loading