Skip to content
This repository was archived by the owner on Mar 4, 2020. It is now read-only.

Commit 723f829

Browse files
author
Alexandru Buliga
authored
feat(factories): createShorthandFactory API update and removing HTML factories (#376)
* feat(slot): slot factory proposal * reimplementation after comments * Merge branch 'master' into feat/reusing-common-proptypes # Conflicts: # src/components/Chat/ChatItem.tsx # src/components/Chat/ChatMessage.tsx # src/components/Segment/Segment.tsx # src/components/Slot/Slot.tsx * -merge conflicts * fixed more stuff * fixed tests * amended changelog * fixed last tests * removed Slot from exported members * fixed test type errors after merge with master * removed changelog entry * addressed last review comments
1 parent 267b46a commit 723f829

File tree

30 files changed

+290
-170
lines changed

30 files changed

+290
-170
lines changed

‎src/components/Accordion/AccordionContent.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,6 @@ class AccordionContent extends UIComponent<Extendable<AccordionContentProps>, an
5959
}
6060
}
6161

62-
AccordionContent.create = createShorthandFactory(AccordionContent, content => ({ content }))
62+
AccordionContent.create = createShorthandFactory(AccordionContent, 'content')
6363

6464
export default AccordionContent

‎src/components/Accordion/AccordionTitle.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,6 @@ class AccordionTitle extends UIComponent<Extendable<AccordionTitleProps>, any> {
7777
}
7878
}
7979

80-
AccordionTitle.create = createShorthandFactory(AccordionTitle, content => ({ content }))
80+
AccordionTitle.create = createShorthandFactory(AccordionTitle, 'content')
8181

8282
export default AccordionTitle

‎src/components/Attachment/Attachment.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
import * as _ from 'lodash'
21
import * as PropTypes from 'prop-types'
32
import * as React from 'react'
4-
5-
import { UIComponent, customPropTypes, createShorthandFactory, createHTMLDivision } from '../../lib'
3+
import * as _ from 'lodash'
4+
import { UIComponent, customPropTypes, createShorthandFactory } from '../../lib'
65
import { Extendable, ShorthandRenderFunction, ShorthandValue } from '../../../types/utils'
76
import Icon from '../Icon/Icon'
87
import Button from '../Button/Button'
98
import Text from '../Text/Text'
9+
import Slot from '../Slot/Slot'
1010
import { UIComponentProps, ChildrenComponentProps } from '../../lib/commonPropInterfaces'
1111
import { commonUIComponentPropTypes, childrenComponentPropTypes } from '../../lib/commonPropTypes'
1212

