@hhgtech/hhg-components
Version:
Hello Health Group common components
391 lines (353 loc) • 10.7 kB
JavaScript
import { createStyles, clsx, Box, useMantineTheme } from '@mantine/core';
import { G as GlobalTextStyleNew, C as CustomStylesType } from './index-17c85f76.js';
import { _ as __rest } from './tslib.es6-00ab44b2.js';
import React__default, { createContext, useState, useEffect, useContext, useCallback } from 'react';
import { useClickOutside } from '@mantine/hooks';
import { css } from '@emotion/react';
import styled from '@emotion/styled';
import { theme } from './miscTheme.js';
var useTextStyles = createStyles((theme) => {
return GlobalTextStyleNew(theme)[CustomStylesType.LEADGEN];
});
const TextFieldContext = createContext({});
const cssInputNotShrink = css `
height: 100% !important;
min-height: calc(var(--container-height, 56px) * 24 / 56);
line-height: calc(var(--container-height, 56px) * 24 / 56);
border: none !important;
border-radius: 0 !important;
outline: none !important;
box-shadow: none !important;
padding: 0;
cursor: pointer;
/* opacity: 0; */
::placeholder {
color: ${theme.colors.gray400};
}
`;
const cssInputShrink = css `
height: auto !important;
cursor: text;
opacity: 1;
transition: 0.1s ease-in-out all;
`;
const cssLabelNotShrink = css `
position: absolute;
top: calc(var(--container-height) / 2);
left: var(--space-x, 16px);
margin: 0;
z-index: 1;
cursor: pointer;
transform: translateY(-50%);
transition: 0.125s ease-in all;
right: 0; // auto grow width
`;
const cssLabelShrink = css `
top: var(--space-y-shrink, 6px);
transform: translateY(0);
transition: 0.125s ease-out all;
right: 0; // auto grow width
`;
const cssWrapperInputNotShrink = css `
min-height: var(--container-height, 56px);
display: flex;
align-items: flex-end;
border: 1px solid ${theme.colors.gray200};
border-radius: 8px;
background-color: #fff;
padding-inline: var(--space-x, 16px);
padding-block: var(--space-y-not-shrink, 16px);
cursor: pointer;
pointer-events: none;
&:has(.mantine-Input-rightSection) {
padding-right: var(--container-height, 56px);
}
.mantine-Input-icon {
display: none;
}
.mantine-NumberInput-control {
border-color: ${theme.colors.gray200};
}
`;
const cssWrapperInputShrink = css `
height: auto;
min-height: var(--container-height, 56px);
padding-block: var(--space-y-shrink, 6px);
cursor: text;
pointer-events: auto;
`;
const cssInputWrapperError = css `
color: ${theme.colors.red800};
font-size: 12px;
line-height: 1.5;
`;
const StyledTextFieldContainer = styled.div `
--space-x: 16px;
--space-y-not-shrink: 15px;
--space-y-shrink: 6px;
--container-height: 56px;
--label-not-shrink: 16px;
--label-shrink: 12px;
--input: 15px;
position: relative;
min-width: 100px;
max-width: 100%;
display: inline-block;
.textField_wrapper {
display: inline-block;
width: 100%;
cursor: pointer;
}
.mantine-InputWrapper-root {
&[data-invalid='true'] {
.mantine-Input-wrapper {
border-color: ${theme.colors.red400};
}
}
.mantine-Input-wrapper {
&:has([data-invalid]) {
border-color: ${theme.colors.red400};
}
}
}
.mantine-InputWrapper-label {
${cssLabelNotShrink}
}
.mantine-Input-wrapper {
${cssWrapperInputNotShrink}
+ .mantine-Popover-dropdown[data-position="bottom-start"] {
left: 0 !important;
}
+ .mantine-Popover-dropdown[data-position='top-start'] {
top: unset !important;
left: 0 !important;
bottom: 100% !important;
}
}
.mantine-Input-input {
${cssInputNotShrink}
}
&.textField_shrink {
.mantine-InputWrapper-label {
${cssLabelShrink}
}
.mantine-Input-wrapper {
${cssWrapperInputShrink}
&.mantine-Select-wrapper {
.mantine-Select-rightSection {
pointer-events: auto !important;
}
}
}
.mantine-Input-input {
${cssInputShrink}
}
&:has(.PhoneInput) {
.mantine-InputWrapper-label {
left: var(--space-x, 16px);
}
.PhoneInput {
.PhoneInputInput {
opacity: 1;
}
}
}
}
&:focus-within {
.mantine-Input-wrapper {
transition: 0.25s linear border;
border-color: ${theme.colors.primary600};
box-shadow: 0 0 4px ${theme.colors.primary200};
}
}
.PhoneInput {
--phone-select: 75px;
--phone-input-space-x: 8px;
width: 100%;
opacity: 1;
border: none;
.PhoneInputCountry {
background-color: transparent;
border: none;
padding: 0;
width: var(--phone-select, 75px);
}
.PhoneInputInput {
flex: 1;
min-width: 0;
line-height: 1.5;
outline: none !important;
border: none;
box-shadow: none;
font-size: var(--input, 15px);
padding: 0 var(--phone-input-space-x, 8px);
/* opacity: 0; */
color: ${theme.colors.gray800} !important;
:focus {
color: ${theme.colors.gray800} !important;
}
}
}
&:has(.PhoneInput) {
.mantine-InputWrapper-label {
left: calc(
var(--space-x, 16px) + var(--phone-select, 75px) +
var(--phone-input-space-x, 8px)
);
}
}
.icon {
position: absolute;
top: calc(var(--container-height) / 2);
right: var(--space-x, 16px);
transform: translateY(-50%);
transition: 0.125s ease-in all;
&.shrink {
top: calc(var(--container-height) / 2 - 4px);
transform: translateY(0);
}
}
`;
const StyledChoiceFieldContainer = styled.div `
&.leadgen-form_checkbox,
&.leadgen-form_radio {
width: 100%;
}
&.leadgen-form_dropdown {
width: calc(50% - 12px);
}
.mantine-InputWrapper-root {
display: block;
}
.mantine-InputWrapper-label {
margin-bottom: 0.5rem;
color: ${theme.colors.gray800};
font-size: 16px;
font-weight: 400;
line-height: 1.5;
}
.mantine-Radio-root,
.mantine-Checkbox-root {
gap: 8px;
min-width: calc(50% - 4px);
// input[type='radio'],
// input[type='checkbox'] {
// border-color: ${theme.colors.gray600};
// width: 18px;
// height: 18px;
// }
// input[type='checkbox'] {
// border-radius: 4px;
// }
// &[data-checked='true'] {
// input[type='radio'],
// input[type='checkbox'] {
// border-color: ${theme.colors.primary600};
// }
// input[type='radio'] {
// background-color: white;
// }
// }
.mantine-Checkbox-input {
&:checked {
border-color: ${theme.colors.primary600};
}
}
}
.leadgen-choiceContainer {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 8px;
}
.mantine-InputWrapper-error {
${cssInputWrapperError}
}
`;
styled.div `
position: absolute;
top: calc(var(--container-height) / 2);
right: var(--space-x, 16px);
`;
const TextField = (props) => {
const { shrink: shrinkProps, onChangeShrink, children, className } = props, restProps = __rest(props, ["shrink", "onChangeShrink", "children", "className"]);
const [shrink, setShrink] = useState(shrinkProps);
const [hasIcon, setHasIcon] = useState(false);
useEffect(() => {
setShrink(shrinkProps);
}, [shrinkProps]);
return (React__default.createElement(TextFieldContext.Provider, Object.assign({ value: {
shrinkProps,
shrink,
setShrink,
onChangeShrink,
hasIcon,
setHasIcon,
} }, restProps),
React__default.createElement(StyledTextFieldContainer, Object.assign({ shrink: shrink, className: clsx(className, 'textField', { textField_shrink: !!shrink }) }, restProps), children)));
};
const TextFieldControl = (props) => {
const { shrink, shrinkProps, onChangeShrink, setShrink, hasIcon } = useContext(TextFieldContext);
const { children, htmlFor } = props;
const containerRef = useClickOutside(() => {
if (shrinkProps) {
return;
}
setShrink(false);
onChangeShrink === null || onChangeShrink === void 0 ? void 0 : onChangeShrink(false);
});
// const inputInside = useMemo(() => {
// containerRef.current.querySelectorAll(
// 'input:not([disabled]):not([type="submit"]),select:not([disabled]),textarea:not([disabled])',
// )
// }, [containerRef.current])
// console.log({ containerRef })
const focusInput = (target) => {
//Note: Add timeout to wait animation shrink already ended
setTimeout(() => {
const $textEl = target.querySelectorAll('input:not([disabled]):not([type="submit"]),select:not([disabled]),textarea:not([disabled])');
const $focusEl = $textEl.item($textEl.length - 1);
if ($focusEl) {
$focusEl.focus({ preventScroll: true });
}
}, 150);
};
const onClick = useCallback((e) => {
if (shrink) {
// e.preventDefault()
focusInput(e.currentTarget);
return;
}
setShrink(true);
onChangeShrink === null || onChangeShrink === void 0 ? void 0 : onChangeShrink(true);
focusInput(e.currentTarget);
}, [shrink]);
useEffect(() => {
setShrink(shrinkProps);
}, [shrinkProps]);
return (React__default.createElement(Box, { ref: containerRef, onClick: onClick, className: "textField_wrapper", component: htmlFor ? 'label' : 'div', htmlFor: htmlFor }, typeof children === 'function'
? children({ shrink: !!shrink, hasIcon })
: children));
};
const TextFieldIcon = ({ Icon }) => {
const { shrink, setHasIcon } = useContext(TextFieldContext);
const theme = useMantineTheme();
useEffect(() => {
Icon && setHasIcon(true);
}, []);
return Icon ? (React__default.createElement(Icon, { className: `icon ${!!shrink ? 'shrink' : ''}`, shrink: shrink, size: 24, color: theme.colors.gray[9] })) : null;
};
TextField.Control = TextFieldControl;
TextField.Icon = TextFieldIcon;
const ChoiceField = (props) => {
const { children, className } = props, restProps = __rest(props, ["children", "className"]);
return (React__default.createElement(StyledChoiceFieldContainer, Object.assign({ className: clsx(className, 'choiceField') }, restProps), children));
};
var index = /*#__PURE__*/Object.freeze({
__proto__: null,
TextField: TextField,
TextFieldControl: TextFieldControl,
TextFieldIcon: TextFieldIcon,
ChoiceField: ChoiceField
});
export { ChoiceField as C, TextField as T, index as i, useTextStyles as u };