+
{actualErrorMessages.map((message, index) => (
))}
-
+
- {addIdToFirstInput(children, managedHtmlFor, describedbyIds)}
+ {decorateFirstInputElement(children, {
+ managedHtmlFor,
+ describedbyIds,
+ error: actualErrorMessages.length > 0,
+ })}
{supplementaryMessage && (
@@ -246,62 +253,93 @@ export const ActualFormControl: React.FC = ({
)
}
-const addIdToFirstInput = (children: ReactNode, managedHtmlFor: string, describedbyIds: string) => {
+type DecorateFirstInputElementParams = {
+ managedHtmlFor: string
+ describedbyIds: string
+ error: boolean
+}
+
+const decorateFirstInputElement = (
+ children: ReactNode,
+ params: DecorateFirstInputElementParams,
+) => {
+ const { managedHtmlFor, describedbyIds, error } = params
let foundFirstInput = false
- const addId = (targets: ReactNode): ReactNode[] | ReactNode =>
+ const decorate = (targets: ReactNode): ReactNode[] | ReactNode =>
React.Children.map(targets, (child) => {
if (foundFirstInput || !React.isValidElement(child)) {
return child
}
+ if (!isInputElement(child)) {
+ return React.cloneElement(child, {}, decorate(child.props.children))
+ }
- const { type } = child
-
- if (isInputElement(type)) {
- foundFirstInput = true
-
- const inputAttributes = {
- id: managedHtmlFor,
- ...(describedbyIds ? { 'aria-describedby': describedbyIds } : {}),
- }
+ foundFirstInput = true
- return React.cloneElement(child as ReactElement, {
- ...(isComboBoxElement(type) ? { inputAttributes } : inputAttributes),
- })
+ const inputAttributes: ComponentProps = {
+ id: managedHtmlFor,
+ }
+ if (error) {
+ inputAttributes.error = true
+ }
+ if (describedbyIds !== '') {
+ inputAttributes['aria-describedby'] = describedbyIds
}
- return React.cloneElement(child, {}, addId(child.props.children))
+ if (isComboBoxElement(child)) {
+ return React.cloneElement(child, { inputAttributes })
+ } else {
+ return React.cloneElement(child, inputAttributes)
+ }
})
- return addId(children)
+ return decorate(children)
}
+type InputComponent =
+ | typeof Input
+ | typeof CurrencyInput
+ | typeof Textarea
+ | typeof DatePicker
+ | typeof Select
+ | typeof SingleComboBox
+ | typeof MultiComboBox
+ | typeof InputFile
+ | typeof DropZone
+
/**
* - CheckBox / RadioButton は内部に label を含むため対象外
* - SearchInput は label を含むため対象外
* - InputWithTooltip は領域が狭く FormControl を置けない場所での使用を想定しているため対象外
*
- * @param type
+ * @param node
* @returns
*/
-const isInputElement = (type: string | React.JSXElementConstructor) => {
- const _type = isStyledComponent(type) ? type.target : type
+const isInputElement = (
+ element: ReactElement,
+): element is React.ReactComponentElement => {
+ const type = isStyledComponent(element.type) ? element.type.target : element.type
return (
- _type === Input ||
- _type === CurrencyInput ||
- _type === Textarea ||
- _type === DatePicker ||
- _type === Select ||
- _type === SingleComboBox ||
- _type === MultiComboBox ||
- _type === InputFile ||
- _type === DropZone
+ type === Input ||
+ type === CurrencyInput ||
+ type === Textarea ||
+ type === DatePicker ||
+ type === Select ||
+ type === SingleComboBox ||
+ type === MultiComboBox ||
+ type === InputFile ||
+ type === DropZone
)
}
-const isComboBoxElement = (type: string | React.JSXElementConstructor) => {
- const _type = isStyledComponent(type) ? type.target : type
- return _type === SingleComboBox || _type === MultiComboBox
+type ComboboxComponent = typeof SingleComboBox | typeof MultiComboBox
+
+const isComboBoxElement = (
+ element: ReactElement,
+): element is React.ReactComponentElement => {
+ const type = isStyledComponent(element.type) ? element.type.target : element.type
+ return type === SingleComboBox || type === MultiComboBox
}
export const FormControl: React.FC> = ActualFormControl
diff --git a/packages/smarthr-ui/src/components/Icon/Icon.stories.tsx b/packages/smarthr-ui/src/components/Icon/Icon.stories.tsx
index a287e87f67..40d36d620f 100644
--- a/packages/smarthr-ui/src/components/Icon/Icon.stories.tsx
+++ b/packages/smarthr-ui/src/components/Icon/Icon.stories.tsx
@@ -26,24 +26,24 @@ export const All: StoryFn = () => (
{Object.entries(Icons).map(([name, Icon]) => (
-
+
{name?.replace(/Icon$/, '')}
-
+
))}
旧名称（非推奨）
{Object.entries(DeprecatedIcons).map(([name, Icon]) => (
-
+
{name?.replace(/Icon$/, '')}
-
+
))}
@@ -158,7 +158,7 @@ export const GenerateIcon: StoryFn = () => {
)
}
-const ItemWrapper = styled(BaseColumn)`
+const StyledBaseColumn = styled(BaseColumn)`
${({ theme: { space } }) => css`
flex-basis: 10em;
diff --git a/packages/smarthr-ui/src/components/NotificationBar/NotificationBar.stories.tsx b/packages/smarthr-ui/src/components/NotificationBar/NotificationBar.stories.tsx
index 85233d397c..3ac1624c23 100644
--- a/packages/smarthr-ui/src/components/NotificationBar/NotificationBar.stories.tsx
+++ b/packages/smarthr-ui/src/components/NotificationBar/NotificationBar.stories.tsx
@@ -57,6 +57,7 @@ export const All: StoryFn = () => {
onClose={onClose}
/>
+
