@gechiui/components/build-module/base-field/hook.js

UI components for GeChiUI.

/**
 * GeChiUI dependencies
 */
import { useMemo } from '@gechiui/element';
/**
 * Internal dependencies
 */

import { useContextSystem } from '../ui/context';
import { useControlGroupContext } from '../ui/control-group';
import { useFlex } from '../flex';
import * as styles from './styles';
import { useCx } from '../utils/hooks/use-cx';
/**
 * @typedef OwnProps
 * @property {boolean} [hasError=false] Renders an error.
 * @property {boolean} [disabled]       Whether the field is disabled.
 * @property {boolean} [isInline=false] Renders as an inline element (layout).
 * @property {boolean} [isSubtle=false] Renders a subtle variant.
 */

/** @typedef {import('../flex/types').FlexProps & OwnProps} Props */

/**
 * @param {import('../ui/context').GeChiUIComponentProps<Props, 'div'>} props
 */

export function useBaseField(props) {
  const {
    className,
    hasError = false,
    isInline = false,
    isSubtle = false,
    // extract these because useFlex doesn't accept it
    defaultValue,
    disabled,
    ...flexProps
  } = useContextSystem(props, 'BaseField');
  const {
    styles: controlGroupStyles
  } = useControlGroupContext();
  const cx = useCx();
  const classes = useMemo(() => cx(styles.BaseField, controlGroupStyles, isSubtle && styles.subtle, hasError && styles.error, isInline && styles.inline, className), [className, controlGroupStyles, hasError, isInline, isSubtle]);
  return { ...useFlex({ ...flexProps,
      className: classes
    }),
    disabled,
    defaultValue
  };
}
//# sourceMappingURL=hook.js.map