>';
732 |
733 | // Important!
734 | // Keep this list in sync with production version in `./factoryWithThrowingShims.js`.
735 | var ReactPropTypes = {
736 | array: createPrimitiveTypeChecker('array'),
737 | bool: createPrimitiveTypeChecker('boolean'),
738 | func: createPrimitiveTypeChecker('function'),
739 | number: createPrimitiveTypeChecker('number'),
740 | object: createPrimitiveTypeChecker('object'),
741 | string: createPrimitiveTypeChecker('string'),
742 | symbol: createPrimitiveTypeChecker('symbol'),
743 |
744 | any: createAnyTypeChecker(),
745 | arrayOf: createArrayOfTypeChecker,
746 | element: createElementTypeChecker(),
747 | instanceOf: createInstanceTypeChecker,
748 | node: createNodeChecker(),
749 | objectOf: createObjectOfTypeChecker,
750 | oneOf: createEnumTypeChecker,
751 | oneOfType: createUnionTypeChecker,
752 | shape: createShapeTypeChecker,
753 | exact: createStrictShapeTypeChecker,
754 | };
755 |
756 | /**
757 | * inlined Object.is polyfill to avoid requiring consumers ship their own
758 | * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
759 | */
760 | /*eslint-disable no-self-compare*/
761 | function is(x, y) {
762 | // SameValue algorithm
763 | if (x === y) {
764 | // Steps 1-5, 7-10
765 | // Steps 6.b-6.e: +0 != -0
766 | return x !== 0 || 1 / x === 1 / y;
767 | } else {
768 | // Step 6.a: NaN == NaN
769 | return x !== x && y !== y;
770 | }
771 | }
772 | /*eslint-enable no-self-compare*/
773 |
774 | /**
775 | * We use an Error-like object for backward compatibility as people may call
776 | * PropTypes directly and inspect their output. However, we don't use real
777 | * Errors anymore. We don't inspect their stack anyway, and creating them
778 | * is prohibitively expensive if they are created too often, such as what
779 | * happens in oneOfType() for any type before the one that matched.
780 | */
781 | function PropTypeError(message) {
782 | this.message = message;
783 | this.stack = '';
784 | }
785 | // Make `instanceof Error` still work for returned errors.
786 | PropTypeError.prototype = Error.prototype;
787 |
788 | function createChainableTypeChecker(validate) {
789 | if (process.env.NODE_ENV !== 'production') {
790 | var manualPropTypeCallCache = {};
791 | var manualPropTypeWarningCount = 0;
792 | }
793 | function checkType(isRequired, props, propName, componentName, location, propFullName, secret) {
794 | componentName = componentName || ANONYMOUS;
795 | propFullName = propFullName || propName;
796 |
797 | if (secret !== ReactPropTypesSecret) {
798 | if (throwOnDirectAccess) {
799 | // New behavior only for users of `prop-types` package
800 | invariant(
801 | false,
802 | 'Calling PropTypes validators directly is not supported by the `prop-types` package. ' +
803 | 'Use `PropTypes.checkPropTypes()` to call them. ' +
804 | 'Read more at http://fb.me/use-check-prop-types'
805 | );
806 | } else if (process.env.NODE_ENV !== 'production' && typeof console !== 'undefined') {
807 | // Old behavior for people using React.PropTypes
808 | var cacheKey = componentName + ':' + propName;
809 | if (
810 | !manualPropTypeCallCache[cacheKey] &&
811 | // Avoid spamming the console because they are often not actionable except for lib authors
812 | manualPropTypeWarningCount < 3
813 | ) {
814 | warning(
815 | false,
816 | 'You are manually calling a React.PropTypes validation ' +
817 | 'function for the `%s` prop on `%s`. This is deprecated ' +
818 | 'and will throw in the standalone `prop-types` package. ' +
819 | 'You may be seeing this warning due to a third-party PropTypes ' +
820 | 'library. See https://fb.me/react-warning-dont-call-proptypes ' + 'for details.',
821 | propFullName,
822 | componentName
823 | );
824 | manualPropTypeCallCache[cacheKey] = true;
825 | manualPropTypeWarningCount++;
826 | }
827 | }
828 | }
829 | if (props[propName] == null) {
830 | if (isRequired) {
831 | if (props[propName] === null) {
832 | return new PropTypeError('The ' + location + ' `' + propFullName + '` is marked as required ' + ('in `' + componentName + '`, but its value is `null`.'));
833 | }
834 | return new PropTypeError('The ' + location + ' `' + propFullName + '` is marked as required in ' + ('`' + componentName + '`, but its value is `undefined`.'));
835 | }
836 | return null;
837 | } else {
838 | return validate(props, propName, componentName, location, propFullName);
839 | }
840 | }
841 |
842 | var chainedCheckType = checkType.bind(null, false);
843 | chainedCheckType.isRequired = checkType.bind(null, true);
844 |
845 | return chainedCheckType;
846 | }
847 |
848 | function createPrimitiveTypeChecker(expectedType) {
849 | function validate(props, propName, componentName, location, propFullName, secret) {
850 | var propValue = props[propName];
851 | var propType = getPropType(propValue);
852 | if (propType !== expectedType) {
853 | // `propValue` being instance of, say, date/regexp, pass the 'object'
854 | // check, but we can offer a more precise error message here rather than
855 | // 'of type `object`'.
856 | var preciseType = getPreciseType(propValue);
857 |
858 | return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + preciseType + '` supplied to `' + componentName + '`, expected ') + ('`' + expectedType + '`.'));
859 | }
860 | return null;
861 | }
862 | return createChainableTypeChecker(validate);
863 | }
864 |
865 | function createAnyTypeChecker() {
866 | return createChainableTypeChecker(emptyFunction.thatReturnsNull);
867 | }
868 |
869 | function createArrayOfTypeChecker(typeChecker) {
870 | function validate(props, propName, componentName, location, propFullName) {
871 | if (typeof typeChecker !== 'function') {
872 | return new PropTypeError('Property `' + propFullName + '` of component `' + componentName + '` has invalid PropType notation inside arrayOf.');
873 | }
874 | var propValue = props[propName];
875 | if (!Array.isArray(propValue)) {
876 | var propType = getPropType(propValue);
877 | return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected an array.'));
878 | }
879 | for (var i = 0; i < propValue.length; i++) {
880 | var error = typeChecker(propValue, i, componentName, location, propFullName + '[' + i + ']', ReactPropTypesSecret);
881 | if (error instanceof Error) {
882 | return error;
883 | }
884 | }
885 | return null;
886 | }
887 | return createChainableTypeChecker(validate);
888 | }
889 |
890 | function createElementTypeChecker() {
891 | function validate(props, propName, componentName, location, propFullName) {
892 | var propValue = props[propName];
893 | if (!isValidElement(propValue)) {
894 | var propType = getPropType(propValue);
895 | return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected a single ReactElement.'));
896 | }
897 | return null;
898 | }
899 | return createChainableTypeChecker(validate);
900 | }
901 |
902 | function createInstanceTypeChecker(expectedClass) {
903 | function validate(props, propName, componentName, location, propFullName) {
904 | if (!(props[propName] instanceof expectedClass)) {
905 | var expectedClassName = expectedClass.name || ANONYMOUS;
906 | var actualClassName = getClassName(props[propName]);
907 | return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + actualClassName + '` supplied to `' + componentName + '`, expected ') + ('instance of `' + expectedClassName + '`.'));
908 | }
909 | return null;
910 | }
911 | return createChainableTypeChecker(validate);
912 | }
913 |
914 | function createEnumTypeChecker(expectedValues) {
915 | if (!Array.isArray(expectedValues)) {
916 | process.env.NODE_ENV !== 'production' ? warning(false, 'Invalid argument supplied to oneOf, expected an instance of array.') : void 0;
917 | return emptyFunction.thatReturnsNull;
918 | }
919 |
920 | function validate(props, propName, componentName, location, propFullName) {
921 | var propValue = props[propName];
922 | for (var i = 0; i < expectedValues.length; i++) {
923 | if (is(propValue, expectedValues[i])) {
924 | return null;
925 | }
926 | }
927 |
928 | var valuesString = JSON.stringify(expectedValues);
929 | return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of value `' + propValue + '` ' + ('supplied to `' + componentName + '`, expected one of ' + valuesString + '.'));
930 | }
931 | return createChainableTypeChecker(validate);
932 | }
933 |
934 | function createObjectOfTypeChecker(typeChecker) {
935 | function validate(props, propName, componentName, location, propFullName) {
936 | if (typeof typeChecker !== 'function') {
937 | return new PropTypeError('Property `' + propFullName + '` of component `' + componentName + '` has invalid PropType notation inside objectOf.');
938 | }
939 | var propValue = props[propName];
940 | var propType = getPropType(propValue);
941 | if (propType !== 'object') {
942 | return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected an object.'));
943 | }
944 | for (var key in propValue) {
945 | if (propValue.hasOwnProperty(key)) {
946 | var error = typeChecker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret);
947 | if (error instanceof Error) {
948 | return error;
949 | }
950 | }
951 | }
952 | return null;
953 | }
954 | return createChainableTypeChecker(validate);
955 | }
956 |
957 | function createUnionTypeChecker(arrayOfTypeCheckers) {
958 | if (!Array.isArray(arrayOfTypeCheckers)) {
959 | process.env.NODE_ENV !== 'production' ? warning(false, 'Invalid argument supplied to oneOfType, expected an instance of array.') : void 0;
960 | return emptyFunction.thatReturnsNull;
961 | }
962 |
963 | for (var i = 0; i < arrayOfTypeCheckers.length; i++) {
964 | var checker = arrayOfTypeCheckers[i];
965 | if (typeof checker !== 'function') {
966 | warning(
967 | false,
968 | 'Invalid argument supplied to oneOfType. Expected an array of check functions, but ' +
969 | 'received %s at index %s.',
970 | getPostfixForTypeWarning(checker),
971 | i
972 | );
973 | return emptyFunction.thatReturnsNull;
974 | }
975 | }
976 |
977 | function validate(props, propName, componentName, location, propFullName) {
978 | for (var i = 0; i < arrayOfTypeCheckers.length; i++) {
979 | var checker = arrayOfTypeCheckers[i];
980 | if (checker(props, propName, componentName, location, propFullName, ReactPropTypesSecret) == null) {
981 | return null;
982 | }
983 | }
984 |
985 | return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` supplied to ' + ('`' + componentName + '`.'));
986 | }
987 | return createChainableTypeChecker(validate);
988 | }
989 |
990 | function createNodeChecker() {
991 | function validate(props, propName, componentName, location, propFullName) {
992 | if (!isNode(props[propName])) {
993 | return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` supplied to ' + ('`' + componentName + '`, expected a ReactNode.'));
994 | }
995 | return null;
996 | }
997 | return createChainableTypeChecker(validate);
998 | }
999 |
1000 | function createShapeTypeChecker(shapeTypes) {
1001 | function validate(props, propName, componentName, location, propFullName) {
1002 | var propValue = props[propName];
1003 | var propType = getPropType(propValue);
1004 | if (propType !== 'object') {
1005 | return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type `' + propType + '` ' + ('supplied to `' + componentName + '`, expected `object`.'));
1006 | }
1007 | for (var key in shapeTypes) {
1008 | var checker = shapeTypes[key];
1009 | if (!checker) {
1010 | continue;
1011 | }
1012 | var error = checker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret);
1013 | if (error) {
1014 | return error;
1015 | }
1016 | }
1017 | return null;
1018 | }
1019 | return createChainableTypeChecker(validate);
1020 | }
1021 |
1022 | function createStrictShapeTypeChecker(shapeTypes) {
1023 | function validate(props, propName, componentName, location, propFullName) {
1024 | var propValue = props[propName];
1025 | var propType = getPropType(propValue);
1026 | if (propType !== 'object') {
1027 | return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type `' + propType + '` ' + ('supplied to `' + componentName + '`, expected `object`.'));
1028 | }
1029 | // We need to check all keys in case some are required but missing from
1030 | // props.
1031 | var allKeys = assign({}, props[propName], shapeTypes);
1032 | for (var key in allKeys) {
1033 | var checker = shapeTypes[key];
1034 | if (!checker) {
1035 | return new PropTypeError(
1036 | 'Invalid ' + location + ' `' + propFullName + '` key `' + key + '` supplied to `' + componentName + '`.' +
1037 | '\nBad object: ' + JSON.stringify(props[propName], null, ' ') +
1038 | '\nValid keys: ' + JSON.stringify(Object.keys(shapeTypes), null, ' ')
1039 | );
1040 | }
1041 | var error = checker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret);
1042 | if (error) {
1043 | return error;
1044 | }
1045 | }
1046 | return null;
1047 | }
1048 |
1049 | return createChainableTypeChecker(validate);
1050 | }
1051 |
1052 | function isNode(propValue) {
1053 | switch (typeof propValue) {
1054 | case 'number':
1055 | case 'string':
1056 | case 'undefined':
1057 | return true;
1058 | case 'boolean':
1059 | return !propValue;
1060 | case 'object':
1061 | if (Array.isArray(propValue)) {
1062 | return propValue.every(isNode);
1063 | }
1064 | if (propValue === null || isValidElement(propValue)) {
1065 | return true;
1066 | }
1067 |
1068 | var iteratorFn = getIteratorFn(propValue);
1069 | if (iteratorFn) {
1070 | var iterator = iteratorFn.call(propValue);
1071 | var step;
1072 | if (iteratorFn !== propValue.entries) {
1073 | while (!(step = iterator.next()).done) {
1074 | if (!isNode(step.value)) {
1075 | return false;
1076 | }
1077 | }
1078 | } else {
1079 | // Iterator will provide entry [k,v] tuples rather than values.
1080 | while (!(step = iterator.next()).done) {
1081 | var entry = step.value;
1082 | if (entry) {
1083 | if (!isNode(entry[1])) {
1084 | return false;
1085 | }
1086 | }
1087 | }
1088 | }
1089 | } else {
1090 | return false;
1091 | }
1092 |
1093 | return true;
1094 | default:
1095 | return false;
1096 | }
1097 | }
1098 |
1099 | function isSymbol(propType, propValue) {
1100 | // Native Symbol.
1101 | if (propType === 'symbol') {
1102 | return true;
1103 | }
1104 |
1105 | // 19.4.3.5 Symbol.prototype[@@toStringTag] === 'Symbol'
1106 | if (propValue['@@toStringTag'] === 'Symbol') {
1107 | return true;
1108 | }
1109 |
1110 | // Fallback for non-spec compliant Symbols which are polyfilled.
1111 | if (typeof Symbol === 'function' && propValue instanceof Symbol) {
1112 | return true;
1113 | }
1114 |
1115 | return false;
1116 | }
1117 |
1118 | // Equivalent of `typeof` but with special handling for array and regexp.
1119 | function getPropType(propValue) {
1120 | var propType = typeof propValue;
1121 | if (Array.isArray(propValue)) {
1122 | return 'array';
1123 | }
1124 | if (propValue instanceof RegExp) {
1125 | // Old webkits (at least until Android 4.0) return 'function' rather than
1126 | // 'object' for typeof a RegExp. We'll normalize this here so that /bla/
1127 | // passes PropTypes.object.
1128 | return 'object';
1129 | }
1130 | if (isSymbol(propType, propValue)) {
1131 | return 'symbol';
1132 | }
1133 | return propType;
1134 | }
1135 |
1136 | // This handles more types than `getPropType`. Only used for error messages.
1137 | // See `createPrimitiveTypeChecker`.
1138 | function getPreciseType(propValue) {
1139 | if (typeof propValue === 'undefined' || propValue === null) {
1140 | return '' + propValue;
1141 | }
1142 | var propType = getPropType(propValue);
1143 | if (propType === 'object') {
1144 | if (propValue instanceof Date) {
1145 | return 'date';
1146 | } else if (propValue instanceof RegExp) {
1147 | return 'regexp';
1148 | }
1149 | }
1150 | return propType;
1151 | }
1152 |
1153 | // Returns a string that is postfixed to a warning about an invalid type.
1154 | // For example, "undefined" or "of type array"
1155 | function getPostfixForTypeWarning(value) {
1156 | var type = getPreciseType(value);
1157 | switch (type) {
1158 | case 'array':
1159 | case 'object':
1160 | return 'an ' + type;
1161 | case 'boolean':
1162 | case 'date':
1163 | case 'regexp':
1164 | return 'a ' + type;
1165 | default:
1166 | return type;
1167 | }
1168 | }
1169 |
1170 | // Returns class name of the object, if any.
1171 | function getClassName(propValue) {
1172 | if (!propValue.constructor || !propValue.constructor.name) {
1173 | return ANONYMOUS;
1174 | }
1175 | return propValue.constructor.name;
1176 | }
1177 |
1178 | ReactPropTypes.checkPropTypes = checkPropTypes;
1179 | ReactPropTypes.PropTypes = ReactPropTypes;
1180 |
1181 | return ReactPropTypes;
1182 | };
1183 |
1184 | /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(0)))
1185 |
1186 | /***/ }),
1187 | /* 9 */
1188 | /***/ (function(module, exports, __webpack_require__) {
1189 |
1190 | "use strict";
1191 | /*
1192 | object-assign
1193 | (c) Sindre Sorhus
1194 | @license MIT
1195 | */
1196 |
1197 |
1198 | /* eslint-disable no-unused-vars */
1199 | var getOwnPropertySymbols = Object.getOwnPropertySymbols;
1200 | var hasOwnProperty = Object.prototype.hasOwnProperty;
1201 | var propIsEnumerable = Object.prototype.propertyIsEnumerable;
1202 |
1203 | function toObject(val) {
1204 | if (val === null || val === undefined) {
1205 | throw new TypeError('Object.assign cannot be called with null or undefined');
1206 | }
1207 |
1208 | return Object(val);
1209 | }
1210 |
1211 | function shouldUseNative() {
1212 | try {
1213 | if (!Object.assign) {
1214 | return false;
1215 | }
1216 |
1217 | // Detect buggy property enumeration order in older V8 versions.
1218 |
1219 | // https://bugs.chromium.org/p/v8/issues/detail?id=4118
1220 | var test1 = new String('abc'); // eslint-disable-line no-new-wrappers
1221 | test1[5] = 'de';
1222 | if (Object.getOwnPropertyNames(test1)[0] === '5') {
1223 | return false;
1224 | }
1225 |
1226 | // https://bugs.chromium.org/p/v8/issues/detail?id=3056
1227 | var test2 = {};
1228 | for (var i = 0; i < 10; i++) {
1229 | test2['_' + String.fromCharCode(i)] = i;
1230 | }
1231 | var order2 = Object.getOwnPropertyNames(test2).map(function (n) {
1232 | return test2[n];
1233 | });
1234 | if (order2.join('') !== '0123456789') {
1235 | return false;
1236 | }
1237 |
1238 | // https://bugs.chromium.org/p/v8/issues/detail?id=3056
1239 | var test3 = {};
1240 | 'abcdefghijklmnopqrst'.split('').forEach(function (letter) {
1241 | test3[letter] = letter;
1242 | });
1243 | if (Object.keys(Object.assign({}, test3)).join('') !==
1244 | 'abcdefghijklmnopqrst') {
1245 | return false;
1246 | }
1247 |
1248 | return true;
1249 | } catch (err) {
1250 | // We don't expect any of the above to throw, but better to be safe.
1251 | return false;
1252 | }
1253 | }
1254 |
1255 | module.exports = shouldUseNative() ? Object.assign : function (target, source) {
1256 | var from;
1257 | var to = toObject(target);
1258 | var symbols;
1259 |
1260 | for (var s = 1; s < arguments.length; s++) {
1261 | from = Object(arguments[s]);
1262 |
1263 | for (var key in from) {
1264 | if (hasOwnProperty.call(from, key)) {
1265 | to[key] = from[key];
1266 | }
1267 | }
1268 |
1269 | if (getOwnPropertySymbols) {
1270 | symbols = getOwnPropertySymbols(from);
1271 | for (var i = 0; i < symbols.length; i++) {
1272 | if (propIsEnumerable.call(from, symbols[i])) {
1273 | to[symbols[i]] = from[symbols[i]];
1274 | }
1275 | }
1276 | }
1277 | }
1278 |
1279 | return to;
1280 | };
1281 |
1282 |
1283 | /***/ }),
1284 | /* 10 */
1285 | /***/ (function(module, exports, __webpack_require__) {
1286 |
1287 | "use strict";
1288 | /* WEBPACK VAR INJECTION */(function(process) {/**
1289 | * Copyright (c) 2013-present, Facebook, Inc.
1290 | *
1291 | * This source code is licensed under the MIT license found in the
1292 | * LICENSE file in the root directory of this source tree.
1293 | */
1294 |
1295 |
1296 |
1297 | if (process.env.NODE_ENV !== 'production') {
1298 | var invariant = __webpack_require__(2);
1299 | var warning = __webpack_require__(4);
1300 | var ReactPropTypesSecret = __webpack_require__(3);
1301 | var loggedTypeFailures = {};
1302 | }
1303 |
1304 | /**
1305 | * Assert that the values match with the type specs.
1306 | * Error messages are memorized and will only be shown once.
1307 | *
1308 | * @param {object} typeSpecs Map of name to a ReactPropType
1309 | * @param {object} values Runtime values that need to be type-checked
1310 | * @param {string} location e.g. "prop", "context", "child context"
1311 | * @param {string} componentName Name of the component for error messages.
1312 | * @param {?Function} getStack Returns the component stack.
1313 | * @private
1314 | */
1315 | function checkPropTypes(typeSpecs, values, location, componentName, getStack) {
1316 | if (process.env.NODE_ENV !== 'production') {
1317 | for (var typeSpecName in typeSpecs) {
1318 | if (typeSpecs.hasOwnProperty(typeSpecName)) {
1319 | var error;
1320 | // Prop type validation may throw. In case they do, we don't want to
1321 | // fail the render phase where it didn't fail before. So we log it.
1322 | // After these have been cleaned up, we'll let them throw.
1323 | try {
1324 | // This is intentionally an invariant that gets caught. It's the same
1325 | // behavior as without this statement except with a better message.
1326 | invariant(typeof typeSpecs[typeSpecName] === 'function', '%s: %s type `%s` is invalid; it must be a function, usually from ' + 'the `prop-types` package, but received `%s`.', componentName || 'React class', location, typeSpecName, typeof typeSpecs[typeSpecName]);
1327 | error = typeSpecs[typeSpecName](values, typeSpecName, componentName, location, null, ReactPropTypesSecret);
1328 | } catch (ex) {
1329 | error = ex;
1330 | }
1331 | warning(!error || error instanceof Error, '%s: type specification of %s `%s` is invalid; the type checker ' + 'function must return `null` or an `Error` but returned a %s. ' + 'You may have forgotten to pass an argument to the type checker ' + 'creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and ' + 'shape all require an argument).', componentName || 'React class', location, typeSpecName, typeof error);
1332 | if (error instanceof Error && !(error.message in loggedTypeFailures)) {
1333 | // Only monitor this failure once because there tends to be a lot of the
1334 | // same error.
1335 | loggedTypeFailures[error.message] = true;
1336 |
1337 | var stack = getStack ? getStack() : '';
1338 |
1339 | warning(false, 'Failed %s type: %s%s', location, error.message, stack != null ? stack : '');
1340 | }
1341 | }
1342 | }
1343 | }
1344 | }
1345 |
1346 | module.exports = checkPropTypes;
1347 |
1348 | /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(0)))
1349 |
1350 | /***/ }),
1351 | /* 11 */
1352 | /***/ (function(module, exports, __webpack_require__) {
1353 |
1354 | "use strict";
1355 | /**
1356 | * Copyright (c) 2013-present, Facebook, Inc.
1357 | *
1358 | * This source code is licensed under the MIT license found in the
1359 | * LICENSE file in the root directory of this source tree.
1360 | */
1361 |
1362 |
1363 |
1364 | var emptyFunction = __webpack_require__(1);
1365 | var invariant = __webpack_require__(2);
1366 | var ReactPropTypesSecret = __webpack_require__(3);
1367 |
1368 | module.exports = function() {
1369 | function shim(props, propName, componentName, location, propFullName, secret) {
1370 | if (secret === ReactPropTypesSecret) {
1371 | // It is still safe when called from React.
1372 | return;
1373 | }
1374 | invariant(
1375 | false,
1376 | 'Calling PropTypes validators directly is not supported by the `prop-types` package. ' +
1377 | 'Use PropTypes.checkPropTypes() to call them. ' +
1378 | 'Read more at http://fb.me/use-check-prop-types'
1379 | );
1380 | };
1381 | shim.isRequired = shim;
1382 | function getShim() {
1383 | return shim;
1384 | };
1385 | // Important!
1386 | // Keep this list in sync with production version in `./factoryWithTypeCheckers.js`.
1387 | var ReactPropTypes = {
1388 | array: shim,
1389 | bool: shim,
1390 | func: shim,
1391 | number: shim,
1392 | object: shim,
1393 | string: shim,
1394 | symbol: shim,
1395 |
1396 | any: shim,
1397 | arrayOf: getShim,
1398 | element: shim,
1399 | instanceOf: getShim,
1400 | node: shim,
1401 | objectOf: getShim,
1402 | oneOf: getShim,
1403 | oneOfType: getShim,
1404 | shape: getShim,
1405 | exact: getShim
1406 | };
1407 |
1408 | ReactPropTypes.checkPropTypes = emptyFunction;
1409 | ReactPropTypes.PropTypes = ReactPropTypes;
1410 |
1411 | return ReactPropTypes;
1412 | };
1413 |
1414 |
1415 | /***/ })
1416 | /******/ ]);
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-inline-editing",
3 | "version": "1.0.10",
4 | "description": "An inline, customizable and editable text component built in React.",
5 | "main": "./dist/main.bundle.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1",
8 | "build": "npm run node_modules/webpack/bin/webpack"
9 | },
10 | "repository": {
11 | "type": "git",
12 | "url": "git+https://github.com/bfischer/react-inline-editing.git"
13 | },
14 | "keywords": [
15 | "react",
16 | "reactjs",
17 | "inline",
18 | "edit",
19 | "editor",
20 | "editing",
21 | "text",
22 | "input",
23 | "form",
24 | "forms",
25 | "label",
26 | "labels"
27 | ],
28 | "author": "Blake Fischer",
29 | "license": "MIT",
30 | "bugs": {
31 | "url": "https://github.com/bfischer/react-inline-editing/issues"
32 | },
33 | "homepage": "",
34 | "dependencies": {
35 | "prop-types": "^15.6.0",
36 | "react": "^16.2.0"
37 | },
38 | "peerDependencies": {
39 | "react": "^16.2.0"
40 | },
41 | "devDependencies": {
42 | "babel-cli": "^6.26.0",
43 | "babel-core": "^6.26.0",
44 | "babel-loader": "^7.1.2",
45 | "babel-preset-es2015": "^6.24.1",
46 | "babel-preset-react": "^6.24.1",
47 | "babel-preset-stage-3": "^6.24.1",
48 | "webpack": "^3.10.0"
49 | }
50 | }
51 |
--------------------------------------------------------------------------------
/src/main.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | const ENTER_KEY_CODE = 13;
5 | const DEFAULT_LABEL_PLACEHOLDER = "Click To Edit";
6 |
7 | export default class EditableLabel extends React.Component {
8 | constructor(props) {
9 | super(props);
10 |
11 | this.state = {
12 | isEditing: this.props.isEditing || false,
13 | text: this.props.text || "",
14 | };
15 | }
16 |
17 | componentDidUpdate(prevProps) {
18 | if(prevProps.text !== this.props.text) {
19 | this.setState({
20 | text: this.props.text || "",
21 | });
22 | }
23 |
24 | if(prevProps.isEditing !== this.props.isEditing) {
25 | this.setState({
26 | isEditing: this.state.isEditing || this.props.isEditing || false
27 | });
28 | }
29 | }
30 |
31 | isTextValueValid = () => {
32 | return (typeof this.state.text != "undefined" && this.state.text.trim().length > 0);
33 | }
34 |
35 | handleFocus = () => {
36 | if(this.state.isEditing) {
37 | if(typeof this.props.onFocusOut === 'function') {
38 | this.props.onFocusOut(this.state.text);
39 | }
40 | }
41 | else {
42 | if(typeof this.props.onFocus === 'function') {
43 | this.props.onFocus(this.state.text);
44 | }
45 | }
46 |
47 | if(this.isTextValueValid()){
48 | this.setState({
49 | isEditing: !this.state.isEditing,
50 | });
51 | }else{
52 | if(this.state.isEditing){
53 | this.setState({
54 | isEditing: this.props.emptyEdit || false
55 | });
56 | }else{
57 | this.setState({
58 | isEditing: true
59 | });
60 | }
61 | }
62 | }
63 |
64 | handleChange = () => {
65 | this.setState({
66 | text: this.textInput.value,
67 | });
68 | }
69 |
70 | handleKeyDown = (e) => {
71 | if(e.keyCode === ENTER_KEY_CODE){
72 | this.handleEnterKey();
73 | }
74 | }
75 |
76 | handleEnterKey = () => {
77 | this.handleFocus();
78 | }
79 |
80 | render() {
81 | if(this.state.isEditing) {
82 | return
83 |
103 | }
104 |
105 | const labelText = this.isTextValueValid() ? this.state.text : (this.props.labelPlaceHolder || DEFAULT_LABEL_PLACEHOLDER);
106 | return
107 |
113 | {labelText}
114 |
115 |
;
116 | }
117 | }
118 |
119 | EditableLabel.propTypes = {
120 | text: PropTypes.string.isRequired,
121 | isEditing: PropTypes.bool,
122 | emptyEdit: PropTypes.bool,
123 |
124 | labelClassName: PropTypes.string,
125 | labelFontSize: PropTypes.string,
126 | labelFontWeight: PropTypes.string,
127 | labelPlaceHolder: PropTypes.string,
128 |
129 | inputMaxLength: PropTypes.number,
130 | inputPlaceHolder: PropTypes.string,
131 | inputTabIndex: PropTypes.number,
132 | inputWidth: PropTypes.string,
133 | inputHeight: PropTypes.string,
134 | inputFontSize: PropTypes.string,
135 | inputFontWeight: PropTypes.string,
136 | inputClassName: PropTypes.string,
137 | inputBorderWidth: PropTypes.string,
138 |
139 | onFocus: PropTypes.func,
140 | onFocusOut: PropTypes.func
141 | };
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | var path = require('path');
2 | var webpack = require('webpack');
3 |
4 | module.exports = {
5 | entry: './src/main.jsx',
6 | output: {
7 | path: path.resolve(__dirname, 'dist'),
8 | filename: 'main.bundle.js',
9 | libraryTarget: 'commonjs2'
10 | },
11 | module: {
12 | loaders: [
13 | {
14 | test: /\.js(x)$/,
15 | loader: 'babel-loader',
16 | query: {
17 | presets: ['es2015', 'react']
18 | }
19 | }
20 | ]
21 | },
22 | externals: {
23 | 'react': 'commonjs react'
24 | },
25 | stats: {
26 | colors: true
27 | },
28 | };
--------------------------------------------------------------------------------