70 lines
2.5 KiB
JavaScript
70 lines
2.5 KiB
JavaScript
|
"use strict";
|
||
|
|
|
||
|
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
||
|
|
Object.defineProperty(exports, "__esModule", {
|
||
|
|
value: true
|
||
|
|
});
|
||
|
|
exports.default = useMergedState;
|
||
|
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
||
|
|
var _useEvent = _interopRequireDefault(require("./useEvent"));
|
||
|
|
var _useLayoutEffect = require("./useLayoutEffect");
|
||
|
|
var _useState5 = _interopRequireDefault(require("./useState"));
|
||
|
|
/** We only think `undefined` is empty */
|
||
|
|
function hasValue(value) {
|
||
|
|
return value !== undefined;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Similar to `useState` but will use props value if provided.
|
||
|
|
* Note that internal use rc-util `useState` hook.
|
||
|
|
*/
|
||
|
|
function useMergedState(defaultStateValue, option) {
|
||
|
|
var _ref = option || {},
|
||
|
|
defaultValue = _ref.defaultValue,
|
||
|
|
value = _ref.value,
|
||
|
|
onChange = _ref.onChange,
|
||
|
|
postState = _ref.postState;
|
||
|
|
|
||
|
|
// ======================= Init =======================
|
||
|
|
var _useState = (0, _useState5.default)(function () {
|
||
|
|
if (hasValue(value)) {
|
||
|
|
return value;
|
||
|
|
} else if (hasValue(defaultValue)) {
|
||
|
|
return typeof defaultValue === 'function' ? defaultValue() : defaultValue;
|
||
|
|
} else {
|
||
|
|
return typeof defaultStateValue === 'function' ? defaultStateValue() : defaultStateValue;
|
||
|
|
}
|
||
|
|
}),
|
||
|
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
||
|
|
innerValue = _useState2[0],
|
||
|
|
setInnerValue = _useState2[1];
|
||
|
|
var mergedValue = value !== undefined ? value : innerValue;
|
||
|
|
var postMergedValue = postState ? postState(mergedValue) : mergedValue;
|
||
|
|
|
||
|
|
// ====================== Change ======================
|
||
|
|
var onChangeFn = (0, _useEvent.default)(onChange);
|
||
|
|
var _useState3 = (0, _useState5.default)([mergedValue]),
|
||
|
|
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
|
||
|
|
prevValue = _useState4[0],
|
||
|
|
setPrevValue = _useState4[1];
|
||
|
|
(0, _useLayoutEffect.useLayoutUpdateEffect)(function () {
|
||
|
|
var prev = prevValue[0];
|
||
|
|
if (innerValue !== prev) {
|
||
|
|
onChangeFn(innerValue, prev);
|
||
|
|
}
|
||
|
|
}, [prevValue]);
|
||
|
|
|
||
|
|
// Sync value back to `undefined` when it from control to un-control
|
||
|
|
(0, _useLayoutEffect.useLayoutUpdateEffect)(function () {
|
||
|
|
if (!hasValue(value)) {
|
||
|
|
setInnerValue(value);
|
||
|
|
}
|
||
|
|
}, [value]);
|
||
|
|
|
||
|
|
// ====================== Update ======================
|
||
|
|
var triggerChange = (0, _useEvent.default)(function (updater, ignoreDestroy) {
|
||
|
|
setInnerValue(updater, ignoreDestroy);
|
||
|
|
setPrevValue([mergedValue], ignoreDestroy);
|
||
|
|
});
|
||
|
|
return [postMergedValue, triggerChange];
|
||
|
|
}
|