@ant-design/compatible/es/form/style/index.js

Ant Design v3 to v4 compatible package

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

// import '../../style/index.less';
// import './index.less';
import * as React from 'react';
import { useStyleRegister } from '@ant-design/cssinjs';
import { theme as antdTheme, ConfigProvider } from 'antd';
import { resetComponent, clearFix } from "antd/es/style";
import { resetForm } from "./mixin";
import { genFormLayoutStyle } from "./layout";
import { genFeedbackStyle } from "./feedback";

// ============================== Export ==============================
var genFormStyle = function genFormStyle(token) {
  var _objectSpread3;

  var antCls = token.antCls,
      iconCls = token.iconCls,
      componentCls = token.componentCls,
      controlHeightLG = token.controlHeightLG,
      controlHeight = token.controlHeight,
      colorTextHeading = token.colorTextHeading,
      colorHighlight = token.colorHighlight,
      colorTextSecondary = token.colorTextSecondary,
      fontSize = token.fontSize,
      lineHeight = token.lineHeight,
      marginXS = token.marginXS,
      marginXXS = token.marginXXS,
      marginLG = token.marginLG,
      motionEaseOut = token.motionEaseOut,
      motionDurationSlow = token.motionDurationSlow,
      paddingXXS = token.paddingXXS,
      paddingXS = token.paddingXS,
      formExplainPrecision = token.formExplainPrecision;
  var formExplainHeight = Math.floor(fontSize * lineHeight);
  var formHelpMarginTop = (controlHeight - controlHeightLG) / 2 + 2;
  return _defineProperty({}, componentCls, _objectSpread(_objectSpread(_objectSpread({}, resetComponent(token)), resetForm(token)), {}, (_objectSpread3 = {}, _defineProperty(_objectSpread3, "".concat(componentCls, "-item-required::before"), {
    display: 'inline-block',
    marginRight: 4,
    color: colorHighlight,
    fontSize: fontSize,
    fontFamily: 'SimSun, sans-serif',
    lineHeight: 1,
    content: '" * "'
  }), _defineProperty(_objectSpread3, "".concat(componentCls, "-hide-required-mark ").concat(componentCls, "-item-required::before"), {
    display: 'none'
  }), _defineProperty(_objectSpread3, "".concat(componentCls, "-item-label > label"), {
    color: colorTextHeading,
    '&::after': {
      content: ':'
    },
    position: 'relative',
    top: -0.5,
    margin: "0 ".concat(marginXS, "px 0 ").concat(marginXXS / 2, "px")
  }), _defineProperty(_objectSpread3, "&".concat(componentCls, "-item-no-colon::after"), {
    content: ' '
  }), _defineProperty(_objectSpread3, "".concat(componentCls, "-item"), _objectSpread(_objectSpread({
    label: _defineProperty({
      position: 'relative'
    }, "> ".concat(iconCls), {
      fontSize: fontSize,
      verticalAlign: 'top'
    })
  }, resetComponent(token)), {}, _defineProperty({
    marginBottom: marginLG,
    verticalAlign: 'top',
    '&-control': _objectSpread({
      position: 'relative',
      lineHeight: "".concat(controlHeightLG, "px")
    }, clearFix()),
    '&-children': {
      position: 'relative'
    },
    '&-with-help': {
      marginBottom: Math.max(0, marginLG - formExplainHeight - formHelpMarginTop)
    },
    '&-label': {
      display: 'inline-block',
      overflow: 'hidden',
      lineHeight: "".concat(controlHeightLG - 0.0001, "px"),
      whiteSpace: 'nowrap',
      textAlign: 'right',
      verticalAlign: 'middle',
      flexGrow: '0',
      '&-left': {
        textAlign: 'left'
      }
    },
    '&-control-wrapper': {
      flex: '1 1 0'
    }
  }, "".concat(antCls, "-switch"), {
    margin: '2px 0 4px'
  }))), _defineProperty(_objectSpread3, "".concat(componentCls, "-explain, ").concat(componentCls, "-extra"), {
    clear: 'both',
    minHeight: formExplainHeight + formExplainPrecision,
    marginTop: formHelpMarginTop,
    color: colorTextSecondary,
    fontSize: fontSize,
    lineHeight: lineHeight,
    transition: "color ".concat(motionDurationSlow, " ").concat(motionEaseOut)
  }), _defineProperty(_objectSpread3, "".concat(componentCls, "-explain"), {
    marginBottom: -formExplainPrecision
  }), _defineProperty(_objectSpread3, "".concat(componentCls, "-extra"), {
    paddingTop: paddingXXS
  }), _defineProperty(_objectSpread3, "".concat(componentCls, "-text"), {
    display: 'inline-block',
    paddingRight: paddingXS
  }), _defineProperty(_objectSpread3, "".concat(componentCls, "-split"), {
    display: 'block',
    textAlign: 'center'
  }), _objectSpread3)));
};

export default function useStyle(prefixCls) {
  var _antdTheme$useToken = antdTheme.useToken(),
      theme = _antdTheme$useToken.theme,
      token = _antdTheme$useToken.token,
      hashId = _antdTheme$useToken.hashId;

  var _React$useContext = React.useContext(ConfigProvider.ConfigContext),
      iconPrefixCls = _React$useContext.iconPrefixCls,
      getPrefixCls = _React$useContext.getPrefixCls;

  var rootPrefixCls = getPrefixCls();
  return [useStyleRegister({
    theme: theme,
    token: token,
    hashId: hashId,
    path: ['compatible', 'Form', prefixCls, iconPrefixCls]
  }, function () {
    var mergedToken = _objectSpread({
      componentCls: ".".concat(prefixCls),
      antCls: ".".concat(rootPrefixCls),
      iconCls: ".".concat(iconPrefixCls),
      formExplainPrecision: 1
    }, token);

    return [genFormStyle(mergedToken), genFormLayoutStyle(mergedToken), genFeedbackStyle(mergedToken)];
  }), hashId];
}