wix-style-react
Version:
wix-style-react
111 lines • 5.55 kB
JavaScript
import React from 'react';
import PropTypes from 'prop-types';
import { ArrowLeft } from '@wix/wix-ui-icons-common';
import { st, classes } from './ComposerHeader.st.css';
import TextButton from '../TextButton';
import Text from '../Text/Text';
import { dataHooks } from './constants';
class ComposerHeaderActions extends React.PureComponent {
render() {
return '';
}
}
ComposerHeaderActions.displayName = 'Actions';
ComposerHeaderActions.defaultProps = {
justifyContent: 'flex-start',
};
const ComposerHeaderMainActions = () => '';
const ComposerHeaderSaveStatus = ({ saveStatusValue, saveStatusError, dataHook, size, }) => (React.createElement(Text, { dataHook: dataHook || dataHooks.saveStatus, className: classes.saveStatus, secondary: true, light: true, size: size, skin: saveStatusError ? 'error' : 'standard', tagName: "span", weight: "thin" }, saveStatusValue));
ComposerHeaderMainActions.displayName = 'MainActions';
ComposerHeaderSaveStatus.displayName = 'SaveStatus';
const filterChildren = ({ children, displayName }) => {
const actions = React.Children.map(children, child => child);
return (actions &&
actions.filter(child => React.isValidElement(child) && child.type.displayName === displayName));
};
const renderSingleAction = ({ props, index }) => {
const { children, dataHook, ...rest } = props;
return (children && (React.createElement("div", { key: index, "data-hook": dataHook, style: { ...rest, justifyContent: rest.justifyContent }, className: classes.actions }, children)));
};
const BackButton = React.memo(({ backButtonValue, onBackClick, size }) => {
return (backButtonValue && (React.createElement(TextButton, { skin: "dark", prefixIcon: React.createElement(ArrowLeft, null), dataHook: dataHooks.backButton, className: classes.backButton, size: size, onClick: onBackClick }, backButtonValue)));
});
const Actions = React.memo(({ children }) => {
const actions = filterChildren({ children, displayName: 'Actions' });
return (actions && (React.createElement("div", { className: classes.container }, actions.map(({ props }, index) => renderSingleAction({ props, index })))));
});
const MainActions = React.memo(({ children }) => {
const mainActions = filterChildren({ children, displayName: 'MainActions' });
/**
* We only support one type of main action.
* It will be always the first one the in list.
* */
const exists = mainActions && mainActions[0];
return (exists && (React.createElement("div", { className: classes.mainActions, "data-hook": mainActions[0].props.dataHook || dataHooks.mainAction }, mainActions[0] && mainActions[0].props.children)));
});
const shouldRenderDivider = ({ children, divider }) => {
const actions = filterChildren({ children, displayName: 'Actions' });
const sides = {
left: {
item: 0,
justifyContent: 'flex-start',
},
right: {
item: actions && actions.length - 1,
justifyContent: 'flex-end',
},
};
if (actions && actions.length === 1) {
return actions[0].props.justifyContent === sides[divider].justifyContent;
}
if (actions && actions.length > 1) {
return (actions[sides[divider].item].props.justifyContent ===
sides[divider].justifyContent);
}
return;
};
const LeftDivider = React.memo(({ backButton, children }) => {
const shouldRender = backButton &&
shouldRenderDivider({
children,
divider: 'left',
});
return (shouldRender && (React.createElement("div", { className: classes.divider, "data-hook": dataHooks.leftDivider })));
});
const RightDivider = React.memo(({ children }) => {
const mainActions = filterChildren({ children, displayName: 'MainActions' });
const shouldRender = mainActions &&
mainActions[0] &&
shouldRenderDivider({
children,
divider: 'right',
});
return (shouldRender && (React.createElement("div", { className: classes.divider, "data-hook": dataHooks.rightDivider })));
});
/** ComposerHeader */
const ComposerHeader = ({ children, dataHook, size = 'medium', dropShadow = false, backButtonValue, onBackClick, }) => {
return (React.createElement("div", { "data-hook": dataHook, className: st(classes.root, { size, dropShadow }) },
React.createElement(BackButton, { size: size, backButtonValue: backButtonValue, onBackClick: onBackClick }),
React.createElement(LeftDivider, { backButton: backButtonValue, children: children }),
React.createElement(Actions, null, children),
React.createElement(RightDivider, { children: children }),
React.createElement(MainActions, null, children)));
};
ComposerHeader.propTypes = {
/** Applies a data-hook HTML attribute to be used in the tests */
dataHook: PropTypes.string,
/** Defines the label of a back button */
backButtonValue: PropTypes.node,
/** Defines what happens when the back button is clicked */
onBackClick: PropTypes.func,
/** Sets the height of the component and adjusts the size of the back button */
size: PropTypes.oneOf(['small', 'medium']),
/** Applies a drop shadow effect */
dropShadow: PropTypes.bool,
};
ComposerHeader.displayName = 'ComposerHeader';
ComposerHeader.Actions = ComposerHeaderActions;
ComposerHeader.MainActions = ComposerHeaderMainActions;
ComposerHeader.SaveStatus = ComposerHeaderSaveStatus;
export default ComposerHeader;
//# sourceMappingURL=ComposerHeader.js.map