@amaui/ui-react
Version:
UI for React
157 lines (156 loc) • 9.82 kB
JavaScript
;
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const utils_1 = require("@amaui/utils");
const style_react_1 = require("@amaui/style-react");
const __1 = require("..");
const Wrapper = react_1.default.forwardRef((props, ref) => {
const { children, style } = props, other = __rest(props, ["children", "style"]);
return ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: ref }, other, { style: Object.assign({ width: '100%' }, style) }, { children: props.children })));
});
const Expand = react_1.default.forwardRef((props_, ref) => {
var _a;
const theme = (0, style_react_1.useAmauiTheme)();
const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.amauiExpand) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
const { in: inProp, value: valueProvided, prefix, run, append, add, enter, exit, enterOnAdd, exitOnAdd, noAbruption, removeOnExited = true, delay, duration: duration_, timing_function, addTransition, onTransition, onAppended, onAdd, onAdding, onAdded, onEnter, onEntering, onEntered, onExit, onExiting, onExited, onRemoved, expandSize, orientation, WrapperProps, className, style, children } = props, other = __rest(props, ["in", "value", "prefix", "run", "append", "add", "enter", "exit", "enterOnAdd", "exitOnAdd", "noAbruption", "removeOnExited", "delay", "duration", "timing_function", "addTransition", "onTransition", "onAppended", "onAdd", "onAdding", "onAdded", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "onRemoved", "expandSize", "orientation", "WrapperProps", "className", "style", "children"]);
const [value, setValue] = react_1.default.useState(valueProvided !== undefined ? valueProvided : null);
const [parent, setParent] = react_1.default.useState();
const refs = {
root: react_1.default.useRef(undefined),
placeholder: react_1.default.useRef(undefined),
parent: react_1.default.useRef(undefined),
element: react_1.default.useRef(undefined),
value: react_1.default.useRef(0)
};
refs.value.current = value;
refs.parent.current = parent;
let prop = 'height';
if (orientation === 'horizontal')
prop = 'width';
const isTransition = react_1.default.useCallback((item) => {
const values = ['Transition', 'Fade', 'Grow', 'Slide', 'Zoom'];
return values.some(item_ => item === null || item === void 0 ? void 0 : item.includes(item_));
}, []);
const childrenWithTransition = isTransition((_a = children === null || children === void 0 ? void 0 : children.type) === null || _a === void 0 ? void 0 : _a.displayName);
react_1.default.useEffect(() => {
const method = () => {
setValue(null);
setParent(null);
};
// on resize
// recalculate width, value
window.addEventListener('resize', method);
return () => {
window.removeEventListener('resize', method);
};
}, []);
const styles = (status) => {
var _a;
const styles_ = (refs.root.current && window.getComputedStyle((_a = refs.root) === null || _a === void 0 ? void 0 : _a.current)) || {};
const allStyles = {
appended: {
position: 'fixed',
left: '1114%',
visibility: 'hidden'
},
enter: {
transition: 'none',
[prop]: 0,
overflow: 'hidden'
},
entering: {
[prop]: `${valueProvided !== undefined ? valueProvided : refs.value.current}px`,
overflow: 'hidden'
},
entered: {
[prop]: 'auto'
},
exit: {
[prop]: styles_[prop],
overflow: 'hidden'
},
exiting: {
[prop]: expandSize !== undefined ? expandSize : '0',
overflow: 'hidden'
},
exited: {
[prop]: expandSize !== undefined ? expandSize : '0',
overflow: 'hidden'
}
};
return allStyles[status];
};
const duration = (status, property = 'opacity') => {
const properties = {
[prop]: theme.transitions.duration.rg
};
return `${((0, utils_1.is)('simple', duration) ? duration : duration[status]) || properties[property]}ms`;
};
const timingFunction = (status) => ((0, utils_1.is)('simple', timing_function) ? timing_function : timing_function[status]) || theme.transitions.timing_function.standard;
const children_ = ((0, jsx_runtime_1.jsx)(Wrapper, Object.assign({}, WrapperProps, { children: children })));
return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [value === null && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { ref: item => {
if (!item)
return;
if (!parent)
setParent(item.parentElement);
} }), parent && ((0, jsx_runtime_1.jsx)(Wrapper, Object.assign({}, WrapperProps, { ref: (item) => {
if (!item)
return;
if (WrapperProps === null || WrapperProps === void 0 ? void 0 : WrapperProps.ref) {
if ((0, utils_1.is)('function', WrapperProps.ref))
WrapperProps === null || WrapperProps === void 0 ? void 0 : WrapperProps.ref(item);
else
WrapperProps.ref.current = item;
}
if (refs.value.current === null) {
setValue(item.getBoundingClientRect()[prop] || 0);
}
}, style: Object.assign({ position: 'fixed', left: '1114%', visibility: 'hidden', width: parent.offsetWidth }, WrapperProps === null || WrapperProps === void 0 ? void 0 : WrapperProps.style) }, { children: react_1.default.cloneElement(children, Object.assign({}, (childrenWithTransition && { in: true }))) })))] }), value !== null && ((0, jsx_runtime_1.jsx)(__1.Transition, Object.assign({ removeOnExited: true }, props, { children: (status, ref_) => {
var _a;
// If children update
// & value is updated
if (['appending', 'appended', 'adding', 'added', 'entering', 'entered'].includes(status)) {
const value_ = (((_a = refs.root.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || {})[prop];
if (value_ > 0 && value_ !== refs.value.current)
setValue(value_);
}
return react_1.default.cloneElement(children_, Object.assign(Object.assign({}, other), { className, ref: (item) => {
refs.root.current = item;
if (ref) {
if ((0, utils_1.is)('function', ref))
ref(item);
else
ref.current = item;
}
if (ref_) {
if ((0, utils_1.is)('function', ref_))
ref_(item);
else
ref_.current = item;
}
if (children_.ref) {
if ((0, utils_1.is)('function', children_.ref))
children_.ref(item);
else
children_.ref.current = item;
}
}, style: Object.assign(Object.assign(Object.assign({ position: 'relative', transition: `${prop} ${duration(status, prop)} ${timingFunction(status)} ${addTransition ? `, ${addTransition}` : ''}`, visibility: status === 'exited' && !inProp && expandSize === undefined ? 'hidden' : undefined }, styles(status)), style), children_ === null || children_ === void 0 ? void 0 : children_.style) }));
} })))] });
});
Expand.displayName = 'amaui-Expand';
exports.default = Expand;