@onesy/ui-react/esm/FormRow/FormRow.js

UI for React

import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
const _excluded = ["name", "description", "start", "end", "row", "footer", "responsive", "Component", "HeaderProps", "MainProps", "TextProps", "AsideProps", "StartProps", "EndProps", "className", "children"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import { c as _c } from "react/compiler-runtime";
import React from 'react';
import { is } from '@onesy/utils';
import { style as styleMethod, classNames, useOnesyTheme } from '@onesy/style-react';
import LineElement from '../Line';
import TypeElement from '../Type';
import { staticClassName } from '../utils';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const useStyle = styleMethod(theme => ({
  root: {},
  aside: {
    flex: '0 0 auto'
  },
  row: {
    '& > *': {
      flex: '1 1 auto'
    }

    // '& .onesy-TextField-root, & .onesy-TextField-wrapper': {
    //   width: '100%'
    // }
  },
  footer: {
    marginTop: '8px'
  }
}), {
  name: 'onesy-FormRow'
});
const FormRow = props_ => {
  const $ = _c(17);
  const theme = useOnesyTheme();
  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyFormRow?.props?.default), props_);
  const Line = theme?.elements?.Line || LineElement;
  const Type = theme?.elements?.Type || TypeElement;
  const {
      name,
      description,
      start,
      end,
      row,
      footer,
      responsive: t0,
      Component: t1,
      HeaderProps,
      MainProps,
      TextProps,
      AsideProps,
      StartProps,
      EndProps,
      className,
      children
    } = props,
    other = _objectWithoutProperties(props, _excluded);
  const responsive = t0 === undefined ? true : t0;
  const Component = t1 === undefined ? Line : t1;
  const {
    classes
  } = useStyle();
  const text = name || description;
  const actions = start || end;
  const header = text || actions;
  let justify = "unset";
  if (start && end && !text) {
    justify = "space-between";
  }
  if (!start && !text && end) {
    justify = "flex-end";
  }
  const t2 = 1;
  const t3 = "column";
  const t4 = "unset";
  const t5 = "unset";
  const t6 = true;
  const t7 = classNames([staticClassName("FormRow", theme) && ["onesy-FormRow-root"], className, classes.root]);
  const t8 = header && /*#__PURE__*/_jsxs(Line, _objectSpread(_objectSpread({
    direction: "row",
    align: "center",
    justify: justify,
    fullWidth: true
  }, HeaderProps), {}, {
    children: [start && /*#__PURE__*/_jsx(Line, _objectSpread(_objectSpread(_objectSpread({}, AsideProps), StartProps), {}, {
      className: classNames([AsideProps?.className, StartProps?.className, classes.aside]),
      children: start
    })), text && /*#__PURE__*/_jsxs(Line, _objectSpread(_objectSpread({
      gap: 0.5,
      direction: "column",
      flex: true
    }, TextProps), {}, {
      children: [name && (is("string", name) ? /*#__PURE__*/_jsx(Type, {
        version: "l2",
        children: name
      }) : name), description && (is("string", description) ? /*#__PURE__*/_jsx(Type, {
        version: "b3",
        children: description
      }) : description)]
    })), end && /*#__PURE__*/_jsx(Line, _objectSpread(_objectSpread(_objectSpread({
      gap: 0,
      direction: "row",
      align: "center"
    }, AsideProps), EndProps), {}, {
      className: classNames([AsideProps?.className, EndProps?.className, classes.aside]),
      children: end
    }))]
  }));
  const t9 = 2;
  const t10 = row ? responsive ? {
    default: "row",
    1400: "column"
  } : "row" : "column";
  const t11 = true;
  const t12 = classNames([staticClassName("FormRow", theme) && ["onesy-FormRow-main"], MainProps?.className, row && classes.row]);
  let t13;
  if ($[0] !== Line || $[1] !== MainProps || $[2] !== children || $[3] !== t10 || $[4] !== t12) {
    t13 = /*#__PURE__*/_jsx(Line, _objectSpread(_objectSpread({
      gap: t9,
      direction: t10,
      fullWidth: t11,
      className: t12
    }, MainProps), {}, {
      children: children
    }));
    $[0] = Line;
    $[1] = MainProps;
    $[2] = children;
    $[3] = t10;
    $[4] = t12;
    $[5] = t13;
  } else {
    t13 = $[5];
  }
  let t14;
  if ($[6] !== Line || $[7] !== classes.footer || $[8] !== footer) {
    t14 = footer && /*#__PURE__*/_jsx(Line, {
      direction: "row",
      justify: "flex-end",
      fullWidth: true,
      className: classes.footer,
      children: footer
    });
    $[6] = Line;
    $[7] = classes.footer;
    $[8] = footer;
    $[9] = t14;
  } else {
    t14 = $[9];
  }
  let t15;
  if ($[10] !== Component || $[11] !== other || $[12] !== t13 || $[13] !== t14 || $[14] !== t7 || $[15] !== t8) {
    t15 = /*#__PURE__*/_jsxs(Component, _objectSpread(_objectSpread({
      gap: t2,
      direction: t3,
      justify: t4,
      align: t5,
      fullWidth: t6,
      className: t7
    }, other), {}, {
      children: [t8, t13, t14]
    }));
    $[10] = Component;
    $[11] = other;
    $[12] = t13;
    $[13] = t14;
    $[14] = t7;
    $[15] = t8;
    $[16] = t15;
  } else {
    t15 = $[16];
  }
  return t15;
};
FormRow.displayName = 'onesy-FormRow';
export default FormRow;