@mpxjs/webpack-plugin
Version:
mpx compile core
96 lines (95 loc) • 3.52 kB
JSX
/**
* ✔ bindchange
*/
import { useRef, forwardRef, useContext, useMemo, useEffect, createElement } from 'react';
import { View } from 'react-native';
import { warn } from '@mpxjs/utils';
import { FormContext, CheckboxGroupContext } from './context';
import useInnerProps, { getCustomEvent } from './getInnerListeners';
import useNodesRef from './useNodesRef';
import { useLayout, useTransformStyle, wrapChildren, extendObject } from './utils';
import Portal from './mpx-portal';
const CheckboxGroup = forwardRef((props, ref) => {
const propsRef = useRef({});
propsRef.current = props;
const { style = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
const formContext = useContext(FormContext);
let formValuesMap;
if (formContext) {
formValuesMap = formContext.formValuesMap;
}
const groupValue = useRef({}).current;
const defaultStyle = {
flexDirection: 'row',
flexWrap: 'wrap'
};
const styleObj = extendObject({}, defaultStyle, style);
const { hasPositionFixed, hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
const nodeRef = useRef(null);
useNodesRef(props, ref, nodeRef, { style: normalStyle });
const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
const getValue = () => {
const arr = [];
for (const key in groupValue) {
if (groupValue[key].checked) {
arr.push(key);
}
}
return arr;
};
const resetValue = () => {
Object.keys(groupValue).forEach((key) => {
groupValue[key].checked = false;
groupValue[key].setValue(false);
});
};
if (formValuesMap) {
if (!props.name) {
warn('If a form component is used, the name attribute is required.');
}
else {
formValuesMap.set(props.name, { getValue, resetValue });
}
}
useEffect(() => {
return () => {
if (formValuesMap && props.name) {
formValuesMap.delete(props.name);
}
};
}, []);
const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
ref: nodeRef,
style: extendObject({}, normalStyle, layoutStyle)
}), [
'name'
], {
layoutRef
});
const contextValue = useMemo(() => {
const notifyChange = (evt) => {
const { bindchange } = propsRef.current;
bindchange &&
bindchange(getCustomEvent('tap', evt, {
layoutRef,
detail: {
value: getValue()
}
}, propsRef.current));
};
return {
groupValue,
notifyChange
};
}, []);
const finalComponent = createElement(View, innerProps, createElement(CheckboxGroupContext.Provider, { value: contextValue }, wrapChildren(props, {
hasVarDec,
varContext: varContextRef.current
})));
if (hasPositionFixed) {
return createElement(Portal, null, finalComponent);
}
return finalComponent;
});
CheckboxGroup.displayName = 'MpxCheckboxGroup';
export default CheckboxGroup;