@navinc/base-react-components
Version:
Nav's Pattern Library
46 lines • 2.08 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Chevron = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const styled_components_1 = __importDefault(require("styled-components"));
const carrot_left_1 = __importDefault(require("./icons/actions/carrot-left"));
const prop_types_1 = __importDefault(require("prop-types"));
const ChevronWrapper = styled_components_1.default.div `
pointer-events: none;
`;
ChevronWrapper.displayName = 'ChevronWrapper';
/**
*
* @param {*} props You can not access props directly. | optional | {}
* @property {string} className
* @property {boolean} disabled
* @property {boolean} isInvalid
* @property {boolean} $isOpen
* @returns React.ReactElement
*/
const Chevron = ({ className, disabled, isInvalid, $isOpen }) => ((0, jsx_runtime_1.jsx)(ChevronWrapper, Object.assign({ className: className, disabled: disabled, isInvalid: isInvalid }, { children: (0, jsx_runtime_1.jsx)(carrot_left_1.default, { style: {
color: ({ isInvalid, disabled, theme }) => isInvalid ? theme.error : disabled ? theme.scuttleGray500 : theme.azure,
transform: `rotate(${$isOpen ? '0turn' : '-0.25turn'})`,
transition: 'transform 0.2s ease-in-out',
transitionDelay: '0.1s',
willChange: 'transform',
} }, void 0) }), void 0));
exports.Chevron = Chevron;
exports.Chevron.propTypes = {
className: prop_types_1.default.string,
disabled: prop_types_1.default.bool,
isInvalid: prop_types_1.default.bool,
/** Shares the isOpen state with styled-components, but does not pass down to the child as a prop */
$isOpen: prop_types_1.default.bool,
};
exports.Chevron.defaultProps = {
disabled: false,
isInvalid: false,
$isOpen: false,
};
exports.Chevron.displayName = 'Chevron';
exports.default = (0, styled_components_1.default)(exports.Chevron) ``;
//# sourceMappingURL=chevron.js.map