| 1 | {"version":3,"file":"warnControlledUsage.js","sourceRoot":"../src/","sources":["warn/warnControlledUsage.ts"],"names":[],"mappings":"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","sourcesContent":["import { warn } from './warn';\nimport { isControlled as checkIsControlled } from '../controlled';\n\ntype WarningMap = { [id: string]: boolean };\n\nlet warningsMap: {\n valueOnChange: WarningMap;\n valueDefaultValue: WarningMap;\n controlledToUncontrolled: WarningMap;\n uncontrolledToControlled: WarningMap;\n};\nif (process.env.NODE_ENV !== 'production') {\n warningsMap = {\n valueOnChange: {},\n valueDefaultValue: {},\n controlledToUncontrolled: {},\n uncontrolledToControlled: {},\n };\n}\n\n/** Reset controlled usage warnings for testing purposes. */\nexport function resetControlledWarnings(): void {\n if (process.env.NODE_ENV !== 'production') {\n warningsMap.valueOnChange = {};\n warningsMap.valueDefaultValue = {};\n warningsMap.controlledToUncontrolled = {};\n warningsMap.uncontrolledToControlled = {};\n }\n}\n\nexport interface IWarnControlledUsageParams<P> {\n /** ID of the component instance. Used to prevent showing warnings repeatedly. */\n componentId: string;\n /** Name of the component class. */\n componentName: string;\n /** Current props to evaluate. */\n props: P;\n /** Previous props to evaluate (undefined if called in the constructor). */\n oldProps?: P;\n /** Name of the prop for the controlled value. */\n valueProp: keyof P;\n /** Name of the prop for the uncontrolled initial value. */\n defaultValueProp: keyof P;\n /** Name of the change handler prop. */\n onChangeProp: keyof P;\n /** Name of the read-only prop. */\n readOnlyProp?: keyof P;\n}\n\n/**\n * Check for and warn on the following error conditions with a form component:\n * - A value prop is provided (indicated it's being used as controlled) without a change handler,\n * and the component is not read-only\n * - Both the value and defaultValue props are provided\n * - The component is attempting to switch between controlled and uncontrolled\n *\n * The messages mimic the warnings React gives for these error conditions on input elements.\n * The warning will only be displayed once per component ID.\n */\nexport function warnControlledUsage<P>(params: IWarnControlledUsageParams<P>): void {\n if (process.env.NODE_ENV !== 'production') {\n const {\n componentId,\n componentName,\n defaultValueProp,\n props,\n oldProps,\n onChangeProp,\n readOnlyProp,\n valueProp,\n } = params;\n\n // This warning logic closely follows what React does for native <input> elements.\n\n const oldIsControlled = oldProps ? checkIsControlled(oldProps, valueProp) : undefined;\n const newIsControlled = checkIsControlled(props, valueProp);\n\n if (newIsControlled) {\n // onChange (or readOnly) must be provided if value is provided\n const hasOnChange = !!props[onChangeProp];\n const isReadOnly = !!(readOnlyProp && props[readOnlyProp]);\n if (!(hasOnChange || isReadOnly) && !warningsMap.valueOnChange[componentId]) {\n warningsMap.valueOnChange[componentId] = true;\n warn(\n `Warning: You provided a '${valueProp}' prop to a ${componentName} without an '${onChangeProp}' handler. ` +\n `This will render a read-only field. If the field should be mutable use '${defaultValueProp}'. ` +\n `Otherwise, set '${onChangeProp}'${readOnlyProp ? ` or '${readOnlyProp}'` : ''}.`,\n );\n }\n\n // value and defaultValue are mutually exclusive\n const defaultValue = props[defaultValueProp];\n if (defaultValue !== undefined && defaultValue !== null && !warningsMap.valueDefaultValue[componentId]) {\n warningsMap.valueDefaultValue[componentId] = true;\n warn(\n `Warning: You provided both '${valueProp}' and '${defaultValueProp}' to a ${componentName}. ` +\n `Form fields must be either controlled or uncontrolled (specify either the '${valueProp}' prop, ` +\n `or the '${defaultValueProp}' prop, but not both). Decide between using a controlled or uncontrolled ` +\n `${componentName} and remove one of these props. More info: https://fb.me/react-controlled-components`,\n );\n }\n }\n\n // Warn if switching between uncontrolled and controlled. (One difference between this implementation\n // and React's <input> is that if oldIsControlled is indeterminate and newIsControlled true, we don't warn.)\n if (oldProps && newIsControlled !== oldIsControlled) {\n const oldType = oldIsControlled ? 'a controlled' : 'an uncontrolled';\n const newType = oldIsControlled ? 'uncontrolled' : 'controlled';\n const warnMap = oldIsControlled ? warningsMap.controlledToUncontrolled : warningsMap.uncontrolledToControlled;\n if (!warnMap[componentId]) {\n warnMap[componentId] = true;\n warn(\n `Warning: A component is changing ${oldType} ${componentName} to be ${newType}. ` +\n `${componentName}s should not switch from controlled to uncontrolled (or vice versa). ` +\n `Decide between using controlled or uncontrolled for the lifetime of the component. ` +\n `More info: https://fb.me/react-controlled-components`,\n );\n }\n }\n }\n}\n"]} |