@@ -147,7 +147,7 @@ class Attachment extends UIComponent<Extendable<AttachmentProps>, any> {
147147
</div>
148148
)}
149149
{!_.isNil(progress) &&
150-
createHTMLDivision('', {
150+
Slot.create('', {
151151
defaultProps: { className: classes.progress },
152152
render: renderProgress,
153153
})}
@@ -156,6 +156,6 @@ class Attachment extends UIComponent<Extendable<AttachmentProps>, any> {
156156
}
157157
}
158158

159-
Attachment.create = createShorthandFactory(Attachment, header => ({ header }))
159+
Attachment.create = createShorthandFactory(Attachment, 'header')
160160

161161
export default Attachment

‎src/components/Avatar/Avatar.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,6 @@ class Avatar extends UIComponent<Extendable<AvatarProps>, any> {
121121
!renderImage &&
122122
Label.create(label || {}, {
123123
defaultProps: {
124-
as: 'div',
125124
content: getInitials(name),
126125
circular: true,
127126
title: name,
@@ -144,7 +143,7 @@ class Avatar extends UIComponent<Extendable<AvatarProps>, any> {
144143
}
145144
}
146145

147-
Avatar.create = createShorthandFactory(Avatar, name => ({ name }))
146+
Avatar.create = createShorthandFactory(Avatar, 'name')
148147

149148
export default Avatar
150149

‎src/components/Button/Button.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import * as _ from 'lodash'
44

55
import { UIComponent, childrenExist, customPropTypes, createShorthandFactory } from '../../lib'
66
import Icon from '../Icon/Icon'
7-
import { createSlot } from '../Slot/Slot'
7+
import Slot from '../Slot/Slot'
88
import { buttonBehavior } from '../../lib/accessibility'
99
import { Accessibility } from '../../lib/accessibility/types'
1010
import {
@@ -155,7 +155,7 @@ class Button extends UIComponent<Extendable<ButtonProps>, ButtonState> {
155155
>
156156
{hasChildren && children}
157157
{!hasChildren && iconPosition !== 'after' && this.renderIcon(variables, styles)}
158-
{createSlot(!hasChildren && content, {
158+
{Slot.create(!hasChildren && content, {
159159
defaultProps: { as: 'span', className: classes.content },
160160
})}
161161
{!hasChildren && iconPosition === 'after' && this.renderIcon(variables, styles)}
@@ -194,6 +194,6 @@ class Button extends UIComponent<Extendable<ButtonProps>, ButtonState> {
194194
}
195195
}
196196

197-
Button.create = createShorthandFactory(Button, content => ({ content }))
197+
Button.create = createShorthandFactory(Button, 'content')
198198

199199
export default Button

‎src/components/Chat/ChatItem.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import * as React from 'react'
22
import * as PropTypes from 'prop-types'
33

44
import { childrenExist, createShorthandFactory, RenderResultConfig, UIComponent } from '../../lib'
5-
import { createSlot } from '../Slot/Slot'
5+
import Slot from '../Slot/Slot'
66
import { Extendable, ShorthandRenderFunction } from '../../../types/utils'
77
import {
88
UIComponentProps,
@@ -63,7 +63,7 @@ class ChatItem extends UIComponent<Extendable<ChatItemProps>, any> {
6363
<ElementType {...rest} className={classes.root}>
6464
{childrenExist(children)
6565
? children
66-
: createSlot(content, {
66+
: Slot.create(content, {
6767
styles: styles.content,
6868
variables: variables.content,
6969
render: renderContent,
@@ -73,6 +73,6 @@ class ChatItem extends UIComponent<Extendable<ChatItemProps>, any> {
7373
}
7474
}
7575

76-
ChatItem.create = createShorthandFactory(ChatItem, content => ({ content }))
76+
ChatItem.create = createShorthandFactory(ChatItem, 'content')
7777

7878
export default ChatItem

‎src/components/Chat/ChatMessage.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import { chatMessageBehavior } from '../../lib/accessibility'
2020
import { Accessibility, AccessibilityActionHandlers } from '../../lib/accessibility/types'
2121
import Layout from '../Layout/Layout'
2222
import Text from '../Text/Text'
23-
import { createSlot } from '../Slot/Slot'
23+
import Slot from '../Slot/Slot'
2424
import {
2525
UIComponentProps,
2626
ChildrenComponentProps,
@@ -197,7 +197,7 @@ class ChatMessage extends UIComponent<Extendable<ChatMessageProps>, any> {
197197
render: renderTimestamp,
198198
})
199199

200-
const contentElement = createSlot(content, {
200+
const contentElement = Slot.create(content, {
201201
styles: styles.content,
202202
variables: variables.content,
203203
render: renderContent,
@@ -225,6 +225,6 @@ class ChatMessage extends UIComponent<Extendable<ChatMessageProps>, any> {
225225
}
226226
}
227227

228-
ChatMessage.create = createShorthandFactory(ChatMessage, content => ({ content }))
228+
ChatMessage.create = createShorthandFactory(ChatMessage, 'content')
229229

230230
export default ChatMessage

‎src/components/Divider/Divider.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ class Divider extends UIComponent<Extendable<DividerProps>, any> {
6666
}
6767
}
6868

69-
Divider.create = createShorthandFactory(Divider, content => ({ content }))
69+
Divider.create = createShorthandFactory(Divider, 'content')
7070

7171
export default Divider
7272

‎src/components/Form/FormField.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ import * as React from 'react'
44
import { UIComponent, customPropTypes, childrenExist, createShorthandFactory } from '../../lib'
55
import { Extendable, ShorthandValue, ShorthandRenderFunction } from '../../../types/utils'
66
import Text from '../Text/Text'
7-
import { createSlot } from '../Slot/Slot'
87
import Input from '../Input/Input'
8+
import Slot from '../Slot/Slot'
99
import { UIComponentProps, ChildrenComponentProps } from '../../lib/commonPropInterfaces'
1010
import { commonUIComponentPropTypes, childrenComponentPropTypes } from '../../lib/commonPropTypes'
1111

@@ -131,7 +131,7 @@ class FormField extends UIComponent<Extendable<FormFieldProps>, any> {
131131
render: renderMessage,
132132
})
133133

134-
const controlElement = createSlot(control || {}, {
134+
const controlElement = Slot.create(control || {}, {
135135
defaultProps: { required, id, name, type, styles: styles.control },
136136
render: renderControl,
137137
})
@@ -158,6 +158,6 @@ class FormField extends UIComponent<Extendable<FormFieldProps>, any> {
158158
}
159159
}
160160

161-
FormField.create = createShorthandFactory(FormField, label => ({ label }))
161+
FormField.create = createShorthandFactory(FormField, 'label')
162162

163163
export default FormField

‎src/components/Header/HeaderDescription.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,6 @@ class HeaderDescription extends UIComponent<Extendable<HeaderDescriptionProps>,
4848
}
4949
}
5050

51-
HeaderDescription.create = createShorthandFactory(HeaderDescription, content => ({ content }))
51+
HeaderDescription.create = createShorthandFactory(HeaderDescription, 'content')
5252

5353
export default HeaderDescription

‎src/components/Icon/Icon.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,6 @@ class Icon extends UIComponent<Extendable<IconProps>, any> {
113113
}
114114
}
115115

116-
Icon.create = createShorthandFactory(Icon, name => ({ name }))
116+
Icon.create = createShorthandFactory(Icon, 'name')
117117

118118
export default Icon

‎src/components/Image/Image.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,6 @@ class Image extends UIComponent<Extendable<ImageProps>, any> {
6161
}
6262
}
6363

64-
Image.create = createShorthandFactory(Image, src => ({ src }))
64+
Image.create = createShorthandFactory(Image, 'src')
6565

6666
export default Image

‎src/components/Input/Input.tsx

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@ import {
1616
ComponentEventHandler,
1717
} from '../../../types/utils'
1818
import Icon from '../Icon/Icon'
19-
import { createHTMLInput, createSlot } from '../Slot/Slot'
2019
import Ref from '../Ref/Ref'
20+
import Slot from '../Slot/Slot'
2121
import { UIComponentProps, ChildrenComponentProps } from '../../lib/commonPropInterfaces'
2222
import { commonUIComponentPropTypes, childrenComponentPropTypes } from '../../lib/commonPropTypes'
2323

@@ -136,7 +136,7 @@ class Input extends AutoControlledComponent<Extendable<InputProps>, InputState>
136136

137137
static defaultProps = {
138138
type: 'text',
139-
wrapper: 'div',
139+
wrapper: {},
140140
iconPosition: 'end',
141141
}
142142

@@ -153,16 +153,16 @@ class Input extends AutoControlledComponent<Extendable<InputProps>, InputState>
153153
const { value = '' } = this.state
154154
const [htmlInputProps, rest] = partitionHTMLProps(restProps)
155155

156-
return createSlot(wrapper, {
156+
return Slot.create(wrapper, {
157157
defaultProps: {
158-
as: ElementType,
159158
className: cx(Input.className, className),
160159
children: (
161160
<>
162161
<Ref innerRef={this.handleInputRef}>
163-
{createHTMLInput(input || type, {
162+
{Slot.create(input || type, {
164163
defaultProps: {
165164
...htmlInputProps,
165+
as: 'input',
166166
type,
167167
value,
168168
className: classes.input,
@@ -184,6 +184,9 @@ class Input extends AutoControlledComponent<Extendable<InputProps>, InputState>
184184
styles: styles.root,
185185
...rest,
186186
},
187+
overrideProps: {
188+
as: (wrapper && (wrapper as any).as) || ElementType,
189+
},
187190
render: renderWrapper,
188191
})
189192
}

‎src/components/ItemLayout/ItemLayout.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -202,7 +202,7 @@ class ItemLayout extends UIComponent<Extendable<ItemLayoutProps>, any> {
202202
}
203203
}
204204

205-
ItemLayout.create = createShorthandFactory(ItemLayout, main => ({ main }))
205+
ItemLayout.create = createShorthandFactory(ItemLayout, 'main')
206206

207207
export default ItemLayout
208208

‎src/components/Label/Label.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -185,6 +185,6 @@ class Label extends UIComponent<Extendable<LabelProps>, any> {
185185
}
186186
}
187187

188-
Label.create = createShorthandFactory(Label, content => ({ content }))
188+
Label.create = createShorthandFactory(Label, 'content')
189189

190190
export default Label

‎src/components/List/ListItem.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -124,6 +124,6 @@ class ListItem extends UIComponent<Extendable<ListItemProps>, ListItemState> {
124124
}
125125
}
126126

127-
ListItem.create = createShorthandFactory(ListItem, main => ({ main }))
127+
ListItem.create = createShorthandFactory(ListItem, 'main')
128128

129129
export default ListItem

‎src/components/Menu/MenuItem.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -186,6 +186,6 @@ class MenuItem extends UIComponent<Extendable<MenuItemProps>, MenuItemState> {
186186
}
187187
}
188188

189-
MenuItem.create = createShorthandFactory(MenuItem, content => ({ content }))
189+
MenuItem.create = createShorthandFactory(MenuItem, 'content')
190190

191191
export default MenuItem

‎src/components/Popup/PopupContent.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,6 @@ class PopupContent extends UIComponent<Extendable<PopupContentProps>, any> {
5050
}
5151
}
5252

53-
PopupContent.create = createShorthandFactory(PopupContent, content => ({ content }))
53+
PopupContent.create = createShorthandFactory(PopupContent, 'content')
5454

5555
export default PopupContent

‎src/components/RadioGroup/RadioGroupItem.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -204,6 +204,6 @@ class RadioGroupItem extends AutoControlledComponent<
204204
}
205205
}
206206

207-
RadioGroupItem.create = createShorthandFactory(RadioGroupItem, () => ({}))
207+
RadioGroupItem.create = createShorthandFactory(RadioGroupItem)
208208

209209
export default RadioGroupItem

‎src/components/Segment/Segment.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { UIComponent, childrenExist } from '../../lib'
44
import { Extendable, ShorthandRenderFunction } from '../../../types/utils'
55
import { UIComponentProps, ContentComponentProps } from '../../lib/commonPropInterfaces'
66
import { commonUIComponentPropTypes, contentComponentPropsTypes } from '../../lib/commonPropTypes'
7-
import { createSlot } from '../Slot/Slot'
7+
import Slot from '../Slot/Slot'
88

99
export interface SegmentProps extends UIComponentProps<SegmentProps, any>, ContentComponentProps {
1010
/** A segment can have its colors inverted for contrast. */
@@ -43,7 +43,7 @@ class Segment extends UIComponent<Extendable<SegmentProps>, any> {
4343

4444
return (
4545
<ElementType {...rest} className={classes.root}>
46-
{childrenExist(children) ? children : createSlot(content, { render: renderContent })}
46+
{childrenExist(children) ? children : Slot.create(content, { render: renderContent })}
4747
</ElementType>
4848
)
4949
}

‎src/components/Slot/Slot.tsx

Lines changed: 6 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react'
2-
import { childrenExist, createShorthand } from '../../lib'
2+
import { childrenExist, createShorthandFactory } from '../../lib'
33
import {
44
UIComponentProps,
55
ContentComponentProps,
@@ -10,8 +10,7 @@ import {
1010
contentComponentPropsTypes,
1111
childrenComponentPropTypes,
1212
} from '../../lib/commonPropTypes'
13-
import createComponent from '../../lib/createComponent'
14-
import { MapValueToProps, Props } from 'types/utils'
13+
import createComponent, { CreateComponentReturnType } from '../../lib/createComponent'
1514

1615
export interface SlotProps
1716
extends UIComponentProps<SlotProps, any>,
@@ -21,7 +20,9 @@ export interface SlotProps
2120
/**
2221
* A Slot is a basic component (no default styles)
2322
*/
24-
const Slot = createComponent<SlotProps>({
23+
const Slot: CreateComponentReturnType<SlotProps> & {
24+
create?: Function
25+
} = createComponent<SlotProps>({
2526
displayName: 'Slot',
2627

2728
className: 'ui-slot',
@@ -44,15 +45,6 @@ const Slot = createComponent<SlotProps>({
4445
},
4546
})
4647

47-
const createSlotFactory = (as: any, mapValueToProps: MapValueToProps) => (
48-
val,
49-
options: Props = {},
50-
) => {
51-
options.defaultProps = { as, ...options.defaultProps }
52-
return createShorthand(Slot, mapValueToProps, val, options)
53-
}
54-
55-
export const createSlot = createSlotFactory(Slot.defaultProps.as, content => ({ content }))
56-
export const createHTMLInput = createSlotFactory('input', type => ({ type }))
48+
Slot.create = createShorthandFactory(Slot)
5749

5850
export default Slot

‎src/components/Status/Status.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ class Status extends UIComponent<Extendable<StatusProps>, any> {
7373
}
7474
}
7575

76-
Status.create = createShorthandFactory(Status, state => ({ state }))
76+
Status.create = createShorthandFactory(Status, 'state')
7777

7878
export default Status
7979
export type StatusPropsWithDefaults = StatusProps & typeof Status.defaultProps

‎src/components/Text/Text.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,6 @@ class Text extends UIComponent<Extendable<TextProps>, any> {
9393
}
9494
}
9595

96-
Text.create = createShorthandFactory(Text, content => ({ content }))
96+
Text.create = createShorthandFactory(Text, 'content')
9797

9898
export default Text

0 commit comments

Comments
 (0)