@fluido/react-components/dist/select-field/index.js

Fluido webapp components

"use strict";
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const classnames_1 = __importDefault(require("classnames"));
const react_1 = require("react");
const md_1 = require("react-icons/md");
const styled_components_1 = __importDefault(require("styled-components"));
const utils_1 = require("../utils");
const StyledSelectField = styled_components_1.default.label `
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding-bottom: 0.5rem;

  &[data-disabled='true'] {
    cursor: default;
    color: var(--on-surface-disabled);
    pointer-events: none;
  }

  & > span {
    margin-left: 1rem;
  }

  select {
    appearance: none;
    background-color: var(--surface);
    color: var(--on-surface-high-emphasis);
    padding: 0.5rem 1rem;
    margin: 0.5rem 0;
    height: 2.5rem;
    border: 1px solid var(--on-surface-divider);
    outline: none;
  }
  select:disabled {
    color: var(--on-surface-disabled);
  }
  option {
    line-height: 2.5rem;
  }

  &.with-leading select {
    padding-left: 2.5rem;
  }

  .icon-key,
  .leading {
    position: absolute;
    top: calc(50% + 1px);
    transform: translateY(-50%);
  }
  .leading {
    left: 0.5rem;
  }
  .icon-key {
    right: 0.5rem;
  }
  .wrapper {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: relative;
  }

  .select-error {
    min-height: 1.25rem;
    color: var(--error);
  }
`;
const SelectField = react_1.forwardRef((_a, fRef) => {
    var { name, label, placeholder, leading, error, disabled, required, children } = _a, props = __rest(_a, ["name", "label", "placeholder", "leading", "error", "disabled", "required", "children"]);
    const [ref, setRef] = react_1.useState(null);
    const isSSR = utils_1.testIsSSR();
    const handleRef = (node) => {
        if (fRef) {
            if (typeof fRef === 'function') {
                fRef(node);
            }
            else {
                fRef.current = node;
            }
        }
        setRef(node);
    };
    react_1.useEffect(() => {
        if (!isSSR && ref && ref.hasAttribute('autofocus')) {
            ref.focus();
        }
    }, [isSSR, ref]);
    return (jsx_runtime_1.jsxs(StyledSelectField, Object.assign({ "data-disabled": disabled, className: classnames_1.default({
            'with-leading': !!leading,
        }) }, { children: [label && (jsx_runtime_1.jsxs("span", Object.assign({ className: 'label type-subtitle-2' }, { children: [label, " ", required && jsx_runtime_1.jsx("sup", { children: "*" }, void 0)] }), void 0)),
            jsx_runtime_1.jsxs("div", Object.assign({ className: 'wrapper' }, { children: [!!leading && jsx_runtime_1.jsx("div", Object.assign({ className: 'leading' }, { children: leading }), void 0),
                    jsx_runtime_1.jsx("select", Object.assign({ ref: handleRef, placeholder: placeholder, disabled: disabled, name: name }, props, { children: children }), void 0),
                    jsx_runtime_1.jsx(md_1.MdKeyboardArrowDown, { className: 'icon-key', size: '24' }, void 0)] }), void 0),
            jsx_runtime_1.jsx("span", Object.assign({ className: 'input-error type-caption' }, { children: error || '' }), void 0)] }), void 0));
});
exports.default = SelectField;