allowsJSX?: boolean
}): ShorthandFactory
-export function createShorthandFactory
({ Component, mappedProp, mappedArrayProp, allowsJSX }) {
+export function createShorthandFactory
({ Component, allowsJSX }) {
if (typeof Component !== 'function' && typeof Component !== 'string') {
throw new Error('createShorthandFactory() Component must be a string or function.')
}
@@ -135,8 +105,6 @@ export function createShorthandFactory
({ Component, mappedProp, mappedArrayPr
return (val, options: CreateShorthandOptions
) =>
createShorthand({
Component,
- mappedProp,
- mappedArrayProp,
allowsJSX,
valueOrRenderCallback: val,
options,
@@ -149,15 +117,11 @@ export function createShorthandFactory
({ Component, mappedProp, mappedArrayPr
function createShorthandFromValue
({
Component,
- mappedProp,
- mappedArrayProp,
value,
options,
allowsJSX = true,
}: {
Component: React.ElementType
- mappedProp?: string
- mappedArrayProp?: string
allowsJSX?: boolean
value?: ShorthandValue
options?: CreateShorthandOptions
@@ -169,16 +133,14 @@ function createShorthandFromValue
({
const valIsNoop = _.isNil(value) || typeof value === 'boolean'
if (valIsNoop && !options.render) return null
- const valIsPrimitive = typeof value === 'string' || typeof value === 'number'
const valIsPropsObject = _.isPlainObject(value)
- const valIsArray = _.isArray(value)
const valIsReactElement = React.isValidElement(value)
// unhandled type warning
if (process.env.NODE_ENV !== 'production') {
const displayName = typeof Component === 'string' ? Component : Component.displayName
- if (!valIsPrimitive && !valIsPropsObject && !valIsArray && !valIsReactElement && !valIsNoop) {
+ if (!valIsPropsObject && !valIsReactElement && !valIsNoop) {
/* eslint-disable-next-line no-console */
console.error(
[
@@ -221,18 +183,6 @@ function createShorthandFromValue
({
// Merge props
const props: Props
= { ...defaultProps, ...usersProps, ...overrideProps }
- const mappedHTMLProps = mappedProps[overrideProps.as || defaultProps.as]
-
- // Map prop for primitive value
- if (valIsPrimitive || valIsReactElement) {
- ;(props as any)[mappedHTMLProps || mappedProp || 'children'] = value
- }
-
- // Map prop for array value
- if (valIsArray) {
- ;(props as any)[mappedHTMLProps || mappedArrayProp || 'children'] = value
- }
-
// Merge className
if (defaultProps.className || overrideProps.className || usersProps.className) {
const mergedClassesNames = cx(
@@ -264,11 +214,6 @@ function createShorthandFromValue
({
// Use key or generate key
if (generateKey && _.isNil(props.key)) {
- if (valIsPrimitive) {
- // use string/number shorthand values as the key
- ;(props as any).key = value
- }
-
if (valIsReactElement) {
// use the key from React Element
const elementKey = (value as React.ReactElement).key
@@ -302,7 +247,7 @@ function createShorthandFromValue
({
}
// Create ReactElements from built up props
- if (valIsPrimitive || valIsPropsObject || valIsArray || valIsReactElement) {
+ if (valIsPropsObject || valIsReactElement) {
return React.createElement(Component, props)
}
@@ -312,23 +257,17 @@ function createShorthandFromValue
({
function createShorthandFromRenderCallback
({
Component,
renderCallback,
- mappedProp,
- mappedArrayProp,
allowsJSX,
options,
}: {
Component: React.ReactType
renderCallback: ShorthandRenderCallback
- mappedProp?: string
- mappedArrayProp?: string
allowsJSX?: boolean
options?: CreateShorthandOptions
}) {
const render: ShorthandRenderer
= (shorthandValue, renderTree) => {
return createShorthandFromValue({
Component,
- mappedProp,
- mappedArrayProp,
allowsJSX,
value: shorthandValue,
options: {
diff --git a/packages/react/test/specs/components/Attachment/Attachment-test.tsx b/packages/react/test/specs/components/Attachment/Attachment-test.tsx
index 3f683d3969..433ce02984 100644
--- a/packages/react/test/specs/components/Attachment/Attachment-test.tsx
+++ b/packages/react/test/specs/components/Attachment/Attachment-test.tsx
@@ -16,7 +16,7 @@ const getAttachment = (onClickAttachment: jest.Mock, onClickButton: jest.Mock):
{
describe('HTML accessibility rules validation', () => {
describe('icon button must have textual representation for screen readers', () => {
test('with title', async () =>
- await htmlIsAccessibilityCompliant(
-
,
))
@@ -70,7 +74,9 @@ describe('Button', () => {
await htmlIsAccessibilityCompliant(Simple test button ))
test('button with text and icon', async () =>
- await htmlIsAccessibilityCompliant(
@@ -27,8 +25,6 @@ type ShorthandConfig = {
const getShorthand = ({
Component = 'div',
defaultProps,
- mappedProp = '',
- mappedArrayProp = '',
overrideProps,
generateKey,
valueOrRenderCallback,
@@ -36,8 +32,6 @@ const getShorthand = ({
}: ShorthandConfig) =>
createShorthand({
Component,
- mappedProp,
- mappedArrayProp,
valueOrRenderCallback,
options: {
defaultProps,
@@ -93,19 +87,10 @@ const itAppliesDefaultProps = (valueOrRenderCallback: ShorthandValue) =>
})
}
-const itDoesNotIncludePropsFromMappedProp = valueOrRenderCallback => {
- test('does not include props from mappedProp', () => {
- const mappedProp = 'data-foo'
- const wrapper = shallow(getShorthand({ valueOrRenderCallback, mappedProp }))
-
- expect(wrapper.prop(mappedProp)).not.toBeDefined()
- })
-}
-
const itMergesClassNames = (
classNameSource: string,
extraClassName: string,
- shorthandConfig: { valueOrRenderCallback?: ShorthandValue; mappedProp?: string },
+ shorthandConfig: { valueOrRenderCallback?: ShorthandValue },
) => {
test(`merges defaultProps className and ${classNameSource} className`, () => {
const defaultProps = () => ({ className: 'default' })
@@ -124,28 +109,12 @@ const itMergesClassNames = (
})
}
-const itAppliesProps = (
- propsSource: string,
- expectedProps: Props,
- shorthandConfig: ShorthandConfig,
-) => {
- test(`applies props from the ${propsSource} props`, () => {
- testCreateShorthand(shorthandConfig, expectedProps)
- })
-}
-
const itOverridesDefaultProps = (propsSource, defaultProps, expectedProps, shorthandConfig) => {
test(`overrides defaultProps with ${propsSource} props`, () => {
testCreateShorthand({ defaultProps, ...shorthandConfig }, expectedProps)
})
}
-const mappedProps = {
- iframe: 'src',
- img: 'src',
- input: 'type',
-}
-
const itOverridesDefaultPropsWithFalseyProps = (propsSource, shorthandConfig) => {
test(`overrides defaultProps with falsey ${propsSource} props`, () => {
const defaultProps = () => ({ undef: '-', nil: '-', zero: '-', empty: '-' })
@@ -166,20 +135,13 @@ describe('factories', () => {
})
test('does not throw if passed a function Component', () => {
- const goodUsage = () =>
- createShorthandFactory({ Component: () =>
, mappedProp: 'children' })
+ const goodUsage = () => createShorthandFactory({ Component: () =>
})
expect(goodUsage).not.toThrowError()
})
test('does not throw if passed a string Component', () => {
- const goodUsage = () => createShorthandFactory({ Component: 'div', mappedProp: 'className' })
-
- expect(goodUsage).not.toThrowError()
- })
-
- test('does not throw if do not passed `mappedProp`', () => {
- const goodUsage = () => createShorthandFactory({ Component: () =>
})
+ const goodUsage = () => createShorthandFactory({ Component: 'div' })
expect(goodUsage).not.toThrowError()
})
@@ -189,7 +151,7 @@ describe('factories', () => {
const badComponents: any = [undefined, null, true, false, [], {}, 123]
_.each(badComponents, badComponent => {
- const badUsage = () => createShorthandFactory({ Component: badComponent, mappedProp: '' })
+ const badUsage = () => createShorthandFactory({ Component: badComponent })
expect(badUsage).toThrowError()
})
@@ -202,13 +164,13 @@ describe('factories', () => {
})
test('does not throw if passed a function Component', () => {
- const goodUsage = () => createShorthand({ Component: () =>
, mappedProp: '' })
+ const goodUsage = () => createShorthand({ Component: () =>
})
expect(goodUsage).not.toThrowError()
})
test('does not throw if passed a string Component', () => {
- const goodUsage = () => createShorthand({ Component: 'div', mappedProp: '' })
+ const goodUsage = () => createShorthand({ Component: 'div' })
expect(goodUsage).not.toThrowError()
})
@@ -218,7 +180,7 @@ describe('factories', () => {
const badComponents: any[] = [undefined, null, true, false, [], {}, 123]
_.each(badComponents, badComponent => {
- const badUsage = () => createShorthand({ Component: badComponent, mappedProp: '' })
+ const badUsage = () => createShorthand({ Component: badComponent })
expect(badUsage).toThrowError()
})
@@ -613,138 +575,14 @@ describe('factories', () => {
describe('from an element', () => {
itReturnsAValidElement(
)
itAppliesDefaultProps(
)
- itMergesClassNames('mappedProp', 'mapped', {
- valueOrRenderCallback:
,
- mappedProp: 'className',
- })
-
- itAppliesProps(
- 'mappedProp',
- { 'data-prop':
},
- {
- valueOrRenderCallback:
,
- mappedProp: 'data-prop',
- },
- )
- itOverridesDefaultProps(
- 'mappedProp',
- () => ({ some: 'defaults', overridden: null }),
- { some: 'defaults', overridden:
},
- {
- valueOrRenderCallback:
,
- mappedProp: 'overridden',
- },
- )
})
describe('from a string', () => {
itReturnsAValidElement('foo')
itAppliesDefaultProps('foo')
- itMergesClassNames('mappedProp', 'mapped', {
- valueOrRenderCallback: 'foo',
- mappedProp: 'className',
- })
-
- itAppliesProps(
- 'mappedProp',
- { 'data-prop': 'foo' },
- {
- valueOrRenderCallback: 'foo',
- mappedProp: 'data-prop',
- },
- )
-
- itOverridesDefaultProps(
- 'mappedProp',
- () => ({ some: 'defaults', overridden: 'false' }),
- { some: 'defaults', overridden: 'true' },
- {
- valueOrRenderCallback: 'true',
- mappedProp: 'overridden',
- },
- )
- const mappedProp = 'test-mapped-prop'
const value = 'test-value'
- describe(`when sending HTML tag `, () => {
- _.forEach(mappedProps, (val, as) => {
- const testMsg = `spreads { ${[mappedProps[as]]}: '${value}' }`
-
- describe(`'${as}' as 'as' prop to defaultProps`, () => {
- test(`overrides ${mappedProp} and ${testMsg}`, () => {
- testCreateShorthand(
- { mappedProp, valueOrRenderCallback: value, defaultProps: () => ({ as }) },
- { as, [mappedProps[as]]: value },
- )
- })
- })
-
- describe(`'${as}' as 'as' prop to overrideProps`, () => {
- test(`overrides ${mappedProp} and ${testMsg}`, () => {
- testCreateShorthand(
- { mappedProp, valueOrRenderCallback: value, overrideProps: { as } },
- { as, [mappedProps[as]]: value },
- )
- })
- })
-
- describe(`'${as}' as 'as' prop to overrideProps`, () => {
- test(`overrides defaultProps, ${mappedProp} and ${testMsg}`, () => {
- testCreateShorthand(
- {
- mappedProp,
- valueOrRenderCallback: value,
- defaultProps: () => ({ as: 'overriden' }),
- overrideProps: { as },
- },
- { as, [mappedProps[as]]: value },
- )
- })
- })
- })
- })
-
- describe(`when sending ${mappedProp} as mappedProp`, () => {
- const testMsg = `spreads { ${[mappedProp]}: '${value}' }`
-
- describe(`and an unsupported tag as 'as' prop to defaultProps`, () => {
- test(testMsg, () => {
- testCreateShorthand(
- {
- mappedProp,
- valueOrRenderCallback: value,
- defaultProps: () => ({ as: 'unsupported' }),
- },
- { as: 'unsupported', [mappedProp]: value },
- )
- })
- })
-
- describe(`and an unsupported tag as 'as' prop to overrideProps`, () => {
- test(testMsg, () => {
- testCreateShorthand(
- { mappedProp, valueOrRenderCallback: value, overrideProps: { as: 'unsupported' } },
- { as: 'unsupported', [mappedProp]: value },
- )
- })
- })
-
- describe(`an unsupported tag as 'as' prop to overrideProps and a supported tag to defaultProps`, () => {
- test(testMsg, () => {
- testCreateShorthand(
- {
- mappedProp,
- valueOrRenderCallback: value,
- defaultProps: () => ({ as: 'div' }),
- overrideProps: { as: 'unsupported' },
- },
- { as: 'unsupported', [mappedProp]: value },
- )
- })
- })
- })
-
describe(`when sending no mappedProp`, () => {
const testMsg = `spreads { children: '${value}' } by default`
@@ -784,7 +622,6 @@ describe('factories', () => {
describe('from a props object', () => {
itReturnsAValidElement({})
itAppliesDefaultProps({})
- itDoesNotIncludePropsFromMappedProp({})
itMergesClassNames('props object', 'user', {
valueOrRenderCallback: { className: 'user' },
})
@@ -803,28 +640,6 @@ describe('factories', () => {
})
})
- describe('from an array', () => {
- const mappedArrayProp = 'test-mapped-prop-ar-array'
- const value = ['test-value']
-
- describe(`when sending mappedArrayProp`, () => {
- const testMsg = `spreads { ${mappedArrayProp}: '${value}' }`
-
- describe(`and an unsupported tag as 'as' prop to defaultProps`, () => {
- test(testMsg, () => {
- testCreateShorthand(
- {
- mappedArrayProp,
- valueOrRenderCallback: value,
- defaultProps: () => ({ as: 'unsupported' }),
- },
- { as: 'unsupported', [mappedArrayProp]: value },
- )
- })
- })
- })
- })
-
describe('style', () => {
test('merges style prop', () => {
const defaultProps = () => ({ style: { left: 5 } })