@razorpay/blade/build/lib/web/production/components/Box/styledProps/useStyledProps.js

The Design System that powers Razorpay

import _defineProperty from '@babel/runtime/helpers/defineProperty';
import { useMemoizedStyles } from '../BaseBox/useMemoizedStyles.web.js';
import { getStyledProps, removeUndefinedStyledProps } from './getStyledProps.js';

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; }
/**
 *
 * ## How to add Styled Props to components?
 *
 * There are 2 ways
 * - Using `getStyledProps` + BaseBox wrapper
 * - Using `useStyledProps`
 *
 * You can use `getStyledProps` method if you're fine adding or already have BaseBox wrapper around your component
 * And use `useStyledProps` when adding BaseBox wrapper can cause styling issues or is unneccessary
 *
 * ### Usage
 *
 * #### `getStyledProps` + BaseBox wrapper
 *
 * ```tsx
 * import type { StyledPropsBlade } from '~src/components/Box/styledProps';
 * import { getStyledProps } from '~src/components/Box/styledProps';
 *
 * type MyComponentProps = {
 *   // ... Your Props
 * } & StyledPropsBlade;
 *
 * const MyComponent = (props: MyComponentProps): React.ReactElement => {
 *  return (
 *    // Make sure styledProps come last so they take priority in stylings in-case of overrides
 *    <BaseBox {...getStyledProps(props)}>
 *      // Your component code
 *    </BaseBox>
 *  )
 * }
 * ```
 *
 * #### `useStyledProps`
 *
 *
 * ```tsx
 * import type { StyledPropsBlade } from '~src/components/Box/styledProps';
 * import { useStyledProps } from '~src/components/Box/styledProps';
 *
 * type MyTextComponentProps = {
 *   // ... Your Props
 * } & StyledPropsBlade;
 *
 *
 * const TextComponentWithStyledProps = styled.p<MyTextComponentProps>((props) => {
 *  const styledPropsCSSObject = useStyledProps(props);
 *
 *  return {
 *    // ...your other CSS,
 *    ...styledPropsCSSObject, // Make sure styledProps come last so they take priority in styles
 *  }
 * })
 * ```
 *
 * Checkout implementation in `BaseText` components for example of `useStyledProps`
 *
 * - Web: [`BaseText.web.tsx`](../../components/Typography/BaseText/BaseText.web.tsx)
 * - Native: [`BaseText.native.tsx`](../../components/Typography/BaseText/BaseText.native.tsx)
 */
// eslint-disable-next-line @typescript-eslint/no-explicit-any
var useStyledProps = function useStyledProps(props) {
  var styledPropsStyles = getStyledProps(props);
  var styledPropsCSSObject = useMemoizedStyles(_objectSpread(_objectSpread({}, styledPropsStyles), {}, {
    theme: props.theme
  }));
  var styledPropsWithoutUndefined = removeUndefinedStyledProps(styledPropsCSSObject);
  return styledPropsWithoutUndefined;
};

export { useStyledProps };
//# sourceMappingURL=useStyledProps.js.map