@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
121 lines (120 loc) • 6.02 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.FormField = void 0;
const react_1 = __importDefault(require("react"));
const common_1 = require("@workday/canvas-kit-react/common");
const layout_1 = require("@workday/canvas-kit-react/layout");
const hooks_1 = require("./hooks");
const FormFieldInput_1 = require("./FormFieldInput");
const FormFieldLabel_1 = require("./FormFieldLabel");
const FormFieldHint_1 = require("./FormFieldHint");
const FormFieldContainer_1 = require("./FormFieldContainer");
const formFieldStencil_1 = require("./formFieldStencil");
const FormFieldField_1 = require("./FormFieldField");
/**
* Use `FormField` to wrap input components to make them accessible. You can customize the field
* by passing in `TextInput`, `Select`, `RadioGroup` and other form elements to `FormField.Input` through the `as` prop.
*
* ```tsx
* <FormField>
* <FormField.Label>First Name</FormField.Label>
* <FormField.Input as={TextInput} value={value} onChange={(e) => console.log(e)} />
* </FormField>
* ```
*
* @stencil formFieldStencil
*/
exports.FormField = (0, common_1.createContainer)('div')({
displayName: 'FormField',
modelHook: hooks_1.useFormFieldModel,
subComponents: {
/**
* `FormField.Input` will render any `inputs` passed to it via the `as` prop, including `TextInput`, `Select`, `Switch`, `TextArea`, `RadioGroup` or any custom input.
* `FromField.Input` will be associated with `FormField.Label` and `FormField.Hint` by a generated `id`. You can customize this `id` by passing `id` to `FormField`.
*
* **Note: If you pass in a custom input that is *not* as Canvas Kit input, you will have to handle the `error` prop, validation and styling. For a custom approach, reference our Custom storybook example.**
*
* ```tsx
* <FormField id='my-unique-id'>
* <FormField.Label>My Label Text</FormField.Label>
* <FormField.Input as={TextInput} onChange={(e) => console.log(e)} />
* <FormField>
* ```
*/
Input: FormFieldInput_1.FormFieldInput,
/**
* `FormField.Label` will render a `label` element that has a matching `id` to the `FormField.Input`.
*
* ```tsx
* <FormField>
* <FormField.Label>First Name</FormField.Label>
* <FormField.Input as={TextInput} value={value} onChange={(e) => console.log(e)} />
* </FormField>
* ```
*
* @stencil formFieldLabelStencil
*/
Label: FormFieldLabel_1.FormFieldLabel,
/**
* `FormField.Hint` will render any additional information you want to provide to the `FormField.Input`. If you
* set the `orientation` prop to `horizontal` you should use `FormField.Field` to properly align the hint with your `FormField.Input`.
*
* ```tsx
* <FormField>
* <FormField.Label>First Name</FormField.Label>
* <FormField.Input as={TextInput} value={value} onChange={(e) => console.log(e)} />
* <FormField.Hint>This is your hint text</FormField.Hint>
* </FormField>
* ```
*
* @stencil formFieldHintStencil
*/
Hint: FormFieldHint_1.FormFieldHint,
/**
* `FormField.Field` allows you to properly center `FormField.Label` when the `orientation` is set to `horizontal` and there is hint text..
*
* ```tsx
* <FormField orientation="horizontalStart">
* <FormField.Label>First Name</FormField.Label>
* <FormField.Container>
* <FormField.Input as={TextInput} value={value} onChange={(e) => console.log(e)} />
* <FormField.Hint>This is your hint text</FormField.Hint>
* </FormField.Container>
* </FormField>
* ```
*
* @stencil formFieldContainerStencil
* @deprecated `FormField.Container` is deprecated and will be removed in a future major version. Please use `FormField.Field` to always wrap `FormField.Input` and `FormField.Hint` to always ensure correct label and input alignment.
*/
Container: FormFieldContainer_1.FormFieldContainer,
/**
* `FormField.Field` allows you to customize container alignment and styles when wrapping your input and hint text.
* ```tsx
* <FormField orientation="horizontal">
* <FormField.Label>First Name</FormField.Label>
* <FormField.Field>
* <FormField.Input as={TextInput} value={value} onChange={(e) => console.log(e)} />
* <FormField.Hint>This is your hint text</FormField.Hint>
* </FormField.Field>
* </FormField>
* ```
*/
Field: FormFieldField_1.FormFieldField,
},
})(({ children, grow, orientation, ...elemProps }, Element, model) => {
// TODO: Remove this warning in v13 once we remove horizontal support in favor of horizontalStart and horizontalEnd.
if (process.env.NODE_ENV === 'development') {
if (orientation === 'horizontal') {
console.warn('FormField: Orientation option of "horizontal" is deprecated and will be removed in v13. Please update your types and value to use the string literal of "horizontalStart". The following values will be accepted in v13: "horizontalStart" | "horizontalEnd" | "vertical".');
}
}
return (react_1.default.createElement(Element, { ...(0, layout_1.mergeStyles)(elemProps, (0, formFieldStencil_1.formFieldStencil)({
grow,
orientation: model.state.orientation === 'horizontal' ? 'horizontalStart' : model.state.orientation,
error: model.state.error,
required: model.state.isRequired,
})) }, children));
});