121 lines
5.7 KiB
JavaScript
121 lines
5.7 KiB
JavaScript
'use client';
|
|
|
|
import { tokens, typographyStyles } from '@fluentui/react-theme';
|
|
import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
|
|
export const fieldClassNames = {
|
|
root: `fui-Field`,
|
|
label: `fui-Field__label`,
|
|
validationMessage: `fui-Field__validationMessage`,
|
|
validationMessageIcon: `fui-Field__validationMessageIcon`,
|
|
hint: `fui-Field__hint`
|
|
};
|
|
// Size of the icon in the validation message
|
|
const iconSize = '12px';
|
|
/**
|
|
* Styles for the root slot
|
|
*/
|
|
const useRootStyles = /*#__PURE__*/__styles({
|
|
base: {
|
|
mc9l5x: "f13qh94s"
|
|
},
|
|
horizontal: {
|
|
Budl1dq: "f2wwaib",
|
|
wkccdc: "f1645dqt"
|
|
},
|
|
horizontalNoLabel: {
|
|
uwmqm3: ["f15jqgz8", "fggqkej"],
|
|
Budl1dq: "f1c2z91y"
|
|
}
|
|
}, {
|
|
d: [".f13qh94s{display:grid;}", ".f2wwaib{grid-template-columns:33% 1fr;}", ".f1645dqt{grid-template-rows:auto auto auto 1fr;}", ".f15jqgz8{padding-left:33%;}", ".fggqkej{padding-right:33%;}", ".f1c2z91y{grid-template-columns:1fr;}"]
|
|
});
|
|
const useLabelStyles = /*#__PURE__*/__styles({
|
|
base: {
|
|
B2u0y6b: "f6nezus",
|
|
Bxyxcbc: "f1iqmcbn"
|
|
},
|
|
vertical: {
|
|
z8tnut: "fclwglc",
|
|
Byoj8tv: "fywfov9",
|
|
jrapky: "fyacil5"
|
|
},
|
|
verticalLarge: {
|
|
z8tnut: "f1sl3k7w",
|
|
Byoj8tv: "f1brlhvm",
|
|
jrapky: "f8l5zjj"
|
|
},
|
|
horizontal: {
|
|
z8tnut: "fp2oml8",
|
|
Byoj8tv: "f1tdddsa",
|
|
t21cq0: ["fkujibs", "f199hnxi"],
|
|
Ijaq50: "f16hsg94",
|
|
nk6f5a: "f1nzqi2z"
|
|
},
|
|
horizontalSmall: {
|
|
z8tnut: "f1ywm7hm",
|
|
Byoj8tv: "f14wxoun"
|
|
},
|
|
horizontalLarge: {
|
|
z8tnut: "f1hqyr95",
|
|
Byoj8tv: "fm4hlj0"
|
|
}
|
|
}, {
|
|
d: [".f6nezus{max-width:max-content;}", ".f1iqmcbn{max-height:max-content;}", ".fclwglc{padding-top:var(--spacingVerticalXXS);}", ".fywfov9{padding-bottom:var(--spacingVerticalXXS);}", ".fyacil5{margin-bottom:var(--spacingVerticalXXS);}", ".f1sl3k7w{padding-top:1px;}", ".f1brlhvm{padding-bottom:1px;}", ".f8l5zjj{margin-bottom:var(--spacingVerticalXS);}", ".fp2oml8{padding-top:var(--spacingVerticalSNudge);}", ".f1tdddsa{padding-bottom:var(--spacingVerticalSNudge);}", ".fkujibs{margin-right:var(--spacingHorizontalM);}", ".f199hnxi{margin-left:var(--spacingHorizontalM);}", ".f16hsg94{grid-row-start:1;}", ".f1nzqi2z{grid-row-end:-1;}", ".f1ywm7hm{padding-top:var(--spacingVerticalXS);}", ".f14wxoun{padding-bottom:var(--spacingVerticalXS);}", ".f1hqyr95{padding-top:9px;}", ".fm4hlj0{padding-bottom:9px;}"]
|
|
});
|
|
const useSecondaryTextBaseClassName = /*#__PURE__*/__resetStyles("r5c4z9l", null, [".r5c4z9l{margin-top:var(--spacingVerticalXXS);color:var(--colorNeutralForeground3);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);}"]);
|
|
const useSecondaryTextStyles = /*#__PURE__*/__styles({
|
|
error: {
|
|
sj55zd: "f1hcrxcs"
|
|
},
|
|
withIcon: {
|
|
uwmqm3: ["frawy03", "fg4c52"]
|
|
}
|
|
}, {
|
|
d: [".f1hcrxcs{color:var(--colorPaletteRedForeground1);}", ".frawy03{padding-left:calc(12px + var(--spacingHorizontalXS));}", ".fg4c52{padding-right:calc(12px + var(--spacingHorizontalXS));}"]
|
|
});
|
|
const useValidationMessageIconBaseClassName = /*#__PURE__*/__resetStyles("ra7h1uk", "r1rh6bd7", [".ra7h1uk{display:inline-block;font-size:12px;margin-left:calc(-12px - var(--spacingHorizontalXS));margin-right:var(--spacingHorizontalXS);line-height:0;vertical-align:-1px;}", ".r1rh6bd7{display:inline-block;font-size:12px;margin-right:calc(-12px - var(--spacingHorizontalXS));margin-left:var(--spacingHorizontalXS);line-height:0;vertical-align:-1px;}"]);
|
|
const useValidationMessageIconStyles = /*#__PURE__*/__styles({
|
|
error: {
|
|
sj55zd: "f1hcrxcs"
|
|
},
|
|
warning: {
|
|
sj55zd: "f1k5f75o"
|
|
},
|
|
success: {
|
|
sj55zd: "ffmvakt"
|
|
}
|
|
}, {
|
|
d: [".f1hcrxcs{color:var(--colorPaletteRedForeground1);}", ".f1k5f75o{color:var(--colorPaletteDarkOrangeForeground1);}", ".ffmvakt{color:var(--colorPaletteGreenForeground1);}"]
|
|
});
|
|
/**
|
|
* Apply styling to the Field slots based on the state
|
|
*/
|
|
export const useFieldStyles_unstable = state => {
|
|
'use no memo';
|
|
|
|
const {
|
|
validationState,
|
|
size
|
|
} = state;
|
|
const horizontal = state.orientation === 'horizontal';
|
|
const rootStyles = useRootStyles();
|
|
state.root.className = mergeClasses(fieldClassNames.root, rootStyles.base, horizontal && rootStyles.horizontal, horizontal && !state.label && rootStyles.horizontalNoLabel, state.root.className);
|
|
const labelStyles = useLabelStyles();
|
|
if (state.label) {
|
|
state.label.className = mergeClasses(fieldClassNames.label, labelStyles.base, horizontal && labelStyles.horizontal, horizontal && size === 'small' && labelStyles.horizontalSmall, horizontal && size === 'large' && labelStyles.horizontalLarge, !horizontal && labelStyles.vertical, !horizontal && size === 'large' && labelStyles.verticalLarge, state.label.className);
|
|
}
|
|
const validationMessageIconBaseClassName = useValidationMessageIconBaseClassName();
|
|
const validationMessageIconStyles = useValidationMessageIconStyles();
|
|
if (state.validationMessageIcon) {
|
|
state.validationMessageIcon.className = mergeClasses(fieldClassNames.validationMessageIcon, validationMessageIconBaseClassName, validationState !== 'none' && validationMessageIconStyles[validationState], state.validationMessageIcon.className);
|
|
}
|
|
const secondaryTextBaseClassName = useSecondaryTextBaseClassName();
|
|
const secondaryTextStyles = useSecondaryTextStyles();
|
|
if (state.validationMessage) {
|
|
state.validationMessage.className = mergeClasses(fieldClassNames.validationMessage, secondaryTextBaseClassName, validationState === 'error' && secondaryTextStyles.error, !!state.validationMessageIcon && secondaryTextStyles.withIcon, state.validationMessage.className);
|
|
}
|
|
if (state.hint) {
|
|
state.hint.className = mergeClasses(fieldClassNames.hint, secondaryTextBaseClassName, state.hint.className);
|
|
}
|
|
return state;
|
|
}; |