@coko/client/dist/ui/common/Button.js

Client side common code for coko apps

import { darken as e } from "../../toolkit/darkenLighten.js";
import { grid as t, th as n } from "../../toolkit/themeHelper.js";
import "../../toolkit/index.js";
import { useEffect as r, useRef as i } from "react";
import a, { css as o } from "styled-components";
import { jsx as s } from "react/jsx-runtime";
import { Button as c } from "antd";
//#region src/ui/common/Button.tsx
var l = {
	danger: "colorError",
	error: "colorError",
	success: "colorSuccess"
}, u = a(c)`
  box-shadow: none;
  font-size: ${n("fontSizeBase")};
  /* let lineHeight expand the button height */
  height: unset;
  line-height: ${n("lineHeightBase")};
  ${(e) => e.$direction === "rtl" && o`
      direction: rtl;

      .anticon + span {
        margin-right: 8px;
        margin-left: 0;
      }
    `};

  ${(t) => {
	let { $status: r, theme: i, type: a, ghost: s, disabled: c } = t;
	if (c) return null;
	if (!r || !Object.keys(l).includes(r)) return a === "primary" && !s ? o`
          background-color: ${n("colorPrimary")};

          &:hover,
          &:focus,
          &:active {
            /* stylelint-disable-next-line declaration-no-important */
            background-color: ${e("colorPrimary", .25)} !important;
          }
        ` : o`
        &:hover,
        &:focus,
        &:active {
          /* stylelint-disable-next-line declaration-no-important */
          border-color: ${e("colorPrimary", .25)} !important;
          /* stylelint-disable-next-line declaration-no-important */
          color: ${e("colorPrimary", .25)} !important;
        }
      `;
	let u = i[l[r]];
	return a === "primary" ? o`
        background-color: ${u};
        border-color: ${u};
        color: ${i.colorTextReverse};

        &:hover,
        &:focus,
        &:active {
          border-color: ${u};
          color: ${i.colorTextReverse};
        }

        &:hover,
        &:focus {
          /* stylelint-disable-next-line declaration-no-important */
          background-color: ${e(u, .25)} !important;
        }

        &:active {
          /* stylelint-disable-next-line declaration-no-important */
          background-color: ${e(u, .25)} !important;
        }
      ` : o`
      color: ${u};
      border-color: ${u};

      &:hover,
      &:focus {
        color: ${e(u, .25)};
        border-color: ${e(u, .25)};
      }

      &:active {
        color: ${e(u, .25)};
        border-color: ${e(u, .25)};
      }
    `;
}};

  padding: ${t(2)} ${t(4)};
`, d = (e) => {
	let { children: t, className: n, autoFocus: a = !1, direction: o = "ltr", status: c, ...l } = e, d = i(null);
	return r(() => {
		a && d.current?.focus();
	}, [a]), /* @__PURE__ */ s(u, {
		$direction: o,
		$status: c,
		className: n,
		ref: d,
		...l,
		children: t
	});
};
//#endregion
export { d as default };